【JavaScript】详解JavaScript中的replace()函数
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”)` |
| 只替换第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. 千分位加逗号（最常见面试题）functionformatNumber(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% 需求
// 万能替换函数（建议封装）functionreplaceAll(str, search, replacement){return str.replace(newRegExp(search,'g'), replacement);}// 或者更安全（防止正则特殊字符报错）functionreplaceAll(str, search, replacement){return str.split(search).join(replacement);}现在你已经完全掌握 JavaScript replace() 了！
这篇文章涵盖了从入门到高级的所有用法，直接收藏，面试、写业务再也不怕！
需要我给你出一个「replace() 练习题 20 道」或者「手写千分位、手机号脱敏、模板引擎」完整代码吗？随时说！
