第二章 正則表達(dá)式位置匹配攻略

正則表達(dá)式是匹配模式箱靴，要么匹配字符，要么匹配位置荷愕。請(qǐng)記住這句話衡怀。

然而大部分人學(xué)習(xí)正則時(shí)，對(duì)于匹配位置的重視程度沒(méi)有那么高安疗。

本章講講正則匹配位置的總總抛杨。

內(nèi)容包括：

1. 什么是位置？
2. 如何匹配位置荐类？
3. 位置的特性
4. 幾個(gè)應(yīng)用實(shí)例分析

1. 什么是位置呢怖现？

位置是相鄰字符之間的位置。比如玉罐，下圖中箭頭所指的地方：

image.png

2. 如何匹配位置呢屈嗤？

在ES5中潘拨，共有6個(gè)錨字符：

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

2.1 ^和$

^（脫字符）匹配開頭，在多行匹配中匹配行開頭恢共。

$（美元符號(hào)）匹配結(jié)尾战秋，在多行匹配中匹配行結(jié)尾。

比如我們把字符串的開頭和結(jié)尾用”#”替換（位置可以替換成字符的Ｌ志隆）：

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

多行匹配模式時(shí)脂信，二者是行的概念，這個(gè)需要我們的注意：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#');
console.log(result);
/*
#I#
#love#
#javascript#
*/

2.2 \b和\B

\b是單詞邊界透硝，具體就是\w和\W之間的位置狰闪，也包括\w和^之間的位置，也包括\w和$之間的位置濒生。

比如一個(gè)文件名是”[JS] Lesson_01.mp4”中的\b埋泵，如下：

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#');
console.log(result); 
// => "[#JS#] #Lesson_01#.#mp4#"

為什么是這樣呢？這需要仔細(xì)看看罪治。

首先丽声，我們知道，\w是字符組[0-9a-zA-Z_]的簡(jiǎn)寫形式觉义，即\w是字母數(shù)字或者下劃線的中任何一個(gè)字符雁社。而\W是排除字符組[^0-9a-zA-Z_]的簡(jiǎn)寫形式，即\W是\w以外的任何一個(gè)字符晒骇。

此時(shí)我們可以看看”[#JS#] #Lesson_01#.#mp4#”中的每一個(gè)”#”霉撵，是怎么來(lái)的。

• 第一個(gè)”#”洪囤，兩邊是”[“與”J”徒坡，是\W和\w之間的位置。
• 第二個(gè)”#”瘤缩，兩邊是”S”與”]”喇完，也就是\w和\W之間的位置。
• 第三個(gè)”#”剥啤，兩邊是空格與”L”何暮，也就是\W和\w之間的位置。
• 第四個(gè)”#”铐殃，兩邊是”1”與”.”，也就是\w和\W之間的位置跨新。
• 第五個(gè)”#”富腊，兩邊是”.”與”m”，也就是\W和\w之間的位置域帐。
• 第六個(gè)”#”赘被，其對(duì)應(yīng)的位置是結(jié)尾是整，但其前面的字符”4”是\w，即\w和$之間的位置民假。

知道了\b的概念后浮入，那么\B也就相對(duì)好理解了。

\B就是\b的反面的意思羊异，非單詞邊界事秀。例如在字符串中所有位置中，扣掉\b野舶，剩下的都是\B的易迹。

具體說(shuō)來(lái)就是\w與\w、\W與\W平道、^與\W睹欲，\W與$之間的位置。

比如上面的例子一屋，把所有\B替換成”#”：

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#');
console.log(result); 
// => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

2.3 (?=p)和(?!p)

(?=p)窘疮，其中p是一個(gè)子模式，即p前面的位置冀墨。

比如(?=l)闸衫，表示’l’字符前面的位置，例如：

var result = "hello".replace(/(?=l)/g, '#');
console.log(result); 
// => "he#l#lo"

而(?!p)就是(?=p)的反面意思轧苫，比如：

var result = "hello".replace(/(?!l)/g, '#');

console.log(result); 
// => "#h#ell#o#"

二者的學(xué)名分別是positive lookahead和negative lookahead楚堤。

中文翻譯分別是正向先行斷言和負(fù)向先行斷言。

ES6中含懊，還支持positive lookbehind和negative lookbehind身冬。

具體是(?<=p)和(?<!p)场梆。

也有書上把這四個(gè)東西拱镐，翻譯成環(huán)視蚓哩，即看看右邊或看看左邊孵构。

但一般書上盹愚，沒(méi)有很好強(qiáng)調(diào)這四者是個(gè)位置伤柄。

比如(?=p)哪雕，一般都理解成：要求接下來(lái)的字符與p匹配郭赐，但不能包括p的那些字符茁影。

而在本人看來(lái)(?=p)就與^一樣好理解宙帝，就是p前面的那個(gè)位置。

3. 位置的特性

對(duì)于位置的理解募闲，我們可以理解成空字符””步脓。

比如”hello”字符串等價(jià)于如下的形式：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

也等價(jià)于：

"hello" == "" + "" + "hello"

因此，把/^hello$/寫成/^^hello$$$/，是沒(méi)有任何問(wèn)題的：

var result = /^^hello$$$/.test("hello");
console.log(result); 
// => true

甚至可以寫成更復(fù)雜的:

var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello");
console.log(result); 
// => true

也就是說(shuō)字符之間的位置靴患，可以寫成多個(gè)仍侥。

把位置理解空字符，是對(duì)位置非常有效的理解方式鸳君。

4. 相關(guān)案例

4.1 不匹配任何東西的正則

讓你寫個(gè)正則不匹配任何東西

easy农渊，/.^/

因?yàn)榇苏齽t要求只有一個(gè)字符，但該字符后面是開頭或颊。

4.2 數(shù)字的千位分隔符表示法

比如把”12345678”砸紊，變成”12,345,678”。

可見(jiàn)是需要把相應(yīng)的位置替換成”,”饭宾。

思路是什么呢批糟？

4.2.1 弄出最后一個(gè)逗號(hào)

使用(?=\d{3}$)就可以做到：

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

4.2.2 弄出所有的逗號(hào)

因?yàn)槎禾?hào)出現(xiàn)的位置，要求后面3個(gè)數(shù)字一組看铆，也就是\d{3}至少出現(xiàn)一次徽鼎。

此時(shí)可以使用量詞+：

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

4.2.3 匹配其余案例

寫完正則后，要多驗(yàn)證幾個(gè)案例弹惦，此時(shí)我們會(huì)發(fā)現(xiàn)問(wèn)題：

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

因?yàn)樯厦娴恼齽t否淤，僅僅表示把從結(jié)尾向前數(shù)，一但是3的倍數(shù)棠隐，就把其前面的位置替換成逗號(hào)石抡。因此才會(huì)出現(xiàn)這個(gè)問(wèn)題。

怎么解決呢助泽？我們要求匹配的到這個(gè)位置不能是開頭啰扛。

我們知道匹配開頭可以使用^，但要求這個(gè)位置不是開頭怎么辦嗡贺？

easy隐解，(?!^)，你想到了嗎诫睬？測(cè)試如下：

var string1 = "12345678",
string2 = "123456789";
reg = /(?!^)(?=(\d{3})+$)/g;

var result = string1.replace(reg, ',')
console.log(result); 
// => "12,345,678"

result = string2.replace(reg, ',');
console.log(result); 
// => "123,456,789"

4.2.4 支持其他形式

如果要把”12345678 123456789”替換成”12,345,678 123,456,789”煞茫。

此時(shí)我們需要修改正則，把里面的開頭^和結(jié)尾$摄凡，替換成\b：

var string = "12345678 123456789",
reg = /(?!\b)(?=(\d{3})+\b)/g;

var result = string.replace(reg, ',')
console.log(result); 
// => "12,345,678 123,456,789"

其中(?!\b)怎么理解呢续徽？

要求當(dāng)前是一個(gè)位置，但不是\b前面的位置亲澡，其實(shí)(?!\b)說(shuō)的就是\B钦扭。

因此最終正則變成了：/\B(?=(\d{3})+\b)/g。

4.3 驗(yàn)證密碼問(wèn)題

密碼長(zhǎng)度6-12位床绪，由數(shù)字土全、小寫字符和大寫字母組成捎琐，但必須至少包括2種字符。

此題裹匙，如果寫成多個(gè)正則來(lái)判斷，比較容易末秃。但要寫成一個(gè)正則就比較困難概页。

那么，我們就來(lái)挑戰(zhàn)一下练慕《璩祝看看我們對(duì)位置的理解是否深刻。

4.3.1 簡(jiǎn)化

不考慮“但必須至少包括2種字符”這一條件铃将。我們可以容易寫出：

var reg = /^[0-9A-Za-z]{6,12}$/;

4.3.2 判斷是否包含有某一種字符

假設(shè)项鬼，要求的必須包含數(shù)字，怎么辦劲阎？此時(shí)我們可以使用(?=.*[0-9])來(lái)做绘盟。

因此正則變成：

var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

4.3.3 同時(shí)包含具體兩種字符

比如同時(shí)包含數(shù)字和小寫字母，可以用(?=.*[0-9])(?=.*[a-z])來(lái)做悯仙。

因此正則變成：

var reg = /(?=.*[0-9])(?=.*[a-z])^[0-9A-Za-z]{6,12}$/;

4.3.4 解答

我們可以把原題變成下列幾種情況之一：

1. 同時(shí)包含數(shù)字和小寫字母
2. 同時(shí)包含數(shù)字和大寫字母
3. 同時(shí)包含小寫字母和大寫字母
4. 同時(shí)包含數(shù)字龄毡、小寫字母和大寫字母

以上的4種情況是或的關(guān)系（實(shí)際上，可以不用第4條）锡垄。

最終答案是：

var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("1234567") ); // false 全是數(shù)字
console.log( reg.test("abcdef") ); // false 全是小寫字母
console.log( reg.test("ABCDEFGH") ); // false 全是大寫字母
console.log( reg.test("ab23C") ); // false 不足6位
console.log( reg.test("ABCDEF234") ); // true 大寫字母和數(shù)字
console.log( reg.test("abcdEF234") ); // true 三者都有

4.3.5 解惑

上面的正則看起來(lái)比較復(fù)雜沦零，只要理解了第二步，其余就全部理解了货岭。

/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/

對(duì)于這個(gè)正則路操，我們只需要弄明白(?=.*[0-9])^即可。

分開來(lái)看就是(?=.*[0-9])和^千贯。

表示開頭前面還有個(gè)位置（當(dāng)然也是開頭屯仗，即同一個(gè)位置，想想之前的空字符類比）丈牢。

(?=.*[0-9])表示該位置后面的字符匹配.*[0-9]祭钉，即，有任何多個(gè)任意字符己沛，后面再跟個(gè)數(shù)字慌核。

翻譯成大白話，就是接下來(lái)的字符申尼，必須包含個(gè)數(shù)字垮卓。

4.3.6 另外一種解法

“至少包含兩種字符”的意思就是說(shuō)，不能全部都是數(shù)字师幕，也不能全部都是小寫字母粟按，也不能全部都是大寫字母诬滩。

那么要求“不能全部都是數(shù)字”，怎么做呢灭将？(?!p)出馬疼鸟！

對(duì)應(yīng)的正則是：

var reg = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

三種“都不能”呢？

最終答案是：

var reg = /(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("1234567") ); // false 全是數(shù)字
console.log( reg.test("abcdef") ); // false 全是小寫字母
console.log( reg.test("ABCDEFGH") ); // false 全是大寫字母
console.log( reg.test("ab23C") ); // false 不足6位
console.log( reg.test("ABCDEF234") ); // true 大寫字母和數(shù)字
console.log( reg.test("abcdEF234") ); // true 三者都有

小結(jié)

位置匹配相關(guān)的案例庙曙，挺多的空镜，不一而足。

掌握匹配位置的這6個(gè)錨字符捌朴，給我們解決正則問(wèn)題一個(gè)新工具吴攒。