js replace 的基本行为
String.prototype.replace 接收两个参数:匹配模式(字符串或正则)和替换内容,返回一个新字符串,不改变原值。
const str = ‘hello world’;
str.replace(‘world’, ‘js’); // ‘hello js’
关键点:传入字符串时只替换第一个匹配项。想全部替换,必须用带 g 标志的正则。
‘aaa’.replace(‘a’, ‘b’); // ‘baa’
‘aaa’.replace(/a/g, ‘b’); // ‘bbb’
这是 js replace 最常见的坑,很多“替换不生效”的问题都出在这里。
特殊替换符
替换字符串里可用几个占位符:
$&:匹配到的整个子串$1到$9:正则捕获组$$:字面量$- `
$`和$’`:匹配位置之前、之后的文本
‘2024-06-01’.replace(/(\d+)-(\d+)-(\d+)/, ‘$3/$2/$1’);
// ’01/06/2024′
用捕获组做格式转换,比多次 split 再拼接更简洁。
函数回调的强大之处
第二个参数可以是函数,参数依次为:匹配内容、各捕获组、匹配位置、原字符串。返回值即替换结果。
‘price: 10, tax: 2’.replace(/\d+/g, n => n * 2);
// ‘price: 20, tax: 4’
回调里能做计算、查表、条件判断,这是 js replace 最灵活的部分。比如把下划线命名转驼峰:
‘username’.replace(/(\w)/g, (_, c) => c.toUpperCase());
// ‘userName’
几个实用场景
转义 HTML:用回调映射字符到实体,避免逐个 replace 链式调用。
模板填充:用 /\{\{(\w+)\}\}/g 配合回调,从对象取值替换。
安全提醒:替换内容若来自用户输入,注意 $ 符号会被当作特殊符解析,必要时用函数返回字面量。
小结
js replace 的核心记忆点有三个:字符串模式只换首个、正则加 g 才全局、函数回调提供最大灵活性。掌握这三点,绝大多数文本替换需求都能用一行代码解决。