JS replace使用方法

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]

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)

参数：

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)

参数：

arguments[0]：匹配到的第一个子字符串

arguments[1]: 匹配到的第一个分组项

arguments[2]: 匹配到的第二个分组项

arguments[3]：此次匹配到的字符的索引位置

arguments[4]：源字符串本身

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

第一个参数总是匹配的子字符串

若RegExp正则表达式有分组匹配，有几个分组，按顺序接下来的参数即为匹配的分组项

倒数第二个参数是此次匹配到的字符的索引位置