如何用JavaScript替换匹配的文本？replace与replaceAll方法详解

一、replace 方法的基本匹配规则与替换行为

在 JavaScript 字符串处理中，replace 是最基础也最常被使用的替换方法。它的调用对象是字符串本身，接收两个参数：第一个参数用于描述要被替换的内容，第二个参数用于给出替换后的结果。很多初学者第一次接触这个方法时，容易误以为只要传入一个字符串，所有相同内容都会被替换。实际上，当第一个参数是普通字符串时，replace 只会替换第一个匹配项。

这种设计使 replace 非常适合处理“首次出现”的场景，例如把文本中的第一个占位符换成真实内容，或者修正首个错误关键词。如果需要替换全部匹配内容，就需要借助正则表达式，并为其添加全局匹配修饰符。这样一来，同一个方法既可以做局部替换，也可以做全局替换，灵活性很高。

let text = '今天天气很好，今天适合出门散步';

// 普通字符串作为匹配内容时，只替换第一个匹配项
let firstOnly = text.replace('今天', '明日');
console.log(firstOnly);

// 正则表达式添加 g 修饰符后，可以替换所有匹配项
let globalResult = text.replace(/今天/g, '明日');
console.log(globalResult);

从执行结果可以看出，第一种写法只改变了句首的关键词，第二个相同关键词仍然保留；第二种写法则把所有匹配项都替换掉。因此，在使用 replace 时，首先要明确自己想要替换的是“第一个”还是“所有”。如果业务需求是全局替换，却只传了普通字符串，就会留下未被处理的内容，这在敏感词过滤、模板变量替换、日志清洗等场景中都可能造成问题。

另外需要强调的是，replace 不会修改原始字符串，而是返回一个新的字符串。这一点在数据处理中非常重要。原始字符串保持不变，意味着我们可以安全地基于原文本生成多个不同版本，例如生成预览文本、清洗后的展示文本、用于提交的规范文本等，而不必担心原始输入被破坏。

二、replaceAll 方法的全局替换语义与使用限制

随着 JavaScript 语言能力的不断增强，字符串处理也变得更加直观。对于“替换所有匹配内容”这一高频需求，较新的规范提供了 replaceAll 方法。它与 replace 的用法非常相似，但语义更加明确：当第一个参数是普通字符串时，它会替换所有匹配到的内容，而不是只替换第一个。

这让代码在阅读时更容易表达意图。比如我们要把一段文本中的某个词统一替换成另一个词，如果继续使用 replace，往往需要写正则表达式；而使用 replaceAll，可以直接传入字符串，减少心智负担，也让代码更接近自然语言描述。

let text = '苹果是水果，香蕉是水果，橙子也是水果';

// 使用普通字符串时，replaceAll 会替换所有匹配内容
let result = text.replaceAll('水果', '鲜果');
console.log(result);

// 使用正则表达式时，必须添加 g 修饰符
let regResult = text.replaceAll(/水果/g, '鲜果');
console.log(regResult);

不过，replaceAll 并不是简单地把 replace 换个名字。它有一个非常重要的限制：如果第一个参数传入的是正则表达式，那么这个正则表达式必须带有全局匹配修饰符 g，否则会抛出错误。这一点与 replace 不同，因为 replace 即使传入不带 g 的正则，也只会按规则替换第一个匹配项，而不会直接报错。

之所以这样设计，是因为 replaceAll 的方法名已经明确表达了“替换所有”的含义。如果传入的正则不是全局匹配，就会与方法语义产生冲突。为了避免这种不一致，语言规范选择直接抛出错误，从而帮助开发者尽早发现潜在问题。

let text = '测试文本';

// 如果写成 text.replaceAll(/测试/, '演示')，会因为没有 g 修饰符而报错
let correctResult = text.replaceAll(/测试/g, '演示');
console.log(correctResult);

因此，在使用 replaceAll 时，要特别注意参数类型。如果匹配目标是固定字符串，直接传字符串即可；如果匹配目标包含模式变化，比如数字、空白字符、邮箱格式等，就需要使用正则表达式，并且务必确认正则带有 g 修饰符。这样既能保证代码正确运行，也能让替换逻辑符合预期。

三、使用函数作为替换值实现动态替换

除了传入固定字符串，replace 和 replaceAll 的第二个参数还可以是一个函数。当替换逻辑不是简单的一对一映射，而是需要根据匹配内容动态生成结果时，函数形式非常有用。例如，我们可以根据匹配到的数字生成不同格式，也可以根据上下文决定替换成什么内容。

在这种写法中，函数会接收匹配到的内容作为参数，并返回最终用于替换的字符串。这样一来，替换过程不再是机械替换，而是具备了加工能力。对于文本格式化、内容清洗、模板渲染等任务，这种动态替换能力非常实用。

let str = '我买了3个苹果，2个香蕉，花了15元';

// 通过函数动态生成替换结果，把每个数字包裹在中括号里
let wrapped = str.replace(/d+/g, function(match) {
    return '[' + match + ']';
});
console.log(wrapped);

上面的例子中，所有连续数字都被匹配出来，然后通过函数重新拼接成带中括号的形式。原始文本并没有被直接修改，而是生成了新的字符串。这种模式特别适合做“先识别，再加工”的任务，比如把文本中的编号高亮、把金额统一格式化、把关键词替换成带标记的版本等。

需要注意的是，函数替换虽然灵活，但也会带来更高的阅读成本。如果替换逻辑非常简单，直接传字符串通常更清晰；只有当替换结果依赖匹配内容、位置或其他条件时，才建议使用函数。合理选择写法，可以让代码既保持简洁，又不失表达能力。

四、实际场景中的方案选择与敏感词过滤示例

在实际项目中，选择 replace 还是 replaceAll，通常取决于两个因素：一是替换需求本身，二是运行环境的兼容要求。如果只是替换第一个匹配项，replace 完全足够；如果需要替换所有普通字符串匹配项，并且运行环境支持较新的字符串方法，replaceAll 会更直观。

如果项目需要兼容较旧的浏览器环境，使用 replace 配合带 g 修饰符的正则表达式依然是稳妥方案。这样既能实现全局替换，又能避免新特性不可用带来的问题。对于需要长期维护的业务代码，兼容性往往是不可忽视的一环。

以一个常见的敏感词过滤场景为例，我们需要把用户输入中的指定词语统一替换为掩码。若敏感词数量较少，可以直接遍历敏感词列表，对每个词调用 replaceAll。这种写法逻辑清楚，容易维护。

function filterSensitiveWords(inputText) {
    const sensitiveWords = ['广告', '推销'];
    let result = inputText;

    sensitiveWords.forEach(function(word) {
        result = result.replaceAll(word, '**');
    });

    return result;
}

let userInput = '这个是广告内容，不要相信推销信息，还有另一个广告';
let filteredText = filterSensitiveWords(userInput);
console.log(filteredText);

如果敏感词列表较长，逐个调用 replaceAll 会带来多次遍历文本的开销。此时可以把多个敏感词组合成一个正则表达式，通过一次匹配完成替换。对于性能敏感的场景，这种方式通常更高效。

function filterSensitiveWordsByRegExp(inputText) {
    const sensitiveWords = ['广告', '推销'];
    const pattern = sensitiveWords.join('|');
    const reg = new RegExp(pattern, 'g');

    return inputText.replace(reg, '**');
}

let userInput = '这个是广告内容，不要相信推销信息，还有另一个广告';
let filteredText = filterSensitiveWordsByRegExp(userInput);
console.log(filteredText);

通过上面的对比可以看出，JavaScript 的文本替换并不是单一技巧，而是一组围绕匹配、替换和动态生成展开的能力集合。理解 replace 的默认局部替换行为，掌握 replaceAll 的全局语义与正则限制，再结合函数替换和正则表达式，就能在大多数字符串处理任务中做出清晰、稳定且易于维护的实现。

JavaScript字符串替换replace方法replaceAll方法正则匹配敏感词过滤修改时间：2026-05-22 14:08:54