JavaScript 与正则表达式 -- 位置匹配

正则匹配中，除了文本的匹配外，还有位置匹配。
因为位置匹配不会匹配任何实际的文本，只是匹配文本中的位置，所以也称为锚点（Anchors）、零长度断言 或者 零宽断言 (Zero-Width Assertions)。结合这几个名字，这个概念的含义已经很容易理解了。

JavaScript提供了如下的零宽断言：

零宽断言	意义
^	匹配输入的开始。
$	匹配输入的结束。
\b	匹配一个词的边界。
\B	匹配一个非单词边界。
(?=p)	肯定顺序环视
(?!p)	否定顺序环视
(?<=p)	肯定逆序环视
(?<!p)	否定逆序环视

其中逆序环视是ES2017出现的，ES5只有前6个。

^ 和 $

^（脱字符）匹配开头，在多行匹配中匹配行开头。
$（美元符号）匹配结尾，在多行匹配中匹配行结尾。

比如：

console.log('Assertions'.replace(/^/, '##'))   // ##Assertions

多行的例子：

console.log('hello\nworld'.replace(/^/gm, '#'))  
/**
#hello
#world
**/

\b 和 \B

\b 是单词边界，具体就是 \w 与 \W 之间的位置，也包括 \w 与 ^ 之间的位置，和 \w 与 $ 之间的位置。
比如：

console.log('[ES2018] Ecma_262.pdf'.replace(/\b/gm, '#'))    // [#ES2018#] #Ecma_262#.#pdf#

因为 \w 是 [0-9a-zA-Z_] 的简写形式，而 \W 是排除字符组 [^0-9a-zA-Z_] 的简写形式。从结果[#ES2018#] #Ecma_262#.#pdf# 中可以发现，字符串中所有的 \w 和 \W 之间的位置都被匹配。

\B 表示非单词边界，也就是除去 \b 之外的任何位置。具体说来就是 \w 与 \w、 \W 与 \W、^ 与 \W，\W 与 $ 之间的位置。

console.log('[ES2018] Ecma_262.pdf'.replace(/\B/gm, '#'))    #[E#S#2#0#1#8]# E#c#m#a#_#2#6#2.p#d#f

环视 （lookaround）

和许多其他的概念一样，环视也有着其他的的名字，不过这些名字恰恰能帮助我们更好的理解这些概念。

先以 positive lookahead 为例，通过以下两个不同的名字和正则表达式(?=\d)来理解这个概念：

1. 肯定顺序环视 ，顺序（从左向右）查看文本，尝试匹配子表达式，如果能够匹配成功，就返回匹配成功的信息。比如，表达式(?=\d) 表示，如果当前位置右边的字符是数字则匹配成功。
2. 正向先行断言，(?=\d) 匹配数字前的位置。

这个概念理解起来不是很麻烦，第一种名字，更容易理解原理，第二种名字理解起来很直观。

环视一共有四种：
根据方向的不同，分为 lookahead 和 lookbehind。
根据判定原则不同，分为 positive 和 negative。
所以，有肯定顺序环视，否定顺序环视，肯定逆序环视和否定逆序环视。对应的另一组名字是：正向先行断言，负向先行断言，正向后行断言和负向后行断言。

比如，根据上面 positive lookahead 例子的解释， 可以知道 negative lookbehind的含义：

• 表达式为 (?<!\d)
• 否定逆序环视，逆序（从右向左）查看文本，如果当前位置的左边不是数字，则匹配成功。
• 负向后行断言，匹配前面不是数字的位置。

零宽的理解

零宽，简单理解为空字符 ""。
因为没有宽度，所以匹配完成后还停留在这个位置，还可以继续匹配，也即一个位置可以被多次匹配。
如：

console.log(/^^hello$$$/.test("hello"))    // true

经常使用多个零宽断言组合在一起使用，对同一个位置进行多重判断。
比如下面的例子就使用了多个零宽断言，以包含和并列的方式组合来限制同一个位置，以达到更精确的匹配。

例子

给数字添加分号

有时候我们需要标记一长串的数字，在每三位数字中间添加逗号，如这个样子：12,456,567，如何用正则来解决这个问题呢？
我们大概分析一下需求：

• 匹配一个位置
• 不是数字字符串的开头
• 右边的数字个数正好是3的倍数
• 对于类似 1990s 的字符串不会加分号
• 对于类似 price: $3000 的字符串中间数字部分应该加分号

首先解决基本的需求即给数字字符串加分号，需要匹配一个位置 且：

1. 匹配“不在开头”，我们知道匹配开头用 ^，但是匹配不是开头该咋办呢？根据上文的介绍，可以把不在开头理解为，匹配一个后面不是开头的位置： (?!^)
2. 右边的数字个数正好是3的倍数：(?=(\d{3})+$

var regex = /(?!^)(?=(\d{3})+$)/g
console.log('12345'.replace(regex, ','))    // 12,345
console.log('234567'.replace(regex, ','))    // 123,456

接下来，为了完成更精确的匹配，正则表达式要满足后面的需求。
其他的要求换一种更“正则”的表述方式是，数字的前后不是单词字符，即上文提到的 \b 。
把上面的正则表达式中的 ^ 和 $ 替换为 \b 即可：

var regex = /(?!\b)(?=(\d{3})+\b)/g
console.log('12345'.replace(regex, ','))   // 12,345
console.log('1234567'.replace(regex, ','))   // 1,234,567
console.log('abc12345d'.replace(regex, ','))  // abc12345d
console.log('abc 12345 6d'.replace(regex, ','))  // abc 12,345 6d

完成了我们的目标，但是关于 (?!\b) 可以重新理解一下，(?!...) 和 \b 都是在匹配位置，根据上文提到的对零宽的理解，其实(?!\b) 匹配的是一个不是 \b 的位置，也就是 \B：

var regex = /\B(?=(\d{3})+\b)/g
console.log('12345'.replace(regex, ','))   // 12,345
console.log('1234567'.replace(regex, ','))   // 1,234,567
console.log('abc12345d'.replace(regex, ','))   // abc12345d
console.log('abc 12345 6d'.replace(regex, ','))   // abc 12,345 6d

这个例子虽然有点复杂，但它是一个理解位置匹配的好例子。如果看完这个例子还不过瘾，可想想其他的解法比如： /(?<=\d)(?=(\d{3})+\b)/g 。