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

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

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

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

• 查找对文本节点的引用
• 在内容中，查找 URL 的开始和结束索引
• 使用 splitText()将节点拆分为3的方法:之前，链接，之后
• 创建一个 <a> href 的节点和链接一样
• 使用 insertBefore()插入 <a>链接前的节点
• 使用 appendChild()将链接移至 <a>节点