为啥用 textContent 链接不起作用

Posted 2023-02-16

【中文标题】为啥用 textContent 链接不起作用

【英文标题】：Why linkify with textContent does not work为什么用 textContent 链接不起作用

【发布时间】：2018-03-07 17:53:06

【问题描述】：

最近，我建立了一个聊天室。输入文本区域的内容的链接产生了一些麻烦。

 if(!String.linkify) 
            String.prototype.linkify = function() 

                // http://, https://, ftp://
                var urlPattern = /\b(?:https?|ftp):\/\/[a-z0-9-+&@#\/%?=~_|!:,.;]*[a-z0-9-+&@#\/%=~_|]/gim;

                // www. sans http:// or https://
                var pseudoUrlPattern = /(^|[^\/])(www\.[\S]+(\b|$))/gim;

                // Email addresses
                var emailAddressPattern = /[\w.]+@[a-zA-Z_-]+?(?:\.[a-zA-Z]2,6)+/gim;

                return this
                    .replace(urlPattern, '<a href="$&">$&</a>')
                    .replace(pseudoUrlPattern, '$1<a href="http://$2">$2</a>')
                    .replace(emailAddressPattern, '<a href="mailto:$&">$&</a>');
            ;
        

问题：聊天日志中的链接未转换，而是显示为纯字符串。 问题：链接包含隐藏字符 â£https://www.link.com/product/ABC/myaffiliatelink 当我调用生成的链接时，我收到以下浏览器通知：

  Not Found
    The requested URL â£https://www.link.com/product/ABC/myaffiliatelink was not found on this server.

为了获取消息，我使用：

textContainer.textContent = message.linkify();

谁能解释发生了什么以及如何解决这个问题？

【问题讨论】：

您需要发布您的代码，以便我们有机会找出问题所在。

您可以通过环境变量使用docker secrets 或something like this。但正如@Barmar 所说，您必须提供更多信息，至少需要一些代码才能帮助您

你能给我一个直接适用的例子吗？我对“某事”如何转化为会员链接感到有些困惑。也许您想跟踪人们点击了哪些链接，或者您只是想删除部分链接？

【参考方案1】：

在思考和玩了一会儿代码之后，我得到了答案。当我使用

textContainer.textContent = message.linkify();

我将结果定义为纯字符串。因此，我的 linkify 函数添加了诸如 <a href=""> 之类的 html 元素，然后被解释为字符串，因此失败了。

解决办法是把调用改成

textContainer.innerHTML = message.linkify();

因此，元素被解释为 html 元素并且可以扩展。 有关 innerHTML 和 textContent 之间差异的更多信息可以找到here。

最好的问候，乔。