1

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

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

那么有没有办法只在正则表达式中匹配，如果它不以类似的模式开头="|='？因为它会以类似的方式匹配 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 也需要在其他地方使用，所以它需要像捕获一样使用。

我需要考虑的主要场景是：

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

== 编辑 ==

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

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

== 编辑 2 ==

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

Javascript 正则表达式再次多次捕获

4

4 回答 4

3

您正在寻找的是负面的外观，但 Javascript 不支持任何类型的外观，因此您必须使用回调函数来检查匹配的内容并确保它前面没有 a 'or ", 或您可以使用以下正则表达式：

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

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

正则表达式 101 演示

于 2013-09-27T09:48:55.613 回答
1

最后使用该/ig命令应该可以工作... gis 用于全局替换，而isi用于不区分大小写，这是必要的，因为您只有.A-Za-zA-Z

使用以下 vanilla JS 似乎对我有用（请参阅 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，它将是（参见 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\"/>"));
});

更新

以防万一我在示例中使用相同图像 URL 的示例不能说服您 - 它也适用于不同的 URL ...请参阅此 jsfiddle 更新

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\"/>");
于 2013-09-27T10:03:11.363 回答
0

难道你不能看看url前面是否有一个空格，而不是那个词边界吗？似乎有效，尽管您稍后必须删除匹配的空格。

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

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

编辑：该死的，太慢了:)我还是把它留在这里，因为我的正则表达式更短;)

于 2013-09-27T09:57:59.210 回答
0

正如 freefaller 所说/g，如果 exec 不是必须的，您可以使用 flag 一次性找到所有匹配项。

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

于 2013-09-27T09:58:22.867 回答