JS中的replace方法

时间：2026-01-29 09:27:40

简介

用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
该方法返回一个新的字符串，但不改变原字符串
签名：replace([RegExp|String],[String|Function])
RegExp: 正则表达式

使用

replace(String, String)

let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
str = str.replace('叼毛', '靓仔')
console.log(str) // "靓仔1号: 亚索, 叼毛2号: 永恩"

此方法的缺陷是，一次调用只能替换第一个匹配到的字符串；全部替换需要多次调用
一劳永逸的方法是第一个入参使用RegExp正则表达式，并全局匹配

replace(RegExp, String)

let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
// 匹配“叼毛”，并添加修饰符g去全局匹配
const reg = /叼毛/g
str = str.replace(reg, '靓仔')
console.log(str) // "靓仔1号: 亚索, 靓仔2号: 永恩"

如此，两兄弟都成为靓仔?‍♂️啦

replace(RegExp, Function)

2.2可实现的功能比较简单，若需要做复杂一些的字符串替换操作，需要使用正则+function

实现2.2的写法

let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
const reg = /叼毛/g
str = str.replace(reg, function() )
console.log('str:', str)

如上所示，func内return的内容会替换reg匹配到的内容。
不写return，默认使用undefined来进行替换
不想实现替换的话，我们可以把捕获的内容再返回回去 return arguments[0]

log信息：
分析：打印了2次arguments，是因为匹配了两次
参数：

arguments[0]：匹配到的第一个子字符串
arguments[1]：此次匹配到的字符的索引位置
arguments[2]：源字符串本身

RegExp使用分组时

一个分组：

let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
// 添加分组(\d号)
const reg = /叼毛(\d号)/g
str = str.replace(reg, function() )
console.log('str:', str)

log信息：
参数：

arguments[0]：匹配到的第一个子字符串
arguments[1]: 匹配到的第一个分组项
arguments[2]：此次匹配到的字符的索引位置
arguments[3]：源字符串本身

两个分组：

let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
// 添加分组(\d号) (:)
const reg = /叼毛(\d号)(:)/g
str = str.replace(reg, function() )
console.log('str:', str)

log信息：
参数：

arguments[0]：匹配到的第一个子字符串
arguments[1]: 匹配到的第一个分组项
arguments[2]: 匹配到的第二个分组项
arguments[3]：此次匹配到的字符的索引位置
arguments[4]：源字符串本身

结论：replace方法的两个入参为RegExp和function时，function的参数为：

第一个参数总是匹配的子字符串
若RegExp正则表达式有分组匹配，有几个分组，按顺序接下来的参数即为匹配的分组项
倒数第二个参数是此次匹配到的字符的索引位置
最后一个参数是源字符串本身

示例

小写数字替换成大写数字

let str = '今年是2023年'
const arr = ['零', '壹', '贰', '叁', '肆', '伍', '陆','柒', '捌', '玖', '拾']

str = str.replace(/\d/g, function() )
console.log(str)

模版引擎超简陋版

let str = 'my name is , my age is , i ce fr , i love  ~~~'
const ary = ['iceman', '26', 'China', 'javascript']
str = str.replace(//g , function () );
console.log(str) // "my name is iceman, my age is 26, i ce fr China, i love javascript ~~~"

新增

RegExp正则匹配有分组项，第二个参数使用对应的分组index$直接获取替换

let str = 'xuxi is xuxi is'
let reg = /(xuxi) (is) \1 \2/g
str.replace(reg, '$1 $2')  // xuxi is  (2)

// $1: 对应第一个分组项(xuxi)
// $2: 对应第二个分组项(is)
// 所以结果为： xuxi is

上一篇：Django 框架
下一篇：Vue-iclient-MapboxGl在vue2中的按需引入