除非已经有链接，否则将 URL 转换为链接答案

【问题标题】：Transform URL into a link unless there already was a link除非已经有链接，否则将 URL 转换为链接
【发布时间】：2010-10-17 02:28:55
【问题描述】：

我知道这里已经讨论过这个问题，但没有针对具体问题提供解决方案。请看一下...

我正在使用一个函数将纯文本 URL 转换为可点击的链接。这就是我所拥有的：

<script type='text/javascript' language='javascript'>

window.onload = autolink;

function autolink(text) {

var exp = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;

document.body.innerHTML = document.body.innerHTML.replace(exp,"<a href='$1'>$1</a>"); 

}

</script>

这让

https://stackoverflow.com/

看起来像：

https://stackoverflow.com/

它可以工作，但也可以用嵌套链接替换现有的 HTML 链接。

所以，一个有效的 HTML 链接像

<a href="https://stackoverflow.com/">StackOverflow</a>

变得像这样乱七八糟：

<a href="https://stackoverflow.com/<a href="https://stackoverflow.com/">StackOverflow</a>">StackOverflow</a>...

如何修复表达式以忽略链接标签的内容？谢谢！

我是新手...我几乎不懂正则表达式代码。请温柔 :) 再次感谢。

【问题讨论】：

标签： javascript regex

【解决方案1】：

使用jQuery JavaScript library，这看起来像（http://jsfiddle.net/BRPRH/4 的演示）：

function autolink() {
    var exp = /(\b(https?|ftp):\/\/[-A-Z0-9+\u0026@#\/%?=~_|!:,.;]*[-A-Z0-9+\u0026@#\/%=~_|])/gi,
        lt = '\u003c',
        gt = '\u003e';

    $('*:not(a, script, style, textarea)').contents().each(function() {
        if (this.nodeType == Node.TEXT_NODE) {
            var textNode = $(this);
            var span = $(lt + 'span/' + gt).text(this.nodeValue);
            span.html(span.html().replace(exp, lt + 'a href=\'$1\'' + gt + '$1' + lt + '/a' + gt));
            textNode.replaceWith(span);
        }
    });
}

$(autolink);

编辑：排除的文本区域、脚本和嵌入的 CSS。我注意到这也可以使用pure DOM's splitText 来完成，它的优点是不添加额外的跨度元素。

编辑 2： 删除了所有的 & 和双引号。

编辑 3：也去掉了字符。

【讨论】：

太棒了！但我在 Blogger 中使用它，而 Blogger 的 & 符号有问题。 Blogger 会自动将所有引号替换为 "所以我试图用 & 替换“&” （在没有 jQuery 的情况下运行良好），但现在不起作用（没有任何反应）。我也尝试过删除 & 号，但都不起作用。
不管怎样，多亏了你，我学到了一些有趣的东西。也许脚本也应该排除 img 标签...
@Matias：如果您认为这是一个问题，我已经编辑了脚本以消除所有与符号和双引号。
Blogger 似乎也将 $('') 替换为 $("")。
感谢您的时间和耐心，但我输了。 Blogger 不接受没有引号的 A 标签。 Blogger 说：«与元素类型“href”关联的属性“{1}”需要打开引号。»

【解决方案2】：

这个问题超出了正则表达式的能力。您可能可以编写一个可以避免某些链接的正则表达式，但您无法避免每个现有链接。

好消息是，不同的方法将使工作更容易。现在您使用document.body.innerHTML 将HTML 操作为纯文本。要以这种方式正确执行此操作，您基本上需要自己解析 HTML。但你不必这样做，因为浏览器已经为你解析了！

Web 浏览器允许您以一系列对象的形式访问 HTML 文档。它被称为 文档对象模型 (DOM)，如果您对此进行一些阅读，您应该能够学习如何遍历 HTML，跳过 A 元素内的任何内容，并使用您仅在纯文本上使用的正则表达式。

【讨论】：