Javascript RegEx 匹配 URL 但排除图像

Question

我需要用实际的可点击链接替换 ​​HTML 文本字符串中的所有文本链接。适用于以下 RegEx:

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

然后我注意到它还替换了图像和已经格式化的链接。我需要排除以 src"和 > 开头的链接的数字......我搜索了一下并阅读了很多关于负面前瞻的文章，这里回答了许多问题。我试过这个(在第一个/之后添加了一些东西):

/(^(?!src="|>)\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gi

但这不再匹配任何链接。我尝试了几个类似的语句，没有 ^，更改了一些括号等等，但似乎没有任何效果。我尝试将 .{0} 放在我添加的部分和\b 之间，以确保他只会查看 url 前面的内容，而不会考虑更远的内容。

Answer 1

编辑:讨论时间越来越长，所以我决定改为更新答案。

相信您原来的正则表达式是有效的，我将在本回答的其余部分引用一个简化版本:

/\b(https?|ftp|file)/gi

现在，您尝试这样做:

/^(?!src="|>)\b(https?|ftp|file)/gi
 ^

此处的主要错误由插入符号标记:插入符号。这会强制您的正则表达式从行首开始匹配，这就是它什么都不匹配的原因。让我们删除它并继续:

/(?!src="|>)\b(https?|ftp|file)/gi

这次的主要错误在于您对先行断言的概念。正如我在评论中解释的那样，这个断言是多余的，因为你说的是​​，“匹配 http 或 https 或 ftp 或 file ，只要这些都不是 src=" 或 >。"这句话几乎是多余的，以至于这句话对我们来说甚至没有意义!什么相反，你想要的是一个lookbehind断言:

/(?<!src="|>)\b(https?|ftp|file)/gi
   ^

为什么？因为您希望在您可能希望匹配的字符串后面找到 src=" 或 > 。问题是什么？JavaScript 不支持后向断言。所以，我提出了一个替代方案。不可否认，它是有缺陷的(虽然不是你提出的 HTML 破坏的原因)。这里是，修复:

/(.[^>"]|[^=]")\b(https?|ftp|file)/gi
  ^^^^^^^^^^^^

这确实是一个非直观的正则表达式，需要解释。它将我们的案例分成两部分。假设我们有两个字符集。如果集合不以>或"结尾，那么我们就不会怀疑它；我们很高兴；匹配可能跟在后面的任何 URL。但是，如果它确实以 > 或 " 结尾，那么，唯一“可以原谅”的情况是第一个字符不是 =。所以你看，这里有点逻辑诡计。

现在，至于为什么这会破坏您的 HTML。请务必使用 JavaScript 的 replace，并将第一个捕获的组替换回页面!如果您简单地用空替换每个匹配项，您最终会“吃掉”双字符集，我们只是想调查，而不是破坏。

html.replace(/(.[^>"]|[^=]")\b(https?|ftp|file)/gi,
             function(match, $1, offset, original) {
                 return $1;
             });