如何用JavaScript替换匹配的文本

在前端开发中，经常需要处理字符串的替换操作，比如替换用户输入中的敏感词、格式化文本中的特定内容等。JavaScript提供了多种实现文本替换的方式，其中最常用的是字符串的replace方法和replaceAll方法，下面我们逐一介绍它们的用法和适用场景。

一、使用replace方法替换匹配文本

replace是字符串的原生方法，它接收两个参数：第一个参数是要匹配的内容（可以是字符串或者正则表达式），第二个参数是替换后的内容（可以是字符串或者函数）。需要注意的是，当第一个参数是普通字符串时，replace只会替换第一个匹配到的内容，不会替换后续相同的内容。

下面的示例演示了使用普通字符串作为匹配参数时的替换效果：

// 定义原始文本
let text = "今天天气很好，今天适合出门散步";
// 使用普通字符串作为匹配参数，只替换第一个匹配到的"今天"
let result1 = text.replace("今天", "明日");
console.log(result1); // 输出：明日天气很好，今天适合出门散步

// 使用正则表达式并添加g修饰符，实现全局替换
let result2 = text.replace(/今天/g, "明日");
console.log(result2); // 输出：明日天气很好，明日适合出门散步

如果第二个参数是函数，还可以根据匹配到的内容动态生成替换结果，比如给匹配到的数字加上单位：

let str = "我买了3个苹果，2个香蕉，花了15元";
// 匹配所有数字，将数字替换为"数字+个"的格式
let newStr = str.replace(/\d+/g, function(match) {
    return match + "个";
});
console.log(newStr); // 输出：我买了3个个苹果，2个香蕉，花了15个元

二、使用replaceAll方法替换匹配文本

replaceAll是ES2021引入的新方法，它的用法和replace类似，但最大的区别是：当第一个参数是普通字符串时，它会替换所有匹配到的内容，不需要像replace那样使用正则表达式的g修饰符。

下面是replaceAll的基本使用示例：

let text = "苹果是水果，香蕉是水果，橙子也是水果";
// 使用普通字符串作为匹配参数，替换所有"水果"
let result = text.replaceAll("水果", "鲜果");
console.log(result); // 输出：苹果是鲜果，香蕉是鲜果，橙子也是鲜果

// 也支持正则表达式作为匹配参数，同样需要加g修饰符
let result2 = text.replaceAll(/水果/g, "鲜果");
console.log(result2); // 输出：苹果是鲜果，香蕉是鲜果，橙子也是鲜果

需要注意的是，如果replaceAll的第一个参数是正则表达式，那么必须带有g修饰符，否则会抛出错误，这和replace的使用规则不同。

let text = "测试文本";
// 下面这行代码会抛出错误，因为正则没有加g修饰符
// text.replaceAll(/测试/, "演示"); 

// 正确写法，添加g修饰符
let correctResult = text.replaceAll(/测试/g, "演示");
console.log(correctResult); // 输出：演示文本

三、两种方法的对比与选择

我们可以通过下面的表格直观对比两种方法的差异：

如果你的项目需要兼容旧版浏览器，优先选择replace方法配合正则表达式的g修饰符实现全局替换；如果只需要支持现代浏览器，且需要替换所有普通字符串匹配的内容，使用replaceAll会更简洁直观。

四、实际场景示例

下面通过一个实际场景演示文本替换的使用：假设我们需要过滤用户输入内容中的敏感词，将所有"广告"替换为"**"。

function filterSensitiveWords(inputText) {
    // 敏感词列表
    const sensitiveWords = ["广告", "推销"];
    let result = inputText;
    // 遍历敏感词列表，逐个替换
    sensitiveWords.forEach(word => {
        // 使用replaceAll替换所有匹配的敏感词
        result = result.replaceAll(word, "**");
    });
    return result;
}

// 测试输入内容
let userInput = "这个是广告内容，不要相信推销信息，还有另一个广告";
let filteredText = filterSensitiveWords(userInput);
console.log(filteredText); // 输出：这个是**内容，不要相信**信息，还有另一个**

上面的示例中，如果敏感词列表较长，也可以把敏感词拼接成正则表达式来实现一次性替换，效率会更高：

function filterSensitiveWordsV2(inputText) {
    const sensitiveWords = ["广告", "推销"];
    // 拼接正则表达式，匹配所有敏感词
    const reg = new RegExp(sensitiveWords.join("|"), "g");
    return inputText.replace(reg, "**");
}

let userInput = "这个是广告内容，不要相信推销信息，还有另一个广告";
let filteredText = filterSensitiveWordsV2(userInput);
console.log(filteredText); // 输出：这个是**内容，不要相信**信息，还有另一个**

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