JS中的replace方法
简介
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
该方法返回一个新的字符串，但不改变原字符串
签名：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('arguments:', arguments)
return '靓仔'
})
console.log('str:', str)
- 如上所示，func内return的内容会替换reg匹配到的内容。
- 不写return，默认使用undefined来进行替换
- 不想实现替换的话，我们可以把捕获的内容再返回回去
return arguments[0]
log信息：
分析：打印了2次arguments，是因为匹配了两次
参数：
RegExp使用分组时
一个分组：
let str = "叼毛1号: 亚索, 叼毛2号: 永恩"
// 添加分组(\d号)
const reg = /叼毛(\d号)/g
str = str.replace(reg, function() {
console.log('arguments:', arguments)
return '靓仔' + arguments[1]
})
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('arguments:', arguments)
return '靓仔' + arguments[1] + arguments[2]
})
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() {
return arr[arguments[0]]
})
console.log(str)
模版引擎超简陋版
let str = 'my name is {0}, my age is {1}, i come from {2}, i love {3} ~~~'
const ary = ['iceman', '26', 'China', 'javascript']
str = str.replace(/{(\d+)}/g , function () {
return ary[arguments[1]]
});
console.log(str) // "my name is iceman, my age is 26, i come from China, i love javascript ~~~"
新增
- RegExp正则匹配有分组项，第二个参数使用 对应的分组index
${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
