JavaScript 正则如何替换

在日常网页开发中，我们常常会遇到需要“批量修改文本”的场景：比如把用户输入里的手机号中间四位换成星号，或者把页面里所有的“旧品牌名”改成“新品牌名”。如果用手动查找替换，不仅效率低，还容易漏改，这时候JavaScript正则表达式的“替换功能”就能派上大用场——它就像一个高效的文本“批量修改工具”，能精准定位目标内容并一键替换。

先搞懂最基础的替换方法

JavaScript里处理文本替换的核心方法是replace()，它可以直接作用在字符串上，语法也很简单：字符串.replace(要替换的内容, 替换后的内容)。

不过这里有个小细节：如果直接写普通文字当“要替换的内容”，replace()只会改第一个匹配的内容。比如你有个句子“今天吃苹果，苹果很甜”，用replace('苹果', '香蕉')的话，结果只会变成“今天吃香蕉，苹果很甜”，后面的“苹果”没被改。

要是想改所有匹配的内容，就得用正则表达式了——这也是正则替换最常用的场景之一。

用正则替换：解决“批量改”和“精准改”

正则的核心是用“规则”找内容，而不是具体文字，这就让它能应对更复杂的场景。比如刚才的“所有苹果”例子，用正则的话，只要加个g（全局匹配）标记，就能改全部：replace(/苹果/g, '香蕉')，结果就会变成“今天吃香蕉，香蕉很甜”。

再举个生活化的例子：我们想把用户输入的手机号（11位，比如13812345678）中间四位换成星号。如果直接找“13812345678”替换，只能改特定号码，但用正则的话，就能匹配所有符合手机号格式的号码：

`javascript

const phone = '13812345678';

// 正则里的\d代表任意数字，{3}代表连续3个，{4}代表连续4个

const hiddenPhone = phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2');

console.log(hiddenPhone); // 输出：138****5678

`

这里的$1和$2是正则里的“分组引用”：我们把手机号前3位和后4位分别用小括号包起来（形成两个分组），替换的时候保留这两个部分，中间插星号，就实现了“隐藏中间四位”的效果。

避开替换的常见坑

用正则替换时，有两个容易踩的小坑要注意：

第一个是“大小写”问题。如果要替换的内容不区分大小写，比如把所有“apple”“Apple”“APPLE”都改成“香蕉”，可以给正则加i（忽略大小写）标记：replace(/apple/gi, '香蕉')，这样不管大小写都会被替换。

第二个是“特殊字符”的问题。如果要替换的内容里有正则的特殊符号（比如.、*、?），直接写在正则里会被当成规则，比如要替换“2.5”里的点，直接写replace(/2.5/g, '2-5')会把“2a5”也当成目标，因为.在正则里代表任意字符。这时候得给特殊符号加转义符\，改成replace(/2\.5/g, '2-5')，才能精准匹配“2.5”。

总结一下

JavaScript正则替换的核心是“用规则定位目标，用方法实现批量修改”：先通过replace()方法调用替换功能，再用正则的标记（g全局、i忽略大小写）和分组（()）来满足不同的替换需求。不管是隐藏手机号、批量改文字，还是处理更复杂的文本修改，只要掌握这些基础用法，就能轻松应对日常开发里的文本替换需求，不用再手动一个个修改啦。