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

这样做..

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

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

Answer 2

读出div的内容。匹配网址并将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/

修改：更好的解决方案是将原始内容中的网址替换为图片：

$(".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 3

以下是您可以使用的正则表达式：

/^(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

用img替换图像src文本

3 个答案: