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

在现实的应用场景中，捕获分组或非捕获分组通常被限制在前瞻后顾条件内，举例来说，对数字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正则前瞻后顾与非捕获分组内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界！