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)来理解这个概念：
-
肯定顺序环视 ，顺序（从左向右）查看文本，尝试匹配子表达式，如果能够匹配成功，就返回匹配成功的信息。比如，表达式
(?=\d)表示，如果当前位置右边的字符是数字则匹配成功。 -
正向先行断言，
(?=\d)匹配数字前的位置。
这个概念理解起来不是很麻烦，第一种名字，更容易理解原理，第二种名字理解起来很直观。
环视一共有四种：
根据方向的不同，分为 lookahead 和 lookbehind。
根据判定原则不同，分为 positive 和 negative。
所以，有肯定顺序环视，否定顺序环视，肯定逆序环视和否定逆序环视。对应的另一组名字是：正向先行断言，负向先行断言，正向后行断言和负向后行断言。
比如，根据上面 positive lookahead 例子的解释， 可以知道 negative lookbehind的含义：
- 表达式为
(?<!\d) - 否定逆序环视，逆序（从右向左）查看文本，如果当前位置的左边不是数字，则匹配成功。
- 负向后行断言，匹配前面不是数字的位置。
零宽的理解
零宽，简单理解为空字符 ""。
因为没有宽度，所以匹配完成后还停留在这个位置，还可以继续匹配，也即一个位置可以被多次匹配。
如：
console.log(/^^hello$$$/.test("hello")) // true
经常使用多个零宽断言组合在一起使用，对同一个位置进行多重判断。
比如下面的例子就使用了多个零宽断言，以包含和并列的方式组合来限制同一个位置，以达到更精确的匹配。
例子
给数字添加分号
有时候我们需要标记一长串的数字，在每三位数字中间添加逗号，如这个样子：12,456,567，如何用正则来解决这个问题呢？
我们大概分析一下需求：
- 匹配一个位置
- 不是数字字符串的开头
- 右边的数字个数正好是3的倍数
- 对于类似
1990s的字符串不会加分号 - 对于类似
price: $3000的字符串中间数字部分应该加分号
首先解决基本的需求即给数字字符串加分号，需要匹配一个位置 且：
- 匹配“不在开头”，我们知道匹配开头用
^，但是匹配不是开头该咋办呢？根据上文的介绍，可以把不在开头理解为，匹配一个后面不是开头的位置：(?!^) - 右边的数字个数正好是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 。
