【问题标题】：JQuery replace src textjQuery 替换 src 文本
【发布时间】：2015-06-06 19:48:41
【问题描述】：

如何将所有 ul>li>ing 元素的 src 文本“web”替换为“mobile”？想将“img/web1.png”改为“img/mobile1.png”，“img/web2.png”改为“img/mobile2.png”，“img/web7.png”改为“img/mobile7.png” "等等。

<div class="col-md-2">  
      <center><a href="#"><div class="img-circle" id="circle2">Mobile</div></a></center>
      <br/> 
</div>

<div id = "wrapper">
        <ul id = "portfolio">
            <li><img class="img-thumbnail" src="img/web1.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web2.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web3.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web4.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web5.png" alt = "img"/></li>
            <li><img class="img-thumbnail" src="img/web6.png" alt = "img"/></li> 
            <li><img class="img-thumbnail" src="img/web7.png" alt = "img"/></li> 

            <button id="zoom" type="button" class="btn btn-info"> 
                <span class="glyphicon glyphicon-search"> Zoom </span> 
            </button>
        </ul> 

    </div>

    $("#circle2").click(function(){ 
      $("#portfolio>li").first().children("img").attr("src","img/mobile1.png");
    });

【问题讨论】：

标签： jquery text replace src

【解决方案1】：

您可以遍历li 元素，找到img 元素并在src 属性上执行replace。

$(document).ready(function () {
    $("#circle2").click(function () {

        // Loop through all li elements in the 
        //     element with the id of portfolio
        $("#portfolio").find("li").each(function () {
   
            // Find the image tag
            var img = $(this).find("img");
      
            // Update the src property to the same thing, 
            //       replacing web with mobile
            img.prop("src", img.prop("src").replace("web", "mobile"));

        }); // end li loop
    }); // end change stuff click event
}); // end doc ready

你可以看到一个工作的JSFiddle here

参考资料：

【讨论】：

谢谢。如果 src 原始链接是“img/database1.png”、“img/webapp1.png”或“img/image1.png”怎么办？有没有办法可以将所有可能的不同单词替换为 src=" img/mobile1.png”。问题是我不知道原来的词是“数据库或网络应用程序或图像”，或者它可能是任何词
如果您不能 100% 确定那里会出现什么文本，但知道它会以数字结尾，那么您可能最好使用正则表达式。 stackoverflow.com/questions/3890680/…
我试过但不能。我用这个吗？ img.prop("src", img.prop("src").replace(/[\d.]*/, "mobile"));

【解决方案2】：

对于所有#portfolio>li>img，这会将src 文件名中直到第一位数字的所有字符替换为“mobile”（根据您上面的评论）：

$("#portfolio>li>img").each(function() {
    $(this).attr("src", $(this).attr("src").replace(/[^\/]*?(?=\d*\.png)/, "mobile"));
});

【讨论】：

谢谢。我试过了，只有当代码是 replace(/.*?(?=\d+)/, "img/mobile"));有没有一种方法，我只需要在 img/ 之后和数字之前替换单词？
谢谢。有用。 /[^\ / ] 是否意味着找到任何不是'\'的字符？
几乎！它是“任何不是/ 的字符”。它必须被转义，因为/ 是正则表达式的开始/结束字符。
*?(?=\d*\.png) 是否匹配任何出现 .png 零次或多次的单词？
它匹配任何后跟XXX.png（其中X是数字）的字符，但它不捕获XXX.png。它被称为lookahead。开头的*? 表示它是lazy，即它不会比它必须的匹配更多。这确保它不消耗任何数字。另一种防止数字捕获的方法是将\d 添加到排除的字符中，即[^\/\d]*。