如何改变页面上所有img src的一部分?

时间:2013-03-08 18:00:34

标签: javascript jquery

我正在寻找的是如何使用java脚本更改页面上的所有img src。

如果说:

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

我只想将“-small”更改为“-large”并保留第一部分和扩展名。

如果有人能帮助我,那将非常感谢。

5 个答案:

答案 0 :(得分:3)

这是JQuery代码。

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

答案 1 :(得分:1)

如果你想要常规的js:

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

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

编辑:我注意到我们中的一些人在一分钟左右的时间内基本上回答了相同的问题。但是,有几点注意事项:

(1)当简单的字符串匹配更有效地完成工作时,不要使用正则表达式。

(2)我在我的匹配中包含了连字符( - ),以免意外地将它与没有连字符的字符串'small'的图像名称混淆。毕竟,如果图像是小花,并且图像名称是'smallflower-small.jpg',则不使用连字符的匹配会中断。

答案 4 :(得分:0)

使用jQuery,您可以:

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

Here's the fiddle