如何使用给定数组批量替换目标字符串中的对应子串

原有代码的问题根源 #

你写的这段代码达不到预期效果，核心有两个原因：

1. 没有理解JS字符串的不可变特性：replaceAll方法不会修改传入的原字符串，只会返回一个替换完成的全新字符串。很多人写完循环替换的代码，习惯直接输出原始变量s，但s从始至终都没被改动过，自然和原来的内容完全一致。
2. 误用了map的使用场景：u.map(e => s.replaceAll(e,'hi'))这行执行时，每次循环都是拿从未被修改过的原始字符串s做替换，既没有把前一次的替换结果传递给下一次循环，也没有把最终的替换结果串联成完整的目标字符串——最终map返回的是一个长度为2的数组，数组里分别存着“只把JS换成hi的字符串”、“只把rock换成hi的字符串”，根本不是你想要的合并替换结果。

可实现预期效果的修正写法 #

可以根据场景选择下面任意一种实现方式：

• 用reduce串联替换流程：把每一次替换的结果作为下一次替换的基准，从原始字符串s开始，依次处理数组里的每个待替换关键词，最终就能拿到所有项都替换完成的字符串：

  const u = ['JS', 'rock']
  const s = 'I like JS, and rock'
  const finalStr = u.reduce((acc, keyword) => acc.replaceAll(keyword, 'hi'), s)
  // 输出结果：'I like hi, and hi'
  

• 构造全局匹配规则一次性完成替换：当待替换的关键词较多时，这种写法的性能更好，不需要多次遍历字符串做替换。

  注意：如果关键词里包含正则特殊字符（比如.、*、?），需要先对关键词做转义处理，避免匹配失效

  const u = ['JS', 'rock']
  const s = 'I like JS, and rock'
  const matchReg = new RegExp(u.join('|'), 'g')
  const finalStr = s.replaceAll(matchReg, 'hi')
  

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