1

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 上）已经正确了？

4

1 回答 1

5

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

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

我在这里猜测，但您可能还想包含通用的 JPEG 扩展名.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/

于 2013-07-28T17:55:53.930 回答