全面掌握JavaScript字符串replace回调函数参数使用方法详解

replace 回调函数的标准参数顺序

当你的正则表达式成功匹配时，回调函数会按固定顺序接收到若干参数，这个顺序绝对不能搞错。简单来说就是：

• 第一个参数：整个匹配到的字符串，也就是正则中 $& 对应的内容。
• 接下来的参数（依次排列）：每个小括号 () 捕获组匹配到的内容，分别对应 $1、$2……如果没有捕获组，则没有这些参数。
• 倒数第二个参数：本次匹配的起始位置（在原字符串中的索引，从0开始）。
• 最后一个参数：调用 replace() 的原始字符串本身。

看一个示例就清楚了：'a1b2'.replace(/(\d)/g, (match, p1, offset, str) => `【${p1}】@${offset}`) 运行后会得到 "a【1】@1b【2】@3"。其中 p1 就是捕获组的内容，offset 是索引位置。

ES2018 命名捕获组：回调函数多出的 groups 参数

从 ES2018 开始，你可以使用命名捕获组，例如 /(?\d{4})-(?\d{2})/。这时，回调函数的末尾会多出一个 groups 对象（位于 string 参数之后），该对象包含所有命名组的键值对。

例如：'2023-04'.replace(/(?\d{4})-(?\d{2})/, (_, _, __, ___, str, {y, m}) => `${m}/${y}`)，得到的结果是 "04/2023"。请记住：命名组的内容只存在于 groups 对象中，不会额外塞到前面的位置参数列表里，这一点务必牢记。

全局标志 g 对回调执行次数的影响

这是最容易出错的环节。如果你在正则后面加了 g 标志，那么每次匹配成功，回调函数都会执行一次。反之，如果没有 g，即使正则能够匹配多次，它也只在第一次匹配时调用一次回调：

• 'x1 y2 z3'.replace(/(\d)/g, (_, d) => `N${d}`) → 结果是 "xN1 yN2 zN3"（三个数字全部替换）。
• 'x1 y2 z3'.replace(/(\d)/, (_, d) => `N${d}`) → 结果是 "xN1 y2 z3"（只替换第一个数字）。
• 很多开发者遇到“怎么没反应？”时，其实并非回调写错，而是忘了加 g，这个坑我亲身踩过不止一次。

replace 回调函数常见陷阱及解决方案

在实际编码中，有几个高频翻车点值得单独强调：

• 回调没有 return： 如果函数缺少返回值，替换结果会变成 undefined，相当于把匹配到的内容整个删掉了。常见于误写了 console.log 或忘记写 return。
• 正则中特殊字符未转义： 比如你想匹配一个点号 . 或美元符号 $，但未加反斜杠转义，则正则根本匹配不上，回调自然不会被触发。
• 函数模式下仍使用 $1： 记住，在回调函数模式下，$1 这类占位符是无效的，必须通过函数参数来获取捕获组的值，别再犯低级错误。
• 换行符与标志： 如果你的字符串包含换行，而正则未加 m 或 s 标志，那么 ^、$ 或 . 的行为可能会与预期不符。

最后，书写回调之前，先确认正则能否匹配到目标文本，再检查参数数量和顺序，基本上就不会卡在“为什么没反应”这类问题上。掌握这几个要点，下次编写正则替换时就会像呼吸一样自然。