我正在尝试在我的jQuery脚本中添加一个函数,该函数根据其alt属性为img构建一个完整的src路径。我们的想法是尽可能使代码变得纤薄,以便处理它的非技术人员不会破坏任何东西;他们所要做的就是让alt属性正确,路径的其余部分由脚本自动构建。
无论如何,我的文件名包含连字符,为了使其更加万无一失,我想在alt属性中允许空格,这些空格将被替换为src属性中的连字符。问题是,.replace()
命令似乎只对第一个匹配的字符起作用,所以如果我在alt属性中有三个单词来描述img,则第二个空格不会被替换而img路径会中断。
以下是相关代码:
<div class="copy"><img alt="three word alt" /></div>
<script>
$('div.copy').find('img').each(function() {
$(this).attr('src','/images/'+$(this).attr('alt').replace(' ','-')+'.png');
});
</script>
最终结果应为
<img src="/images/three-word-alt.png" alt="three word alt" />
但它反而出现了:
<img src="/images/three-word alt.png" alt="three word alt" />
是否有更好的方法可以做到这一点?
答案 0 :(得分:5)
在这里使用/g
,如下所示:
$('div.copy').find('img').each(function() {
$(this).attr('src','/images/'+$(this).attr('alt').replace(' '/g,'-')+'.png');
});
//or the regex version:
$('div.copy').find('img').each(function() {
$(this).attr('src','/images/'+$(this).attr('alt').replace(/ /g,'-')+'.png');
});
/g
是匹配所有匹配项的global modifier而不是第一个匹配项(默认值)...与其他大多数语言相比,JavaScript在这方面的行为有点奇怪。
答案 1 :(得分:3)
如果第一个参数是字符串文字,则String.replace()仅执行一次替换。使用正则表达式作为您的第一个参数。例如:
$(this).attr('src','/images/'+$(this).attr('alt').replace(/ /g,'-')+'.png');
或
$(this).attr('src','/images/'+$(this).attr('alt').replace(/\s/g,'-')+'.png');
答案 2 :(得分:2)
应该做的伎俩。
$(this).attr('src','/images/'+$(this).attr('alt').replace(/\s/g,'-')+'.png');