javascript - 在Javascript中使链接可点击？

Question

有没有一种简单的方法可以从

Then go to http:/example.com/ and foo the bar!

进入

Then go to <a href="http://example.com">example.com</a> and foo the bar!

在现有 HTML 页面中的 Javascript 中？

Answer 1

是的。最简单的方法是使用正则表达式将看起来像链接的东西替换为链接的等价物。就像是：

node.innerHTML = node.innerHTML.replace(/(http:\/\/[^\s]+)/g, "<a href='$1'>$1</a>")

（我的 RegEx 有点生疏，所以您可能需要使用语法）。这只是一个简单的案例。您需要警惕这里的脚本注入（例如，如果我有http://"><script>doevil()</script>）。解决此问题的一种方法是使用链接构建功能：

node.innerHTML = node.innerHTML.replace(/ ... /g, buildLink($1));

在哪里buildLink()可以检查以确保 URL 不包含任何恶意内容。

但是，RegEx-innerHTML 方法在处理大量文本时表现不佳，因为它会拆除并重建节点的整个 HTML 内容。您也可以使用 DOM 方法来实现这一点：

• 查找对文本节点的引用
• 在内容中，查找 URL 的开始和结束索引
• 使用splitText()方法将节点拆分为3个：before、link、after
• 创建一个与链接相同的<a>节点href
• 用于在链接之前insertBefore()插入此<a>节点
• 用于appendChild()将链接移动到<a>节点中

Answer 2

首先，“在 HTML 页面内”很困难，因为“页面”实际上是一棵 DOM 树（部分由文本节点组成，大部分由 HTML 元素组成）。

解决此问题的最简单方法是针对内容丰富的文本节点。对于每个文本节点，应用如下内容：

// we'll assume this is the string of a content-rich text node
var textNode = document.getElementById('contentNode');
textNode.innerHTML = textNode.innerHTML.replace(/(\s)(http:\/\/[^\s]+)(\s)/g, '$1<a href="$2">$2</a>$3');

顺便说一句：这里有安全隐患。如果您从未经消毒的文本生成链接，则存在 XSS 的可能性。