?= ?: ?! 的理解及引用举例（数字格式化 1,123,000）

Posted 2020-11-25 mrzhujl

 

要理解?=和?!，首先需要理解 前瞻，后顾，负前瞻，负后顾四个概念：（有的管它叫零宽断言）

// 正向前瞻：
exp1(?=exp2) 查找exp2前面的exp1
// 正向后顾：
(?<=exp2)exp1 查找exp2后面的exp1
// 负向前瞻：
exp1(?!exp2) 查找后面不是exp2的exp1
// 负向后顾：
(?<!exp2)exp1 查找前面不是exp2的exp1

举例：

"中国人".replace(/(?<=中国)人/, "rr") // 匹配中国人中的人，将其替换为rr，结果为 中国rr
"法国人".replace(/(?<=中国)人/, "rr") // 结果为 法国人，因为人前面不是中国，所以无法匹配到

 

要理解?:则需要理解捕获分组和非捕获分组的概念：

() 表示捕获分组，() 会把每个分组里的匹配的值保存起来，使用 $n ( n 是一个数字，表示第 n 个捕获组的内容)
(?:) 表示非捕获分组，和捕获分组唯一的区别在于，非捕获分组匹配的值不会保存起来
举例：

‘adsaaa‘.match(/a(?:d|a)/g)  //  ["ad", "aa"]

?:的用处主要是在有|的时候，很好用，例如a(?:d|r)匹配的就是ad或者ar

?: 的应用 （数字格式化 1,123,000）

// 数字格式化 1,123,000
"1234567890".replace(/B(?=(?:d{3})+(?!d))/g,",") // 结果：1,234,567,890，匹配的是后面是3*n个数字的非单词边界(B)

 

不得不说正则真的很难读懂：

document.write("1234".replace(/d(?=23)/g, "x"),`<br/>`) // "x234"    把 23 的前一个数字 替换成x
document.write("1234".replace(/(?=23)d/g, "x"),`<br/>`) // "1x34"    把 23 的第一个数字 替换成x

document.write("1234".replace(/(?<=23)d/g, "x"),`<br/>`) // "123x"   把 23 的后一个数字 替换成x
document.write("1234".replace(/d(?<=23)/g, "x"),`<br/>`) // "12x4"   把 23 的最后一个数字 替换成x

document.write("1234".replace(/d(?!23)/g, "x"),`<br/>`) // "1xxx"    把除了 23 的前一个数字之外的数字 替换成x
document.write("1234".replace(/(?!23)d/g, "x"),`<br/>`) // "x2xx"    把除了 23 的第一个数字之外， 替换成x

document.write("1234".replace(/(?<!23)d/g, "x"),`<br/>`) // "xxx4"   把除了 23 的后一个数字之外的数字 替换成x
document.write("1234".replace(/d(?<!23)/g, "x"),`<br/>`) // "xx3x"   把除了 23 的最后一个数字之外， 替换成x

根据多次反复的试验，给出以上解释，但终究难知其所以然，若有大神可以指点迷津，万分感谢。

个人理解：

?= 正向前瞻　　?! 负向前瞻　　?<= 正向后顾　　?<! 负向后顾

我把上文中的 23 称之为 判断字符，将要找的那个字符 d 称之为 查找字符

书写规范：①前瞻：查找字符 放在 分组 之前，②后顾：查找字符 放在 分组 之后。

符合上述4中情况且书写规范的情况下，查找字符 就是 判断字符 紧挨着的字符。

若书写顺序于规范相反，查找字符 则是 判断字符 中的字符。

 

 

const fn = (str) => {

// 匹配“范围是小写字母的任意字符”前面的数字，只匹配数字。

const a = /(?=.*[a-z])d/

// 匹配“a-z范围内的字母”前面的数字，只匹配数字。

const b = /d(?=[a-z])/

// 匹配“范围是小写字母的任意字符”后面的数字，只匹配数字。

const c = /(?<=.*[a-z])d/

// 匹配“a-z范围内的字母”后面的数字，只匹配数字。

const d = /(?<=[a-z])d/

return [a.test(str), b.test(str), c.test(str), d.test(str)]

}

console.log(fn("a23456")) // [false, false, true, true]

console.log(fn("2a3456")) // [true, true, true, true]

console.log(fn("23456a")) // [true, true, false, false]