如何用单个JavaScript函数批量替换HTML标签中的指定内容？

问题分析 #

你当前的代码存在两个核心问题：

1. 替换未叠加：每次调用replaceAll都基于原始字符串，而非前一次替换后的结果，导致多组替换无法生效；
2. 转义字符错误：在JS字符串中，要表示反斜杠\必须用双反斜杠\\，你使用的\/只会被解析为普通的/，导致部分替换无效果。

正确实现方案 #

我们可以编写一个通用的批量替换函数，通过规则数组统一管理所有替换逻辑，同时修正转义问题：

function batchHtmlReplace(originalText) {
  // 定义所有替换规则：[查找字符串, 替换字符串]
  const replaceRules = [
    // 给a标签的href前缀添加{{store}}
    ['<a href="', '<a href=\"{{store}}'],
    // 给链接结尾的/添加反斜杠转义
    ['/">', '\\/">'],
    // 给p标签闭合标签的/添加反斜杠转义
    ['</p>', '<\\/p>']
  ];

  // 遍历规则，依次叠加替换
  return replaceRules.reduce((processedText, [searchStr, replaceStr]) => {
    return processedText.replaceAll(searchStr, replaceStr);
  }, originalText);
}

// 测试代码
const paragraph = '<p>I think Ruth\'s dog <a href="test-link/">is</a> cuter than your dog! \n    </p>';
const result = batchHtmlReplace(paragraph);
console.log(result);

代码说明 #

• 批量替换逻辑：使用Array.reduce遍历替换规则，每次基于上一次处理后的文本进行替换，确保所有规则按顺序叠加生效；
• 修正转义：所有需要输出反斜杠\的场景，都用\\表示，比如'\\/">'会被解析为\/">；
• 可扩展性：如果需要添加更多替换规则，只需在replaceRules数组中新增条目即可，无需修改函数核心逻辑，适合处理大段文本的多组替换需求。

运行后输出的结果为：

<p>I think Ruth's dog <a href="{{store}}test-link\/">is</a> cuter than your dog! 
    <\/p>

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