在Javascript中壓縮圖像源代碼路徑

Question

我有一個網絡應用程序，用其他img替換少數img。

例如：帶有路徑http://example.com/example/example/images/dir/1.gif的圖像用http://cdn.example.com/dir/1.gif進行了重新處理。

爲此，我使用jQuery attr（）。

所以我的代碼看起來是這樣的：

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif"); 
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif"); 
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif"); 
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif"); 
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif"); 
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif"); 
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif"); 
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif"); 
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif"); 
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif") 

那麼，有沒有一種方法來壓縮呢？所以它是用較少的字符寫成的？

注意：在每一行中，兩個網站上的圖像都是相同的。例如，1.gif被替換爲1.gif，但是不同的服務器。 所以基本上我想更換服務器。當http://www.example.com/dir/images/dir/替換爲http://cdn.example.com/dir/。

非常感謝

Answer 1

這是因爲使用循環一樣簡單：

var i; 
for (i = 1; i <= 10; i++) 
{ 
    $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif'); 
} 

還是你要求找到並替換所有？

您可以使用attr starts with selector：

$('img[src^="http://www.example.com/"]').each(function(index,element){ 
    var $this, src, newSrc; 
    $this = $(this); 
    src = $this.attr('src'); 
    //do your replacement here 
    newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
    $this.attr('src', newSrc); 
}); 

爲莫恩扎曼指出，ATTR接受一個函數作爲參數，以及，從而縮短這個腳本：

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){ 
    return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir'); 
}); 

Answer 2

您需要使用帶有正則表達式的JavaScript的.replace（）方法來替換內容。

在jQuery中屬性選擇器^=表示尋找以開頭的屬性值。

試試這個，我假設其以「www.example.com」開頭的圖片：

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src', 
    function(i,src){ 
     return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});