JavaScript 中 replace() 函数最全详解（2025 最新版）

你绝对能在这篇文章里找到所有你想知道的 replace() 用法，包括新手常见坑和高级玩家技巧！

一、基本语法（两种重载）

string.replace(searchValue, replaceValue)
// 或
string.replace(searchValue, function)

参数类型	含义	返回值
字符串	普通字符串替换，只替换第一次出现	新字符串
正则表达式	支持全局 g、忽略大小写 i 等修饰符	按规则替换后的新字符串
函数	超级强大！可以动态计算每一个替换结果	新字符串

注意：replace() 不会修改原字符串（字符串是不可变的），永远返回新字符串！

二、常见用法速查表（直接抄作业）

需求	写法	结果示例
替换第一次出现	"aaabbb".replace("a", "X")	“Xaabbb”
替换所有出现（重点！）	"aaabbb".replace(/a/g, "X")	“XXXbbb”
不区分大小写全局替换	"AbcABCabc".replace(/aBc/i, "X") → 只会换第一个 /abc/gi	“XABCX”
替换多个不同内容	.replace(/cat|dog/g, "pet")	把 cat 和 dog 都换成 pet
只替换第2次出现	"aaa".replace(/a/g, (m, i) => i === 1 ? "X" : m)	“aXa”
替换并保留原匹配内容（加前后缀）	"hello".replace(/hello/g, '[HELLO]')	“[HELLO]”
替换成大写	"hello world".replace(/\b\w/g, c => c.toUpperCase())	“Hello World”（首字母大写）

三、最强大用法：替换函数（必背！）

str.replace(regexp|substr, function(match, p1, p2, ..., offset, string) {
  // match  ：完整匹配的内容
  // p1,p2… ：第1、2…个捕获组
  // offset ：匹配项在原字符串中的起始位置
  // string ：原字符串
  return '要替换成的内容';
})

经典实战案例

// 1. 手机号中间4位变星号
"13812345678".replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
// → "138****5678"

// 2. 更灵活写法（推荐）
"13812345678".replace(/(\d{3})\d{4}(\d{4})/, (match, p1, p2) => `${p1}****${p2}`)
// → "138****5678"

// 3. 千分位加逗号（最常见面试题）
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
formatNumber(1234567890) → "1,234,567,890"

// 4. 模板字符串替换（类似 Vue {{}}）
let data = { name: "张三", age: 18 };
let tpl = "你好，{{name}}，今年{{age}}岁";
let result = tpl.replace(/\{\{(\w+)\}\}/g, (match, key) => data[key] || '');
// → "你好，张三，今年18岁"

// 5. 驼峰转中划线（css类名转换）
"borderColor".replace(/([A-Z])/g, '-$1').toLowerCase()
// → "border-color"

// 6. 替换时知道是第几次匹配
let count = 0;
"aaaa".replace(/a/g, () => `X${++count}`)
// → "X1X2X3X4"

四、超实用正则旗标表

旗标	含义	示例
g	global，全局匹配	/a/g 替换所有 a
i	ignoreCase，忽略大小写	/abc/i 能匹配 AbC
m	multiline，多行模式	^ 和 $ 可以匹配每一行开头结尾
s	dotAll，. 可匹配换行符	/./s
u	unicode，支持 Unicode	/\u{1F600}/u 匹配emoji
y	sticky，粘性匹配	很少用

五、常见坑 & 注意事项

场景	错误写法	正确写法
想替换所有但忘了加 g	"aaa".replace(/a/, 'b')	"aaa".replace(/a/g, 'b')
用字符串替换所有	"aaa".replace('a', 'b')	只会换第一个！必须用正则 + g
特殊字符 $ 要转义	.replace(/$/g, 'dollar')	.replace(/\$/g, 'dollar')
$1 $2 捕获组在替换字符串中使用	.replace(/(\d)/, $1 + 1)	必须用函数，不能直接写 $1 + 1

六、一行代码解决 99% 需求

// 万能替换函数（建议封装）
function replaceAll(str, search, replacement) {
  return str.replace(new RegExp(search, 'g'), replacement);
}
// 或者更安全（防止正则特殊字符报错）
function replaceAll(str, search, replacement) {
  return str.split(search).join(replacement);
}

现在你已经完全掌握 JavaScript replace() 了！
这篇文章涵盖了从入门到高级的所有用法，直接收藏，面试、写业务再也不怕！

需要我给你出一个「replace() 练习题 20 道」或者「手写千分位、手机号脱敏、模板引擎」完整代码吗？随时说！