代码之家 › 专栏 › 技术社区 › max

使链接在Javascript中可点击?

text-parsing formatting javascript

7

max · 技术社区 · 14 年前

有没有简单的方法从

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?

2 回复 | 直到 14 年前

1

11

keeri 7 年前

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

(我的正则表达式有点生疏,所以您可能需要使用语法)。这只是一个简单的例子。在这里您需要小心脚本注入(例如,如果我有 http://"><script>doevil()</script>

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

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

查找对文本节点的引用
在内容中,查找URL的开始索引和结束索引
使用 splitText() 方法将节点拆分为3个:before、link、after
<a> 具有 href
使用 insertBefore() <a>
appendChild() 将链接移动到 < 节点

2

3

David 14 年前

解决此问题的最简单方法是以内容富文本节点为目标。对于每个文本节点,应用如下内容:

// 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。