Question

我这里有点奇怪，我基本上有一大块文字，可能包含也可能不包含图片链接。

所以我要说它有一个模式可以提取图像url，但是一旦找到匹配，它就会被一个链接为src的元素替换。现在的问题是文本中可能存在多个匹配，这就是它变得棘手的地方。由于url模式现在将匹配src标记url，这基本上只会进入无限循环。

如果它没有像="|='这样的模式开始，那么有没有办法在正则表达式中匹配？因为它会匹配网址：

some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6

但不是

some image <img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6">

我不确定是否有可能，但是如果有可能有人指出我正确的方向？在这种情况下，替换本身是不够的，因为匹配的url也需要在别处使用，因此需要像捕获一样使用它。

我需要考虑的主要方案是：

一个不同文本块中的许多链接
没有任何其他文字的单个链接
包含其他不同文字的单个链接

== edit ==

以下是我用来匹配网址的当前正则表达式：

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

== edit 2 ==

所以每个人都明白为什么我不能在这里使用/ g命令是一个解释问题的答案，如果我可以像我最初尝试那样使用这个/ g那么它会让事情变得更简单。

Javascript regex multiple captures again

Answer 1

你正在寻找的是一个负面的背后，但Javascript不支持任何类型的外观，所以你要么必须使用回调函数来检查匹配的内容，并确保它没有前面的'或"，或者您可以使用以下正则表达式：

(?:^|[^"'])(\b(https?|ftp|file):\/\/[-a-zA-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

有一个问题，就是在成功匹配的情况下，它会捕获另一个字符，即输入中(\b(https?|ftp|file)模式之前的字符，但我认为你可以轻松处理这个问题。

Regex101 Demo

Answer 2

最后使用/ig命令应该有效... g用于全局替换，i用于不区分大小写，这是必要的，因为你只需要得到A-Z而不是a-zA-Z。

使用以下vanilla JS出现to work for me (see jsfiddle) ...

var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");

虽然它突出显示的是URL的查询字符串部分（?v=6未被您的RegEx选中）。

对于jQuery，它将是(see jsfiddle) ...

$(document).ready(function(){
  var test="some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 some image http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6";
  var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
  $("#output").html(test.replace(re,"<img src=\"$1\"/>"));
});

<强>更新

以防我在示例中使用相同图片网址的示例无法说服您 - 它也适用于不同的网址... see this jsfiddle update

var test="http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=6 http://cdn.sstatic.net/serverfault/img/sprites.png?v=7";
var re = new RegExp(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))/ig);
document.getElementById("output").innerHTML = test.replace(re,"<img src=\"$1\"/>");

Answer 3

难道你不能只看到网址前面是否有空格，而不是那个字边界？似乎工作，虽然您将不得不删除匹配的空格。

(\s(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*(?:png|jpeg|jpg|gif|bmp))

http://rubular.com/r/9wSc0HNWas

编辑：该死的，太慢了:)我仍然会留在这里因为我的正则表达式更短;）

Answer 4

正如freefaller所说，如果exec不是必须的话，你可以使用/g标志来一次性找到所有匹配。

否则：您可以将(="|=')?添加到正则表达式的开头，并检查$ 1是否为undefined。如果未定义，则不会以="|='模式

启动

如果它不是以javascript中的模式开头，则仅匹配正则表达式

4 个答案: