Javascript 正则表达式用链接替换 ​​URL，但不在嵌入(或 img)标签中

Question

我目前正在使用以下代码在页面上的 div 中搜索 URL 并将它们替换为标签。

然而，当我们在 div 中嵌入标签时，它会弄乱这些标签中的链接。

function replaceURLWithHTMLLinks(text) { 
    return text.replace(/(ftp|http|https|file):\/\/[\S]+(\b|$)/gim,'<a href="$&" class="my_link" target="_blank">$&</a>').replace(/([^\/])(www[^ <]+(\b|$))/gim,'$1<a href="http://$2" class="my_link" target="_blank">$2</a>');
}

$(document).ready(function(){
    var htmlStr = $("div.content-a").html();
    var htmlStrAfter = replaceURLWithHTMLLinks(htmlStr);
    $("div.content-a").html(htmlStrAfter);
});

谁能告诉我如何排除任何以 "或 ' 开头的 http://...？

或类似的？

Answer 1

您可能应该按照推荐使用 DOM。但是为了使您的正则表达式按预期工作，您应该在其前面添加 (?:^|[^"'])。这意味着匹配行首或匹配除 ' 之外的任何字符 和 "。因此，您的第一个正则表达式将如下所示:

/(?:^|[^"'])(ftp|http|https|file):\/\/[\S]+(\b|$)/gim  

而且您对 replace 方法的链接很丑陋。如果您将方法调用拆分到不同的行，代码将更具可读性。

更新:为了跳过第一个多余的字符，您可以使用 $1 而不是 $& 并且您的正则表达式必须更改为:

/(?:^|[^"'])((ftp|http|https|file):\/\/[\S]+(\b|$))/gim