JavaScript中replace方法实现字符串替换的全面解析

JavaScript中的字符串处理是前端开发中非常常见的操作，而字符串替换则是数据清洗、文本处理、表单验证等场景中不可缺少的一部分。replace()方法作为JavaScript原生字符串对象提供的重要方法，可以帮助开发者快速完成指定内容的查找和替换。

无论是简单替换固定字符，还是结合正则表达式实现复杂匹配，replace()都提供了灵活、高效的解决方案。掌握它的使用方式，可以显著提升字符串处理能力。

JavaScript replace方法基本介绍

replace()是JavaScript String对象中的一个方法，用于在字符串中查找指定内容，并将匹配到的部分替换成新的字符串。

基本语法如下：

string.replace(searchValue, replaceValue)

其中：

• searchValue：需要查找的内容，可以是字符串，也可以是正则表达式。

• replaceValue：用于替换的新内容，可以是字符串，也可以是一个返回字符串的函数。

replace()方法不会修改原字符串，而是返回一个新的字符串。这是因为JavaScript中的字符串属于不可变数据类型。

例如：

let text = "Hello JavaScript";

let result = text.replace("JavaScript", "World");

console.log(result);

输出：

Hello World

原始变量text仍然保持不变：

console.log(text);

输出：

Hello JavaScript

replace方法替换普通字符串

最简单的应用方式是直接传入需要查找的字符串。

例如：

let str = "苹果 香蕉 苹果";

let newStr = str.replace("苹果", "橙子");

console.log(newStr);

结果：

橙子 香蕉 苹果

需要注意的是，使用普通字符串作为搜索条件时，replace()默认只替换第一次出现的内容。

如果字符串中存在多个相同字符，后面的内容不会自动替换。

例如：

let message = "cat dog cat";

console.log(message.replace("cat", "bird"));

输出：

bird dog cat

如果需要替换所有匹配内容，需要结合正则表达式。

使用正则表达式实现批量替换

正则表达式是replace()中非常重要的功能，它可以实现更加灵活的字符串匹配。

例如，替换字符串中的所有数字：

let str = "订单编号12345";

let result = str.replace(/d+/g, "*");

console.log(result);

输出：

订单编号*

这里：

• d+表示匹配一个或多个数字。

• g表示全局匹配，会替换所有符合条件的内容。

如果没有g标识：

let str = "123-456-789";

console.log(str.replace(/d+/, "0"));

输出：

0-456-789

只会替换第一个匹配项。

replace中的正则表达式常用标识

使用正则表达式时，可以通过不同标识控制匹配方式。

g标识：全局替换

默认情况下，正则表达式只匹配第一次出现的内容。

let str = "a b a b";

console.log(str.replace(/a/g, "x"));

结果：

x b x b

i标识：忽略大小写

默认匹配区分大小写：

let str = "JavaScript javascript";

console.log(str.replace(/javascript/i, "JS"));

结果：

JavaScript javascript

如果配合g：

console.log(str.replace(/javascript/gi, "JS"));

结果：

JS JS

m标识：多行匹配

主要用于处理包含换行符的文本。

例如：

let text = `hello
world`;

console.log(text.replace(/^world/m, "JavaScript"));

可以实现多行内容匹配。

replace使用函数进行动态替换

除了直接提供替换字符串，replace()还支持传入函数。

这种方式适用于替换内容需要动态计算的情况。

基本格式：

str.replace(searchValue, function(match){
    return newValue;
});

例如，将字符串中的数字全部乘以2：

let str = "价格10元，数量5个";

let result = str.replace(/d+/g, function(value){
    return value * 2;
});

console.log(result);

输出：

价格20元，数量10个

函数参数可以获取匹配内容，并根据业务逻辑返回不同结果。

常见参数包括：

• match：当前匹配到的字符串。

• offset：匹配内容在原字符串中的位置。

• string：完整原字符串。

• 捕获组内容：正则表达式中的分组结果。

例如：

let str = "2026-08-23";

let result = str.replace(/(d{4})-(d{2})-(d{2})/, function(match, year, month, day){
    return `${year}年${month}月${day}日`;
});

console.log(result);

输出：

2026年08月23日

replace与replaceAll的区别

随着JavaScript版本的发展，ES2021新增了replaceAll()方法，用于解决全局替换问题。

例如：

let str = "apple apple apple";

console.log(str.replaceAll("apple", "orange"));

输出：

orange orange orange

两者区别：

如果只是简单替换全部字符串，可以使用：

str.replaceAll("a", "b");

如果需要复杂匹配，replace()配合正则表达式更加灵活。

replace方法中的特殊替换字符

当替换参数是字符串时，JavaScript提供了一些特殊变量，可以引用匹配结果。

常见特殊字符：

$&

表示匹配到的内容。

例如：

let str = "hello";

console.log(str.replace("hello", "[$&]"));

输出：

[hello]

$`

表示匹配内容之前的字符串。

$'

表示匹配内容之后的字符串。

$1、$2

表示正则表达式中的捕获组。

例如：

let str = "John Smith";

let result = str.replace(/(w+) (w+)/, "$2 $1");

console.log(result);

输出：

Smith John

replace方法的实际应用场景

1. 手机号码脱敏

开发中经常需要隐藏敏感信息。

例如：

let phone = "13812345678";

let result = phone.replace(/(d{3})d{4}(d{4})/, "$1****$2");

console.log(result);

输出：

138****5678

2. 去除多余空格

处理用户输入内容时，可以清理连续空格。

let text = "hello    world";

let result = text.replace(/s+/g, " ");

console.log(result);

输出：

hello world

3. 格式化日期

将日期格式转换为中文形式：

let date = "2026-08-23";

let result = date.replace(/-/g, "/");

console.log(result);

输出：

2026/08/23

4. HTML特殊字符转义

网页开发中，为避免用户输入造成HTML解析问题，可以进行字符替换。

function escapeHTML(str){
    return str.replace(//g, ">");
}

replace方法使用注意事项

1. 字符串本身不会被修改

错误理解：

let str = "hello";

str.replace("hello", "hi");

console.log(str);

输出：

hello

正确方式：

str = str.replace("hello", "hi");

2. 注意正则表达式是否需要g标识

如果希望替换所有匹配项，需要添加：

/g

否则只处理第一个匹配结果。

3. 注意特殊字符转义

例如替换点号：

let str = "a.b.c";