js replace 用法全解:从字符串替换到函数回调

2026-11-15 0 7

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 才全局、函数回调提供最大灵活性。掌握这三点,绝大多数文本替换需求都能用一行代码解决。

看过这篇文章的人,推荐看以下内容

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

版权声明:所有的源码、软件和资料,不得使用于非法商业用途,不得违反国家法律,一切关于该资源商业行为与本站无关。

免费cms模板 建站百科 js replace 用法全解:从字符串替换到函数回调 https://www.mianfeicms.com/12531.html

我是签名

相关文章

猜你喜欢
发表评论
暂无评论