正则表达式中 ?= 和 ?: 的区别到底在哪里

Question

直接上例子：每三个数字中间加逗号

"123456789".replace(/(\d{3})(?:[^$])/g, "$1,");

//"123,567,9"

"123456789".replace(/(\d{3})(?=[^$])/g, "$1,");

//"123,456,789"

再上一个之前论坛里出现过的例子，也是每三个数字中间加逗号

先看看 (?=pattern) 的使用，下面这个是正确的：

function groupByCommas(n) {

  return n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

}

console.log(groupByCommas(1234567));    //1,234,567

如果我们把 ?= 换成 ?: 的话:

function groupByCommas(n) {

  return n.toString().replace(/\B(?:(\d{3})+(?!\d))/g, ",");

}

console.log(groupByCommas(1234567));    //1,

两者的概念不用多说，查到有回答说：区别在于 ?= 是正向肯定 断言，进行的匹配是不占查询长度的；而 ?: 是非获取匹配，进行的匹配是占据查询长度的。

但是还是不是很理解这里的查询占据长度的说法，对着例子解释，难道是说第一个例子(?=[^$])匹配的是非结尾，所以123之后的非结尾的长度最小是1个字符，所以把4给一起替代了？那怎么不直接替代到结尾呢？ 第二个例子(?=(\d{3})+(?!\d))匹配的是3或3的倍数个数字，直接匹配到了结尾，所以把234567也直接替代了？所以我的理解肯定是不对的

理解的不是很透彻，欢迎各位对着例子来解答一下我的困惑，不胜感激！

Answer 1

"123456789".replace(/(\d{3})(?:[^$])/g, "$1,");()表示捕获型括号，(?:)表示非捕获型括号，所以第一个括号匹配的内容会放在$1中，第二个括号匹配的内容不会放在$2中。\d{3}表示连续三个数字，[^$]表示匹配一个字符，只要这个字符不是$符号，需要注意的是[]表示匹配里面的任意一个字符，但是肯定是要有一个的，所以[]匹配出来的字符的长度肯定是1，不存在0的情况，另外在[$]里面的符号是没有特殊含义的，就是这个字符，而不是匹配字符串的结尾。因为\d{3}匹配三个字符，[^$]匹配一个字符，所以这个正则匹配4个字符；来看匹配过程，首先"1234"是满足的，"123"匹配\d{3}，"4"匹配[^$]，此时$1="123"，所以"1234"被替换成"123,"。然后从5开始下次匹配，类似的"5678"满足条件，$1="567"，所以"5678"被替换成"567,"。然后从9开始匹配，下面没有匹配了，匹配结束，结果为"123,567,9"。"1234567".replace(/\B(?:(\d{3})+(?!\d))/g, ",");\B匹配非单词边界，也是一个位置，没有宽度，(\d{3})+匹配3的倍数数字序列，且个数至少是3个，+是量词，表示1到多次，默认是贪婪的，贪婪就是尽可能多的匹配，(?!d)表示这个位置后面不是数字。看例子，首先\B不匹配行首，所以匹配的位置移动到"1"后面的位置，此时\B匹配1后面的位置，然后"234", "567"匹配d{3}，因为是贪婪匹配，所以(d{3})+匹配"234567"，然后因为7后面是字符串的结尾了，所以满足断言(?!\d)不是数字，所以整个正则的匹配结果是"234567"，所以"234567"被替换成了","。1不动，所以"1234567"变成了"1,"。"123456789".replace(/(\d{3})(?=[^$])/g, "$1,");这个正则表达式不满足"千分位添加逗号"的需求，"123456789"只是个特例（位数正好是3的倍数），换成"12345678"结果是"123,456,78"。