2013-03-08 42 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',则不使用连字符的匹配会打破。