更換圖片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

來源