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，是因为匹配了两次
参数：

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

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 ~~~"

新增

1. 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