更换图片src文本与IMG

如果HTML代码更换图片src文本与IMG

<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://ORhttps://，并用.jpg，.gif和巴纽或结束。 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>

来源

2011-11-24 Yusaf Khaliq

可行通过PHP .. – RSM

你有没有尝试过任何关于阅读上的RegExp？听起来相当简单，用'.replace（）' –

我不知道从哪里开始 –

这将做到这一点..

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

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

来源

2011-11-24 15:58:52

WOW，从什么时候jQuery接受回调作为.html（）的参数？它甚至不在文档中。在jsfiddle中它不适用于1.4版本以下的版本，所以我认为这是里程碑式的，我不知道这一点。谢谢！ +1 – aorcsik

太棒了，我不知道.html（）可以有一个参数 – Lanston

@inti，它是在文档中.. http://api.jquery.com/html/#html2实际上它被添加在1.4 –

读出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/

编辑：一个更好的解决办法是更换网址，在原始内容图像：

$(".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好点）

来源

2011-11-24 15:54:59 aorcsik

如果其中一个网址不是图像会怎么样？ – MrMisterMan

这是不正确的，它不考虑文件扩展名，它会尝试为'image1.foo'创建图像 – icirellik

在**编辑2 **中更正了我的答案。 Thx指出，你们两个:) – aorcsik

这里是一个正则表达式，你也许可以使用：

/^(https?://.+?\.(jpg|gif|png|bmp))$/gm的d用在这里它<img src="$1" />

实例代替：http://regexr.com?2v9r2

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

来源