如何在 JavaScript 中动态替换字符串中的所有匹配项

聖光之護 2026-01-23 00:00:00 次阅读

本文

讲解如何使用 `replaceall()` 方法结合动态生成的正则表达式，安全、高效地将字符串中所有指定子串（如变量值）替换为新内容，避免字面量写法导致的匹配失败。

在 JavaScript 中，若想全局替换字符串中所有出现的子串（例如将 "ain" 替换为 "___"），最直接的方式是调用 String.prototype.replaceAll()。但需特别注意：不能直接在正则字面量中插入变量（如 /text2/g），因为这会被当作字面字符串 "text2" 匹配，而非变量 text2 的值 "ain"。

正确做法是使用 RegExp 构造函数动态创建正则表达式对象：

const text2 = 'ain';
const text = "The rain in SPAIN stays mainly in the plain";

// ✅ 正确：将变量 text2 的值作为模式构建 RegExp
const regex = new RegExp(text2, 'g'); // 等价于 /ain/g
const result = text.replaceAll(regex, '___');

console.log(result);
// 输出：The r___ in SP___ stays m___ly in the pl___

⚠️ 注意事项：

若 text2 可能包含正则特殊字符（如 .、*、+、?、[、^ 等），需先转义，否则会导致语法错误或意外匹配。可使用如下辅助函数安全转义：
```
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
const safeRegex = new RegExp(escapeRegExp(text2), 'g');
```
replaceAll() 在现代浏览器（Chrome 85+、Firefox 77+、Safari 13.1+）及 Node.js 15.0+ 中原生支持；旧环境可降级使用 split().join()（仅适用于纯字符串替换，不支持正则）或 replace() 配合全局正则循环。
若只需替换首次匹配，可用 replace()（不带 g 标志）；但 replaceAll() 更语义清晰且无需手动处理全局标志。

总结：动态替换的核心在于「用 new RegExp(pattern, flags) 构造正则对象」，而非硬编码 /.../ 字面量。配合转义处理与环境兼容性判断，即可稳健实现任意子串的全量替换。