使链接在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! 

在Javascript

现有的HTML页面中？

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个：之前，链接，
后
• 创建与href这是一样的链接
• 使用insertBefore()链接之前插入此<a>节点<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'); 

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