如何用Regex替换图像URL（纯文本）

Question

javascript代码将是更改图像URL（纯文本），例如：

http://www.sstatic.net/stackoverflow/img/apple-touch-icon.png

显示如下：

这是我想要使用的代码：

var isImgUrl= /(https?:\/\/.*\.(?:png|jpg|gif))/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src=" [how to insert the image URL here from regex?] "/>');

请帮我修理上面的​​代码

顺便说一句，正则表达式（在var isImgUrl上）已经正确了吗？

Answer 1

你快到了，赫里。当您进行替换时，替换字符串中可以使用一些元字符。 $1将插入第一个匹配的组，$2将插入第二个匹配的组，依此类推。但是，在您的情况下，您可以使用更通用的$&，它将插入整个匹配的正则表达式，因此您甚至可以在正则表达式中删除不必要的组：

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|gif)/i;
var txt=document.getElementById('comment');
txt.innerHTML=txt.innerHTML.replace(isImgUrl,'<img src="$&"/>');

我猜这里，但您可能还想要包含常见的JPEG扩展.jpeg（以及更短的.jpg）。

我也怀疑你想要替换所有这样的匹配;你所拥有的只会取代第一个。要替换所有匹配项，请同时为正则表达式指定g修饰符。所以考虑到这一切，你的正则表达式变成了：

var isImgUrl= /https?:\/\/.*\.(?:png|jpg|jpeg|gif)/ig;

除了等待！还有更多。如果以这种方式进行多次替换，由于重复运算符的贪婪性，您将遇到麻烦。所以在这个字符串上尝试上面的正则表达式：

"One picture: http://foo.com/a.jpg, two pictures: http://foo.com/b.jpg."

您期望得到的回报是：

"One picture: <img src="http://foo.com/a.jpg"/>, two pictures: <img src="http://foo.com/b.jpg">."

但你真正得到的是：

"One picture: <img src="http://foo.com/a.jpg, two pictures: http://foo.com.b.jpg">."

糟糕！发生了什么？好吧，.* 贪婪;也就是说，它会尽可能多地匹配。所以它确实如此，它攫取了两个图像。

您只需在重复运算符后添加问号，即可将其更改为 lazy ：

var isImgUrl= /https?:\/\/.*?\.(?:png|jpg|jpeg|gif)/ig;

现在应该按预期工作了！你可以在这里看到它：

http://jsfiddle.net/tMA6e/