前言

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

回调中接收到的参数

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

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

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

看得多,不如动手敲一敲,先看一个例子:

 let str = 'aavbbvcc'
let reg = /(b)+/g
str.replace(reg, ($0,$1,$2,$3)=>{
console.log($0,$1,$2,$3)
})
//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}`
}

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

写在最后

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

正则replace 回调函数里接收的参数是什么?的更多相关文章

  1. iOS下ajax回调函数里不能播放audio

    iOS下audio必须监测到事件才可播放, ajax回调函数里不能播放 解决办法 在点击方法里先播放然后立即暂停,在回调函数里重新播放 onclick(function(){ $("#_wx ...

  2. C++: 带参数回调函数和不带参数的回调函数;

    在C++中,回调函数的应用比较广泛且重要. 通过传递函数指针到其他地方,能够实现远程回调的作用,能够实现远程调用而不需要事件触发信号或者其他机制来实现,方便而快捷: 首先,回调函数有两种形式:  静态 ...

  3. [Perl] Getopt 函数来接收用户参数的使用

    我们在linux常常用到一个程序需要加入参数,现在了解一下perl中的有关控制参数的函数.getopt.在linux有的参数有二种形式.一种是–help,另一种是-h.也就是-和–的分别.–表示完整参 ...

  4. JavaScript replace 回调函数用法

    params.query = params.query.replace(/[\+\-\&\|\!\(\)\{\}\[\]\^\"\~\*\?\:\\]/g,function(a){ ...

  5. layer 点击yes后在回调函数里获取layer.open({})iframe里面元素

    参考:http://fly.layui.com/jie/19690/ yes: function(index, layero) { uid.value = $(layero).find('iframe ...

  6. callback 回调函数

    把函数a当做一个参数传入函数b <script> Array.prototype.mysort = function(callback){ let s = this; //准备向回调函数里 ...

  7. 解决有关flask-socketio中服务端和客户端回调函数callback参数的问题(全网最全)

    由于工作当中需要用的flask_socketio,所以自己学习了一下如何使用,查阅了有关文档,当看到回调函数callback的时候,发现文档里都描述的不太清楚,最后终于琢磨出来了,分享给有需要的朋友 ...

  8. js回调函数(callback)理解

    Mark! js学习 不喜欢js,但是喜欢jquery,不解释. 自学jquery的时候,看到一英文词(Callback),顿时背部隐隐冒冷汗.迅速google之,发现原来中文翻译成回调.也就是回调函 ...

  9. Delphi对象变成Windows控件的前世今生(关键是设置句柄和回调函数)goodx

    ----------------------------------------------------------------------第一步,准备工作:预定义一个全局Win控件变量,以及一个精简 ...

随机推荐

  1. visible:hidden和dispaly:none的区别

    display:none和visible:hidden都能把网页上某个元素隐藏起来,但两者有区别: display:none ---不为被隐藏的对象保留其物理空间,即该对象在页面上彻底消失,通俗来说就 ...

  2. (C#)WPF:Property和Attribute的区别

    在C#里Property是属性,Attribute是特性.它们的概念是不一样的,充其量就是中文的神翻译问题. 1)属性是指类体里用get或set封装好的属性.属性是面向对象的理论范畴.比如说一个盒子, ...

  3. 【前端vue进阶实战】:从零打造一个流程图、拓扑图项目【Nuxt.js + Element + Vuex】 (一)

    本系列教程是用Vue.js + Nuxt.js + Element + Vuex + 开源js绘图库,打造一个属于自己的在线绘图软件,最终效果:topology.le5le.com .如果你觉得好,欢 ...

  4. 前端 vue单页面应用刷新网页后vuex的state数据丢失的解决方案(转载)

    最近接手了一个项目,前端后端都要做,之前一直在做服务端的语言.框架和环境,前端啥都不会啊. 突然需要前端编程,两天速成了JS和VUE框架,可惜还是个半吊子.然后遇到了一个困扰了一整天的问题.一直调试都 ...

  5. 力扣(LeetCode)二进制求和 个人题解

    给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 1: 输入: a = "11", b = "1" 输出: ...

  6. 力扣(LeetCode)亲密字符串 个人题解

    给定两个由小写字母构成的字符串 A 和 B ,只要我们可以通过交换 A 中的两个字母得到与 B 相等的结果,就返回 true :否则返回 false . 示例 1: 输入: A = "ab& ...

  7. SpringBoot系列教程Web篇之开启GZIP数据压缩

    本篇可以归纳在性能调优篇,虽然内容非常简单,但效果可能出乎预料的好: 分享一个真实案例,我们的服务部署在海外,国内访问时访问服务时,响应有点夸张:某些返回数据比较大的接口,耗时在 600ms+上,然而 ...

  8. Python 编程语言要掌握的技能之一:使用数字与字符串的技巧

    最佳实践 1. 少写数字字面量 “数字字面量(integer literal)” 是指那些直接出现在代码里的数字.它们分布在代码里的各个角落,比如代码 del users[0] 里的 0 就是一个数字 ...

  9. oracle内存占用过高和修改不当无法启动oracle实例的解决办法

    今天,在自己机器上装了oracle 12c,发现Oracle的服务Oracle RDBMS Kenel  Executable (OracleServiceORCL)占用内存高达5G,本人电脑内存才1 ...

  10. 12、pytest -- 缓存:记录执行的状态

    目录 1. cacheprovider插件 1.1. --lf, --last-failed:只执行上一轮失败的用例 1.2. --ff, --failed-first:先执行上一轮失败的用例,再执行 ...