JavaScript replace() 函数详解：从基础替换到回调函数的深度应用

Chloe

发布时间：2026-10-16| 4人浏览过

原创

本文深入解析 JavaScript 中的 replace() 方法，涵盖基础字符串替换、全局正则匹配以及基于回调函数的高级动态替换技术。

方法核心机制

replace() 是 JavaScript 字符串处理中最常用的方法之一。它的签名通常表示为：replace([RegExp|String],[String|Function])。

该方法的核心特性在于它不会修改原始字符串，而是返回一个经过处理后的新字符串。它接收两个参数：

第一个参数：可以是普通的 String（仅替换首次出现），也可以是 RegExp（支持全局和分组匹配）。
第二个参数：可以是替换用的 String，也可以是一个用于动态计算替换内容的 Function。

基础字符串替换模式

第1步：执行单次字符串替换

当第一个参数为纯字符串时，replace() 只能定位并替换源字符串中第一次出现的该子串。若需多次调用才能完成全部替换，这种方式效率较低且易遗漏。

let str = '我爱背景天安门';
// 将首次出现的“背景”替换为“北京”
str = str.replace('背景', '北京');
console.log(str); // 输出：我爱北京天安门

如果在源字符串中存在多个目标词，如下例所示：

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace('背景', '北京');
console.log(str);
// 输出：我爱北京天安门，但是背景雾霾太严重

可以看到，虽然有两个“背景”，但只有第一个被成功替换。这种“硬编码”式的替换方式在处理长文本时存在明显局限。

第2步：利用正则全局标志实现批量替换

要一次性替换所有匹配项，必须引入正则表达式，并在末尾添加全局修饰符 g。g 代表 Global（全局），指示引擎扫描整个字符串以查找所有匹配项。

let str = '我爱背景天安门，但是背景雾霾太严重';
// 使用 /pattern/g 语法创建带有全局标志的正则
str = str.replace(/背景/g, '北京');
console.log(str);
// 输出：我爱北京天安门，但是北京雾霾太严重

这一步解决了批量替换的需求，但在需要针对匹配内容执行逻辑运算（如金额转换、敏感词过滤变形）时，简单的字符串替换已无法满足。

高级回调函数替换模式

当第二个参数传入一个函数时，replace() 的能力得到极大扩展。每当正则表达式找到一个匹配项，都会触发该回调函数，并将返回值作为替换内容插入源字符串。其底层逻辑等同于对字符串进行逐次 match() 匹配并逐个替换。

第3步：无分组正则下的回调逻辑

首先看一个不使用正则分组的示例，重点观察传递给回调函数的默认参数结构。

let str = '我爱背景天安门，但是背景雾霾太严重';
str = str.replace(/背景/, function(match) {
    console.log(arguments); // 打印参数对象
    return '北京';
});
console.log(str);

关键说明：

由于未使用全局标志 g，循环仅执行一次，回调函数被调用一次。
回调函数内部接收的 arguments 数组结构如下：

arguments[0]：当前匹配的完整子字符串（即“背景”）。
arguments[1]：该子字符串在原文中的起始索引位置。
arguments[2]：原始源字符串本身。

若加上 /g 标志，回调函数将按顺序被调用多次（本例中两次）。第二个“背景”被匹配时，其索引位置为 10，此时参数也会相应更新，确保逻辑始终基于上下文。

实战案例：敏感信息掩码处理

假设需要对文本中 100 元以下的捐款金额进行隐私脱敏，将其替换为星号。这可以利用回调函数的动态返回值来实现：

var txt = '刘菲:50元。张常成:150元。孙玉杰:200元。李明轩:20元。李子豪:1500元。';
txt = txt.replace(/\d+/g, function(match) {
    // arguments[0] 即为当前匹配到的数字字符串
    return match.length > 2 ? match : '**';
});
console.log(txt);

在此例中，正则 /\d+/g 匹配了所有连续数字。回调函数判断数字字符长度，若小于 3 位（即小于 100），则返回 **；否则保留原样。

第4步：正则分组捕获的高级应用

对于复杂的数据清洗任务，配合括号 () 使用分组（Capturing Groups）可以精确提取局部数据，这在参数传递上发生了显著变化。以下示例演示如何将“X万”单位的金额自动转换为“XX0000元”格式：

var txt = '刘菲:5万。张常成:5000元。孙玉杰:2000元。李明轩:20万。李子豪:8500元。';
txt = txt.replace(/(\d+)(万)/g, function(match, group1, group2) {
    console.log(arguments);
    // arguments[1] 对应第一组捕获 (\\d+)
    // arguments[2] 对应第二组捕获 (万)
    return group1 + '0000' + '元';
});
console.log(txt);