正则replace 回调函数里接收的参数是什么？

Posted 2022-07-28 chanwahfung

前言

我们都知道 replace 在做替换处理方面会很常用，通常也是第一个会想到的方法。replace 第一个参数可以传入 string 或 RegExp，第二个参数可以传入 string 或 一个回调函数。在能够传入回调函数之后，事情就开始变得不简单了(如果有用过map，filter等函数，你就知道传入回调函数的强大)。在做替换处理时，我们能够获取到更多的有效信息，处理的手段也可以更加多样化，而不是单纯的替换。接下来我们，来看看回调函数里接受的参数到底是什么？

回调中接收到的参数

回调中最少可以接受到3个参数，最多没有上限，为什么这么说呢？往下看

MDN的解释：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String/replace#指定一个函数作为参数

解释可能有点官方，我来简述对应的参数吧（我感觉应该都能看懂吧）

看得多，不如动手敲一敲，先看一个例子：

1 let str = ‘aavbbvcc‘
2 let reg = /(b)+/g
3 str.replace(reg, ($0,$1,$2,$3)=>
4    console.log($0,$1,$2,$3)     
5 )
6 //bb b 3 aavbbvcc

$0: 正则匹配到的字符串

$1: 在使用组匹配时，组匹配到的值

$2: 匹配值在原字符串中的索引

$3: 原字符串

 

诶，你刚刚不是说最少3个参数吗？出现3个参数的情况是什么

再来看一个例子：

let str = ‘aavbbvcc‘
let reg = /b+/g
str.replace(reg, ($0,$1,$2,$3)=>
    console.log($0,$1,$2,$3)     
)
//bb 3 aavbbvcc undefined

这次我没有使用组匹配，所以对应的组匹配的值也不会出来

至于最多的参数，就要看你组匹配能匹配到多少个咯

replace的应用

在知道了这些参数后，我们就可以根据实际需求进行使用
假如现在有一个需求：过滤脏话，将脏话替换成对应长度的星号

let str = ‘菜鸡前端，在线炒粉,nmsl‘
let reg = /(菜鸡|nmsl)/g
str.replace(reg, ($0)=>
    let char = ‘‘,
        len = $0.length
        i = 0
    for(i; i < len; i++)
        char+=‘*‘
    
    return char
)
// **前端，在线炒粉,****

当然这只是基本操作，下面要查找出一段纯字母字符串中出现最多次的字符以及该字符是哪个

可能有些小伙伴会有看过这个题目，或者在面试时会被问到，方法就是通过遍历字符串，用一个对象来记录下对应的字符和出现的次数

今天我们将又学会一个方法，那就是使用 replace。这个方法是我在掘金上看到，看完后有点意想不到的效果，还挺有意思，也是促使我去重新学习一次 replace 并写下这篇笔记的初衷。

代码：

function findMaxChar(str)
    let reg = /(\\w)\\1+/g,
        num = 0,
        char = ‘‘
    str = str.split(‘‘).sort().join(‘‘)
    str.replace(reg,($0,$1)=>
        if(num < $0.length)
            num = $0.length
            char = $1
        
    )
    return `出现最多的字符：$char，次数$num`

仔细解读后，相信你也会和我一样感觉到有意思

写在最后

看到一些简单的东西，我们都自认为懂了，会用了。但在仔细研究后，我们可能会发现一片新大陆。在学习过程中，我们始终要对知识抱有敬畏之心，同时要想一想简单的东西怎么能变得不简单。在了解的越多之后，才会发现自己有多渺小。