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()可以检查以确保网址中没有任何恶意内容。

但是，RegEx-innerHTML方法在大型文本体上的表现不会很好，因为它会拆除并重建节点的整个HTML内容。您也可以使用DOM方法实现此目的：

查找对文本节点的引用
在内容中，查找网址的开始和结束索引
使用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。

在Javascript中使链接可点击？

2 个答案: