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

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

在现实的应用场景中，捕获分组或非捕获分组通常被限制在前瞻后顾条件内，举例来说，对数字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