заменить изображение src текст на img

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 извлечь любой URL, начинающийся с http:// ИЛИ 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. Сопоставьте 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 3

Вот регулярное выражение, которое вы можете использовать:

/^(https?://.+?\.(jpg|gif|png|bmp))$/gm и заменить на <img src="$1" />

Пример этого здесь: http://regexr.com? 2v9r2

Читайте о RegExp в Mozilla Developer Network https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/RegExp