用 img 替换图像 src 文本

Question

如果 HTML 代码是

<div class="photos">
http://myweb.com/imgs/img1.jpg
https://myweb.com/imgs/img2.gif
http://myweb.com/imgs/img3.png
https://myweb.com/imgs/img4.bmp
</div>

您如何通过 jquery 提取任何以 http:// OR https:// 开头并以 .jpg .gif .png 或 .bmp 结尾的网址并设置它们作为图像

<div class="photos">
<img src="http://myweb.com/imgs/img1.jpg"/>
<img src="https://myweb.com/imgs/img2.gif"/>
<img src="http://myweb.com/imgs/img3.png"/>
<img src="https://myweb.com/imgs/img4.bmp"/>
</div>

Answer 1

读出 div 的内容。匹配 url 并将 div 的内容替换为图片：

$(".photos").each(function() {
    var images = $(this).html(),
        imgs = images.match(/https?:[^\s]+/g),
        html = "";
    for (var i=0; i<imgs.length; i++)
    {
        html += '<img src="'+imgs[i]+'"/>'+"\n";
    }
    $(this).html(html);
});

你可以在这里测试它：http://jsfiddle.net/inti/ez6WE/

编辑：更好的解决方案是将原始内容中的 url 替换为图片：

$(".photos").each(function() {
    var images = $(this).html(),
        imgs = images.match(/https?:[^\s]+/g);
    for (var i=0; i<imgs.length; i++)
    {
        images = images.replace(imgs[i], '<img src="'+imgs[i]+'"/>');
    }
    $(this).html(images);
});

在这里试试：http://jsfiddle.net/inti/ez6WE/5/

编辑 2： 确保只匹配您想要显示的图像，必须像这样调整正则表达式：/https?:[^\s]+\.(jpg|gif|png|bmp)/g（@MrMisterMan 的好点）

Answer 2

这是一个您可以使用的正则表达式：

/^(https?://.+?\.(jpg|gif|png|bmp))$/gm 并替换为 <img src="$1" />

这里的例子：http://regexr.com?2v9r2

在 Mozilla 开发者网络 https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp 上阅读 RegExp

Answer 3

这样就可以了..

$('.photos').html(function(index, html){
    return html.replace(/(http\S+\.(jpg|gif|png|bmp))/gim,'<img src="$1" />');
});

演示地址 http://jsfiddle.net/gaby/K2nQJ/