js正则表达式之前瞻后顾与非捕获分组

 更新时间:2021年10月14日 16:00  点击:2086

前瞻后顾与捕获分组的结合使用

在现实的应用场景中,捕获分组或非捕获分组通常被限制在前瞻后顾条件内,举例来说,对数字12345678格式化,结果为12,345,678。其正则实现如下:

let formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

捕获分组与非捕获分组

为了理解前瞻与后顾,首先要先理解捕获分组与非捕获分组

在js中,

()表示捕获分组,() 会把每个分组里的匹配的值保存起来,使用$n(n是一个数字,表示第n个捕获组的内容);

(?:)表示非捕获分组,和捕获分组唯一的区别在于,非捕获分组匹配的值不会保存起来。

以formatSum 表达式为例,(?=(?:\d{3})+(?!\d)) ,(?:\d{3}) ,(?!\d) 都是分组,其中第二个分组是非捕获分组。

前瞻、后顾与负前瞻、负后顾

在上述的formatSum表达式中,用到了 ‘?=‘与'?!',这就是所谓的前瞻与负前瞻了。为了方便理解,我们以一个简单的例子入手。

// 前瞻:
A(?=B)   //查找B前面的A
// 后顾:
(?<=B)A   //查找B后面的A
// 负前瞻:
A(?!B)   //查找后面不是B的A
// 负后顾:
(?<!B)A   //查找前面不是B的A

回看formatSum表达式,将 (?:\d{3})+(?!\d) 视为一个整体表达式 A,即

formatSum = /\B(?=A)/g  //此处A为表示式并非真正字母A,只为方便理解

其意思是匹配表达式A前面的 \B ,而 \B 匹配的是非字母边界,所以可以看出该表达式整体的作用是用来匹配并替换表达式 A 前边的边界的。

与 \B 对应的还有 \b ,其匹配字母边界。对于初学者来说,边界的概念比较难以理解,你可以把它看作是无形的 | ,任何长度大于等于2的字符串中都存在边界。如 ‘ab',它可以看作是'a|b', 只是此处 | 是无形的,当然它也就不计入字符串长度。

'ab'.replace(/\B/, ',')
//  a,b

接下来为了看表达式 A 部分: (?:\d{3})+(?!\d) 。

首先 ?: 表示非捕获分组,\d{3} 表示3位数字,则 (?:\d{3})+ 表示3、6、9、12…位数字;

(?!\d) 为负前瞻,表示匹配后面不是数字的 (?:\d{3})+ 。综上:

(?:\d{3})+(?!\d)  

匹配'12345678'中后面不是数字的3*n(n=1递增)位数字,即'678', '345678'

所以,得出结果:

formatSum = '12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')

匹配'12345678'中后面不是数字的3*n(n=1,n++)位数字前面的非字母边界,
即'678', '345678'前面的非字母边界,最终将这两个边界替换为逗号,
即 '3' 与 '6' 前加逗号

'12345678'.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')  === '12,345,678'
// true

总结

到此这篇关于js正则表达式之前瞻后顾与非捕获分组的文章就介绍到这了,更多相关js正则前瞻后顾与非捕获分组内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!

[!--infotagslink--]

相关文章

  • PHP正则表达式取双引号内的内容

    取双引号内的内容我们如果一个字符串中只有一个可以使用explode来获得,但如果有多个需要使用正则表达式来提取了,具体的例子如下。 写程序的时候总结一点经验,如何只...2016-11-25
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • php 验证只能输入汉字、英语、数字的正则表达式

    正则表达式是一门非常有用的并且进行模糊判断的一个功能了,我们下面来看通过正则来验证输入汉字、英语、数字,具体如下。 收藏了正则表达式。可以验证只能输入数...2016-11-25
  • java正则表达式判断前端参数修改表中另一个字段的值

    这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数,包括分钟,时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25
  • PHP正则表达式匹配验证提取网址URL实例总结

    网址规则是可寻的,所以我们可以使用正则表达式来提取字符串中的url地址了,下面一起来看看小编整理的几个PHP正则表达式匹配验证提取网址URL实例. 匹配网址 URL 的...2016-11-25
  • 正则表达式中两个反斜杠的匹配规则详解

    这篇文章主要介绍了正则表达式中两个反斜杠的匹配规则,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧...2017-04-03
  • C#正则表达式使用方法示例

    这篇文章主要介绍了C#正则表达式使用方法,大家参考使用...2020-06-25
  • 常用C#正则表达式汇总介绍

    c#正则表达式,用于字符串处理、表单验证等场合,实用高效。现将一些常用的表达式收集于此,以备不时之需。...2020-06-25
  • JavaScript利用正则表达式替换字符串中的内容

    本文主要介绍了JavaScript利用正则表达式替换字符串中内容的具体实现方法,并做了简要注释,便于理解。具有一定的参考价值,需要的朋友可以看下...2017-01-09
  • 一文秒懂python正则表达式常用函数

    这篇文章主要介绍了python正则表达式常用函数及使用方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • Idea使用正则表达式批量替换字符串的方法

    这篇文章给大家介绍了Idea使用正则表达式批量替换字符串的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-07-21
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • C# 中使用正则表达式匹配字符的含义

    正则表达式的作用用来描述字符串的特征。本文重点给大家介绍C# 中使用正则表达式匹配字符的含义,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧...2020-06-25
  • Python验证的50个常见正则表达式

    这篇文章主要给大家介绍了关于利用Python验证的50个常见正则表达式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-11
  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
  • js用正则表达式筛选年月日的实例方法

    在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法,对此有兴趣的朋友们可以学习下。...2021-01-04
  • javascript 手机号码正则表达式验证函数 <font color=red>原创</font>

    随着手机号码段的不断增加,以前网上的手机号码验证函数都不能那么完美的支持了,这里脚本之家编辑特为大家准备的一个简单的正则与手机验证的函数分析。...2021-05-07
  • Java中正则表达式split()特殊符号使用详解

    这篇文章主要介绍了Java中正则表达式split()特殊符号使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-07-21