Javascript RegEx 匹配 URL 但排除图像答案

【问题标题】：Javascript RegEx to match URL's but exclude imagesJavascript RegEx 匹配 URL 但排除图像
【发布时间】：2012-07-31 16:41:37
【问题描述】：

我需要用实际的可点击链接替换 HTML 文本字符串中的所有文本链接。适用于以下正则表达式：

/\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 前面的内容而不考虑更远的内容。

【问题讨论】：

它不应该检测到：它也不应该检测到：{link} 所以简而言之没有链接应该以 > 或 = 开头（这里同时使用 src=" 和 href="）。
我通常比下一个人更喜欢一个好的多肉正则表达式问题，但我怀疑将文本内部 HTML 转换为 documentFragment 并使用它会使从 html 中分离文本变得容易得多。

标签： javascript regex image hyperlink

【解决方案1】：

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

相信您的原始正则表达式有效，我将在此答案的其余部分参考简化版本：

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

现在，你尝试了这个：

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

这里的主要错误由插入符号标记：插入符号。这会迫使您的正则表达式从行首匹配，这就是它不匹配的原因。让我们删除它并继续：

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

这一次的主要错误在于您对前瞻断言的概念。正如我在 cmets 中解释的那样，这个断言是多余的，因为你说，“匹配 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;
             });

【讨论】：

我以为我使用的是 ahead，而不是lookbehind？还是我不是？
哦。你是对的。但是我的大脑自动纠正了你的错误：将你的环视断言放在你所做的地方只有当它是 lookbehind 时才会起作用。目前你说，“下面的字符串不是src=" 也不是>，而是http、ftp 或file”，这是多余的，因为当然后一个列表绝不是前一个。无论如何，这种冗余并不是导致匹配不足的原因。这是你的^--把它拿出来。
让我再试一次，用一个简化的例子。 (?!=")ht 是这样说的：“接下来的两个字符是 not ="；接下来的两个字符是 ht。” （这就是我所说的多余。当然=" 永远不会是ht！）对比一下(?<!=")ht 所说的：“previous 两个字符不是="； 下一个两个字符是ht。"基本上，我认为您将前瞻可视化是错误的：您需要的是后视，这是 JavaScript 不提供的，因此我在之前的评论中提供了替代方案。
这里，您的解决方案：([^=>]|=[^">])\b(http...
有趣；我不确定为什么. 会很重要；但感谢您自己尝试。至于问题，应该可以加$1！即return htmlString.replace(regExHyperlinks,"$1<a href='$2' target='_blank'>$2</a>"); 但如果没有看到你的新正则表达式，我不能 100% 有信心。

【解决方案2】：

我必须回家，但还没有测试，但我会更轻松地处理隔离您不想要的 HTML 的简单任务。

进行匹配以获取您不想处理的内容的数组。
一劈就撕。
迭代拆分数组并替换 URL，然后将匹配的项目拼接回去
加入并返回

唯一的假设是您不会在文本中以锚点或 img 标记结尾

function zipperParse(htmlText,matcher){
    var zipBackInArray = htmlText.match(matcher),
    workingArray = htmlText.split(matcher),
    i = workingArray.length;

    while(i--){
        buildAnchorTagIfURLPresent(workingArray[i]); //You got this one covered
        workingArray.splice(i,0,zipBackInArray.pop());
        //working backwards makes splice much easier to use here
    }
    return workingArray.join('');    
}

var toExclude = /<a[^>]*>[^>]*>|<img[^>]*>/g;
// is supposed to match all img and anchor pairs but not handling tags inside anchors yet

zipperParse(yourHtmlText,toExclude);

【讨论】：

我之前考虑过拆分和加入，但我认为这是一个太简单的解决方案。我在 RegEx 方面的经验并没有那么丰富，我毫不怀疑这种情况现在已经有所改善 :-) 感谢您提出这个解决方案！

【解决方案3】：

此代码对我有用...只需将 Google Api KEY 更改为排除..=> XXXXXXXXXXXXXXXXXXXXXX 我只是将它放在我的wordpress 的functions.php 主题中。首先是看看你的谷歌地图代码是如何出现在你的网站上的，然后将它与被替换的内容相匹配。

function remove_script_version( $src ) { 
$parts1 = explode( '?', $src );
$parts2 = str_replace('//maps.googleapis.com/maps/api/js', '//maps.googleapis.com/maps/api/js?language=es&#038;v=3.31&#038;libraries=places&#038;key=XXXXXXXXXXXXXXXXXXXXXX&#038;ver=3.31', $parts1);
return $parts2[0]; }
add_filter( 'script_loader_src', 'remove_script_version', 15, 1 );
add_filter( 'style_loader_src', 'remove_script_version', 15, 1 );

【讨论】：