2013-03-08 105 views
0

我在找的是如何使用java腳本更改頁面上的所有img src。如何更改頁面上所有img src的部分內容?

如果說:

<img src="myimg1-small.png"></img> 
<img src="myimg2-small.gif"></img> 
<img src="myimg3-small.jpg"></img> 
....... 

我只是想改變「 - 小」到「 - 高」,並保持第一部分和擴展。

如果有人能幫助我,那將是非常感謝。

回答

3

這裏是JQuery代碼。

$('img').each(function(){ 
    $(this).attr('src',$(this).attr('src').replace(/-small\./g,'-large')); 
}); 
+0

爲什麼要使用正則表達式?你只是讓瀏覽器比需要更努力工作。只需用字符串''-large''替換字符串''-small''! – 2013-03-08 18:06:58

1

如果你想經常JS:

var imgs = document.getElementsByTagName('img'); 
for (var i = 0; i < imgs.length; i++) { 
    imgs[i].src = imgs[i].src.replace('small','large'); 
} 
+0

謝謝你,我只是學習JavaScript,我可以改變整個src,但不知道如何改變結束。現在我可以有一個功能,整個網站將提供一個更小的img文件的移動再次感謝 – 2013-03-09 02:33:25

+0

你能否告訴我如何改變包裝圖像的鏈接以相同的方式取代小的大的再次感謝 – 2013-03-09 12:10:47

+0

如果這解決了您的問題,您可能需要將此標記爲已接受的答案。另外,如果鏈接是圖像的直接父項,並且您想在同一個for循環中執行更改,請在'imgs [i] .src = imgs [i] .src.replace('small','large' );''你可以把'imgs [i] .parentNode.href = imgs [i] .parentNode.href.replace('test','testing');' – 2013-03-11 10:56:56

1
$('img[src^="myimg1-small"]').attr('src', function() { 
    return this.src.replace('small', 'large'); 
}); 
+0

+1至少有一個優雅的jquery解決方案:) – kapa 2013-03-08 18:06:57

0

使用jQuery你可以做:

$(document).ready(function(){ 
    $('img').each(function(){ 
     $(this).attr('src', $(this).attr('src').replace('small', 'medium')) 
    }) 
}); 

Here's the fiddle

1
$('img').each(function(){ 
    $(this).attr('src', $(this).attr('src').replace('-small','-large')); 
}); 

編輯:我注意到我們幾個人在一分鐘左右的回答基本相同。但是,一些注意事項:

(1)當簡單字符串匹配將更有效地完成工作時,不要使用正則表達式。 (2)我在我的匹配中包含了連字符( - ),以免不小心將它與具有字符串'small'且沒有連字符的圖像名稱混淆。畢竟,例如,如果圖像是一朵小花,圖像名稱是'smallflower-small.jpg',則不使用連字符的匹配會打破。