如何使用jQuery实现多文本实例批量替换为对应图片（解决仅替换单个的问题）

你的问题出在每次调用$(this).html()都会完全覆盖元素当前的内容，而不是在之前修改的基础上继续更新。比如第一次你把文本里的1换成图片，然后第二次又用原始的text去替换2，这就把第一次的修改冲掉了，最后第三次替换完，自然只剩3的替换生效。

这里有两种简单的修改方案：

方案一：链式调用replace，一次性更新HTML #

把所有替换操作基于同一个字符串依次执行，最后再一次性设置元素的HTML内容：

$('.icon-box-1').each(function() { 
    var text = $(this).text(); 
    // 链式替换，每次基于上一次的结果继续修改
    var updatedContent = text.replace('1', '<img src="1.png" alt="" />')
                             .replace('2', '<img src="2.png" alt="" />')
                             .replace('3', '<img src="3.png" alt="" />');
    $(this).html(updatedContent); 
});

方案二：用正则表达式批量替换（更简洁） #

如果你的替换规则是数字对应同名图片，可以用正则一次性匹配所有目标字符，动态替换：

$('.icon-box-1').each(function() { 
    var text = $(this).text(); 
    // 匹配所有1、2、3的字符，用匹配到的数字拼接图片路径
    var updatedContent = text.replace(/([123])/g, '<img src="$1.png" alt="" />');
    $(this).html(updatedContent); 
});

这个方法的好处是扩展性更强，以后要加4.png、5.png这类替换，只需要修改正则里的[123]为[12345]就行，不用再加额外的replace语句。

内容的提问来源于stack exchange，提问作者Ryan