在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>节点