如何用正则表达式替换图像 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">."

哎呀！发生了什么？嗯，.*是贪婪的；也就是说，它将尽可能匹配。它确实做到了，并且它捕获了这两个图像。

您所要做的就是通过在重复运算符后添加问号将其更改为惰性：

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

现在它应该按预期工作了！您可以在这里看到它的实际效果：

http://jsfiddle.net/tMA6e/