JS怎么实现全局字符串替换：正则/g与replaceAll对比

在 JavaScript 开发中，许多初学者调用 str.replace("a", "b") 时常会发现：代码只替换了字符串中第一个匹配到的目标字符，后续相同的内容完全没有变化。这是因为 JavaScript 早期的 String.prototype.replace() 在传入字符串字面量参数时，规范明确约定其只执行单次匹配替换。

要实现全文本范围的“全局替换”，开发者目前主要有两种可靠途径：使用带有全局修饰符的正则表达式 replace(/pattern/g, replacement)，或者使用 ECMAScript 2021 (ES12) 引入的标准化方法 replaceAll(substr, replacement)。这两种方法各有其适用边界与运行陷阱，本文将从机制、语法、动态输入安全性及环境兼容性等维度展开系统解析。

一、为什么 replace 默认不是全局替换

理解问题首先要从 String.prototype.replace() 的设计定义切入。当向其第一个参数传入普通字符串时，JavaScript 引擎会将其视为“单次检索条件”，找到第一个匹配子串后便立即终止搜索并返回拼接后的新字符串：

const source = "apple, banana, apple, orange";
const result = source.replace("apple", "pear");

// 示例输出：
// result -> "pear, banana, apple, orange"
// 注意：第二个 "apple" 仍然保留原样

为了完成整篇文本的替换，历史方案一直依赖正则表达式引擎的 g（global）标志，直到现代标准补齐了专用的 replaceAll 方法。

二、方案一：使用正则表达式的 /g 修饰符

在 ES2021 之前，正则表达式配合 g 标志是 JavaScript 官方提供的标准全局替换方案。其基本语法为：

const str = "2026-11-01, 2026-11-02";
const newStr = str.replace(/-/g, "/");

// 示例输出：
// newStr -> "2026/11/01, 2026/11/02"

静态模式与动态模式

当替换的目标模式在编写代码时是固定已知的内容时，直接使用字面量正则（如 /foo/g）语法最为紧凑高效。然而在业务开发中，待替换的目标往往来自于用户输入、URL 参数或后台配置，属于动态字符串。

对于动态变量，必须通过 new RegExp(pattern, "g") 构造函数创建正则实例：

const keyword = "target";
const reg = new RegExp(keyword, "g");
const result = text.replace(reg, "replaced");

核心陷阱：动态正则特殊字符转义

动态构造 RegExp 存在一个极易导致线上 Bug 的安全缺陷：如果动态变量包含正则表达式保留字（例如 . * + ? ^ $ { } ( ) | [ ] \），传入构造函数后会被解析为元字符，导致匹配逻辑完全偏离预期甚至直接抛出语法错误 SyntaxError: Invalid regular expression。

为了解决上述问题，使用正则方案时通常需要封装辅助转义函数：

// 正则特殊字符安全转义函数
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

// 安全执行动态全局替换
function safeGlobalReplace(fullText, keyword, replacement) {
  const escaped = escapeRegExp(keyword);
  return fullText.replace(new RegExp(escaped, "g"), replacement);
}

三、方案二：ES2021 原生 String.prototype.replaceAll

针对“普通纯文本全量替换却不得不写正则”的痛点，ECMAScript 2021 正式引入了 String.prototype.replaceAll()。当第一个参数是普通字符串时，它会把该字符串作为纯文本执行全量扫描替换，而不需要开发者关心任何元字符转义：

const priceDoc = "Items: $10.00, $10.00 and $20.00";
// 无需转义 '$' 或 '.'，直接原样作为纯文本替换
const updated = priceDoc.replaceAll("$10.00", "$15.00");

// 示例输出：
// updated -> "Items: $15.00, $15.00 and $20.00"

关键约束：向 replaceAll 传入正则必须携带 /g

replaceAll 同样接受正则表达式作为第一个参数。但规范设定了一项强约束：如果第一个参数是正则对象，它必须包含 g 标志。如果不传 g，JavaScript 引擎会立即抛出 TypeError。

当无意识地写出以下代码时，程序将在运行时崩溃：

const text = "hello 2025 and 2026";

// 错误示范：传入未声明 /g 的正则表达式
try {
  text.replaceAll(/\d+/, "****");
} catch (err) {
  // 示例输出：
  // TypeError: String.prototype.replaceAll called with a non-global RegExp
}

// 正确做法：必须附加 g 修饰符
const valid = text.replaceAll(/\d+/g, "****");
// valid -> "hello **** and ****"

四、核心特性与细节差异对比

1. 替换值中的特殊替换模式（Replacement Patterns）

无论是 replace 还是 replaceAll，当第二个参数传入包含 $ 符号的字符串时，JavaScript 都会将其解析为特殊的占位替换语法：

• $$：插入一个纯文本美元符号 $。
• $&：插入本次匹配到的完整子串。
• $`：插入匹配子串左侧的全部文本。
• $'：插入匹配子串右侧的全部文本。
• $n：插入第 n 个捕获组（仅当第一个参数为正则时生效）。

这意味着如果替换目标内容恰好包含未处理的 $ 字符（例如向文本中替换入用户填写的金额 "$100"），可能会触发非预期的占位替换行为：

const str = "Price: original";
// $& 会被解析为匹配项 "original"
const out = str.replaceAll("original", "$$100 ($&)");

// 示例输出：
// out -> "Price: $100 (original)"

如果希望完全避免 $ 符号被误解，最稳妥的方法是将第二个参数写成返回字符串的替换函数：str.replaceAll("target", () => userValue)。

2. 回调函数支持

两者完全一致地支持以回调函数（Replacer Function）作为第二个参数。回调函数会在每个匹配项命中时被调用，返回值作为新文本：

const template = "2026-05-18";
const formatted = template.replaceAll(/-/g, (match, offset) => {
  return offset === 4 ? "年" : "月";
}) + "日";

// 示例输出：
// formatted -> "2026年05月18日"

3. 运行环境与兼容性

replace(/pattern/g) 作为 JavaScript 极早期的基础 API，在所有已知环境（包括已淘汰的 IE 浏览器）中均能稳定执行。

replaceAll 是 ES2021 的一部分，支持情况如下：

• Chrome 85+（2020 年 8 月发布）
• Firefox 77+（2020 年 6 月发布）
• Safari 13.1+（2020 年 3 月发布）
• Node.js 15.0.0+（2020 年 10 月发布）

如果项目需要支持旧版安卓 WebView、遗留客户端运行环境或 Node.js 14 及更早版本，使用 replaceAll 必须引入 core-js 垫片或通过 Babel 编译转译。

五、综合对比与选型建议

为了帮助读者根据实际项目场景快速做出准确技术选型，两者的核心指标对比如下表所示：

特性维度	replace(/pattern/g, newStr)	replaceAll(substr, newSubstr)
核心设计定位	基于正则表达式引擎的模式搜索与替换	针对纯字符串（或正则）语义化的全量替换 API
纯文本动态替换	较繁琐。若包含 .?*^$ 等元字符必须手动转义	极其安全且直观。字面量参数按纯文本精确匹配
正则传参限制	无约束（不带 g 时只替换第一个，带 g 替换全部）	强制约束：传入正则时若无 g 会抛出 TypeError
复杂模式匹配	完全支持（分支选择、字符集、零宽断言等）	支持（本质也是转发给带 g 的正则引擎处理）
替换占位语法	支持 $$、$&、$`、$'、$n	支持 $$、$&、$`、$'（仅正则入参支持 $n）
环境支持	ECMAScript 3（全版本通用，兼容所有设备）	ECMAScript 2021（现代浏览器 & Node.js 15+）

选型实践准则

1. 对于现代前端与后端开发（Target 为 ES2021+）：如果是替换用户输入、URL 片段、固定关键字等纯文本子串，毫不犹豫首选 replaceAll(str, newStr)。它消除了正则元字符转义的心智负担，代码意图表达更加直观清晰。
2. 对于动态匹配与模式提取：当需要大小写不敏感（i 标志）、匹配多行（m 标志）或者根据特定正则规则（如提取数字 \d+）进行批量处理时，使用 replace(/pattern/g, replacement)。
3. 对于兼容遗留客户端的项目：如果项目配置的目标构建环境未集成 polyfill 且需运行在低版本浏览器中，请使用 replace 并配合封装好的 escapeRegExp 工具函数，以确保代码的通用性与安全性。