如何优化多次重复正则替换的JavaScript代码？

问题场景 #

现有代码如下：

const str = 'i love code. i write code everyday.'
const regex = /code/g

const outputJs   = str.replace(regex, 'js'  )
const outputCss  = str.replace(regex, 'css' )
const outputHtml = str.replace(regex, 'html')

当前使用/code/g正则对同一长字符串执行三次全局搜索，分别替换为不同内容。但如果正则逻辑复杂、目标字符串过长，重复扫描会浪费不必要的性能，希望优化这段代码。

补充说明：目前想到的临时方案是：

• 使用regex.exec(str)结合字符串操作生成模板字符串组
• 在模板字符串之间拼接不同替换内容生成最终输出

优化方案 #

一次拆分，多次拼接 #

核心思路是仅执行一次正则匹配，将原字符串拆分为固定的「非匹配段」数组，后续只需在这些固定段之间插入不同替换内容即可，彻底避免重复扫描整个字符串。

代码实现：

const str = 'i love code. i write code everyday.'
const regex = /code/g

// 执行一次匹配，拆分原字符串为固定片段
const parts = []
let lastIndex = 0
let match
while ((match = regex.exec(str)) !== null) {
  parts.push(str.slice(lastIndex, match.index))
  lastIndex = regex.lastIndex
}
// 加入最后一段非匹配内容
parts.push(str.slice(lastIndex))

// 生成不同输出结果
const outputJs = parts.join('js')
const outputCss = parts.join('css')
const outputHtml = parts.join('html')

方案优势 #

• 仅对原字符串和正则执行一次匹配扫描，无论需要生成多少种替换结果，都不会重复消耗匹配性能
• 拆分后的片段固定，后续仅需简单的数组拼接操作，性能开销极低
• 逻辑清晰，针对复杂正则或超长字符串场景，性能提升尤为明显

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