正则位置匹配

正则表达式要么匹配字符，要么匹配位置。

一、字符串的位置

就是整个字符串前后和单个字符之间的位置，例如下图：

二、正则表达式如何匹配位置

1、es5中匹配位置的正则：

^, $, \b, \B, (?=p), (?!p)

^ (脱字节)，匹配字符串开始的位置。
$（美元符号），匹配字符串结尾的位置。
现在我么给"hello"前面和后面添加一个$符号，例子如下：

var result = "hello".replace(/^|$/g, "$");
console.log(result)
// => $hello$

2、\b和\B

\b是单词边界，是\w和\W之间、\w和^之间、\w和$之间的位置。

比如一个文件名是"[JS] learn_01.md"中的\b，如下:

var str = "[JS] learn_01.md";
console.log(str.replace(/\b/g, "$"))
// => [$JS$] $learn_01$.$md$

我面可以分析一下上面的结果，\w正则表达式是[0-9a-zA-Z_]来表示，\W正好和\w相反是[^0-9a-zA-Z_]，所以[ ,],.这三个字符与\w之间会添加#，字符串结尾是\w和$之间，所以也会添加上#。
我们把上面的例子中的\b替换成\B, 代码如下：

var str = "[JS] learn_01.md";
console.log(str.replace(/\B/g, "$"))
VM92:2 $[J$S]$ l$e$a$r$n$_$0$1.m$d

3、 (?=p)和(?!p)

(?=p)中的p是一个子模式，即p前面的位置，比如(?=l),是l前面的位置。 例子如下：

var str = "hello";
console.log(str.replace(/(?=l)/g, "$"));
// => he$l$lo

(?!p)就是和(?=p)相反的意思， 例子如下：

var str = "hello";
console.log(str.replace(/(?!l)/g, "$"));
// => he$l$lo

4、案例分析

面试中遇到的一个题目，把"12345678"，变成"12,345,678"。
（1）先让他有一个逗号，例子如下：

var str  = "12345678"
var result = str.replace(/(?=\d{3}$)/g, ',')
console.log(result); 
// => "12345,678"

（2） 弄出所有的逗号， 例子如下：

var str = "12345678"
var result = str.replace(/(?=(\d{3})+$)/g, ',')
console.log(result)
// => "12,345,678"

（3）多验证几下会出现问题

var str = "123456789"
var result = str.replace(/(?=(\d{3})+$)/g, ',')
console.log(result)
// => ",123,456,789"

我们并不需要最前面的那个逗号，我们需要不让匹配到最前面的位置，那就用（?!^）就可以解决，例子如下：

var str = "123456789"
var result = str.replace(/(?!^)(?=(\d{3})+$)/g, ',')
console.log(result)
// => "123,456,789"