正規表示式完整教程(略長)

記得要微笑發表於2021-11-21

引言

親愛的讀者朋友,如果你點開了這篇文章,說明你對正則很感興趣。

想必你也瞭解正則的重要性,在我看來正規表示式是衡量程式設計師水平的一個側面標準。

關於正規表示式的教程,網上也有很多,相信你也看了一些。

與之不同的是,本文的目的是希望所有認真讀完的童鞋們,都有實質性的提高。

本文內容共有七章,用JavaScript語言完整地討論了正規表示式的方方面面。

如果覺得文章某塊兒沒有說明白清楚,歡迎留言,能力範圍之內,老姚必做詳細解答。

具體章節如下:

  • 引言
  • 第一章 正規表示式字元匹配攻略
  • 第二章 正規表示式位置匹配攻略
  • 第三章 正規表示式括號的作用
  • 第四章 正規表示式回溯法原理
  • 第五章 正規表示式的拆分
  • 第六章 正規表示式的構建
  • 第七章 正規表示式程式設計
  • 後記

下面簡單地說說每一章都討論了什麼?

正則是匹配模式,要麼匹配字元,要麼匹配位置。

第1章和第2章以這個角度去講解了正則的基礎。

在正則中可以使用括號捕獲資料,要麼在API中進行分組引用,要麼在正則裡進行反向引用。

這是第3章的主題,講解了正則中括號的作用。

學習正規表示式,是需要了解其匹配原理的。

第4章,講解了正則了正規表示式的回溯法原理。另外在第6章裡,也講解了正則的表示式的整體工作原理。

不僅能看懂別人的正則,還要自己會寫正則。

第5章,是從讀的角度,去拆分一個正規表示式,而第6章是從寫的角度,去構建一個正規表示式。

學習正則,是為了在真實世界裡應用的。

第7章講解了正則的用法,和相關API需要注意的地方。

如何閱讀本文?

我的建議是閱讀兩遍。第一遍,不求甚解地快速閱讀一遍。閱讀過程中遇到的問題不妨記錄下來,也許閱讀完畢後就能解決很多。然後有時間的話,再帶著問題去精讀第二遍。

深呼吸,開始我們的正規表示式旅程吧。我在終點等你。

第一章 正規表示式字元匹配攻略

正規表示式是匹配模式,要麼匹配字元,要麼匹配位置。請記住這句話。

然而關於正則如何匹配字元的學習,大部分人都覺得這塊比較雜亂。

畢竟元字元太多了,看起來沒有系統性,不好記。本章就解決這個問題。

內容包括:

  1. 兩種模糊匹配
  2. 字元組
  3. 量詞
  4. 分支結構
  5. 案例分析

1 兩種模糊匹配

如果正則只有精確匹配是沒多大意義的,比如/hello/,也只能匹配字串中的"hello"這個子串。

var regex = /hello/;
console.log( regex.test("hello") ); 
// => true

正規表示式之所以強大,是因為其能實現模糊匹配。

而模糊匹配,有兩個方向上的“模糊”:橫向模糊和縱向模糊。

1.1 橫向模糊匹配

橫向模糊指的是,一個正則可匹配的字串的長度不是固定的,可以是多種情況的。

其實現的方式是使用量詞。譬如{m,n},表示連續出現最少m次,最多n次。

比如/ab{2,5}c/表示匹配這樣一個字串:第一個字元是“a”,接下來是2到5個字元“b”,最後是字元“c”。測試如下:

var regex = /ab{2,5}c/g;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log( string.match(regex) ); 
// => ["abbc", "abbbc", "abbbbc", "abbbbbc"]

注意:案例中用的正則是/ab{2,5}c/g,後面多了g,它是正則的一個修飾符。表示全域性匹配,即在目標字串中按順序找到滿足匹配模式的所有子串,強調的是“所有”,而不只是“第一個”。g是單詞global的首字母。

1.2 縱向模糊匹配

縱向模糊指的是,一個正則匹配的字串,具體到某一位字元時,它可以不是某個確定的字元,可以有多種可能。

其實現的方式是使用字元組。譬如[abc],表示該字元是可以字元“a”、“b”、“c”中的任何一個。

比如/a[123]b/可以匹配如下三種字串:"a1b"、"a2b"、"a3b"。測試如下:

var regex = /a[123]b/g;
var string = "a0b a1b a2b a3b a4b";
console.log( string.match(regex) ); 
// => ["a1b", "a2b", "a3b"]

以上就是本章講的主體內容,只要掌握橫向和縱向模糊匹配,就能解決很大部分正則匹配問題。

接下來的內容就是展開說了,如果對此都比較熟悉的話,可以跳過,直接看本章案例那節。

2. 字元組

需要強調的是,雖叫字元組(字元類),但只是其中一個字元。例如[abc],表示匹配一個字元,它可以是“a”、“b”、“c”之一。

2.1 範圍表示法

如果字元組裡的字元特別多的話,怎麼辦?可以使用範圍表示法。

比如[123456abcdefGHIJKLM],可以寫成[1-6a-fG-M]。用連字元-來省略和簡寫。

因為連字元有特殊用途,那麼要匹配“a”、“-”、“z”這三者中任意一個字元,該怎麼做呢?

不能寫成[a-z],因為其表示小寫字元中的任何一個字元。

可以寫成如下的方式:[-az][az-][a\-z]。即要麼放在開頭,要麼放在結尾,要麼轉義。總之不會讓引擎認為是範圍表示法就行了。

2.2 排除字元組

縱向模糊匹配,還有一種情形就是,某位字元可以是任何東西,但就不能是"a"、"b"、"c"

此時就是排除字元組(反義字元組)的概念。例如[^abc],表示是一個除"a"、"b"、"c"之外的任意一個字元。字元組的第一位放^(脫字元),表示求反的概念。

當然,也有相應的範圍表示法。

2.3 常見的簡寫形式

有了字元組的概念後,一些常見的符號我們也就理解了。因為它們都是系統自帶的簡寫形式。

\d就是[0-9]。表示是一位數字。記憶方式:其英文是digit(數字)。

\D就是[^0-9]。表示除數字外的任意字元。

\w就是[0-9a-zA-Z_]。表示數字、大小寫字母和下劃線。記憶方式:w是word的簡寫,也稱單詞字元。

\W[^0-9a-zA-Z_]。非單詞字元。

\s[ \t\v\n\r\f]。表示空白符,包括空格、水平製表符、垂直製表符、換行符、回車符、換頁符。記憶方式:s是space character的首字母。

\S[^ \t\v\n\r\f]。 非空白符。

.就是[^\n\r\u2028\u2029]。萬用字元,表示幾乎任意字元。換行符、回車符、行分隔符和段分隔符除外。記憶方式:想想省略號...中的每個點,都可以理解成佔位符,表示任何類似的東西。

如果要匹配任意字元怎麼辦?可以使用[\d\D][\w\W][\s\S][^]中任何的一個。

3. 量詞

量詞也稱重複。掌握{m,n}的準確含義後,只需要記住一些簡寫形式。

3.1 簡寫形式

{m,} 表示至少出現m次。

{m} 等價於{m,m},表示出現m次。

? 等價於{0,1},表示出現或者不出現。記憶方式:問號的意思表示,有嗎?

+ 等價於{1,},表示出現至少一次。記憶方式:加號是追加的意思,得先有一個,然後才考慮追加。

* 等價於{0,},表示出現任意次,有可能不出現。記憶方式:看看天上的星星,可能一顆沒有,可能零散有幾顆,可能數也數不過來。

3.2 貪婪匹配和惰性匹配

看如下的例子:

var regex = /\d{2,5}/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) ); 
// => ["123", "1234", "12345", "12345"]

其中正則/\d{2,5}/,表示數字連續出現2到5次。會匹配2位、3位、4位、5位連續數字。

但是其是貪婪的,它會盡可能多的匹配。你能給我6個,我就要5個。你能給我3個,我就3要個。反正只要在能力範圍內,越多越好。

我們知道有時貪婪不是一件好事(請看文章最後一個例子)。而惰性匹配,就是儘可能少的匹配:

var regex = /\d{2,5}?/g;
var string = "123 1234 12345 123456";
console.log( string.match(regex) ); 
// => ["12", "12", "34", "12", "34", "12", "34", "56"]

其中/\d{2,5}?/表示,雖然2到5次都行,當2個就夠的時候,就不在往下嘗試了。

通過在量詞後面加個問號就能實現惰性匹配,因此所有惰性匹配情形如下:

{m,n}?
{m,}?
??
+?
*?

對惰性匹配的記憶方式是:量詞後面加個問號,問一問你知足了嗎,你很貪婪嗎?

4. 多選分支

一個模式可以實現橫向和縱向模糊匹配。而多選分支可以支援多個子模式任選其一。

具體形式如下:(p1|p2|p3),其中p1p2p3是子模式,用|(管道符)分隔,表示其中任何之一。

例如要匹配"good""nice"可以使用/good|nice/。測試如下:

var regex = /good|nice/g;
var string = "good idea, nice try.";
console.log( string.match(regex) ); 
// => ["good", "nice"]

但有個事實我們應該注意,比如我用/good|goodbye/,去匹配"goodbye"字串時,結果是"good"

var regex = /good|goodbye/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["good"]

而把正則改成/goodbye|good/,結果是:

var regex = /goodbye|good/g;
var string = "goodbye";
console.log( string.match(regex) ); 
// => ["goodbye"]

也就是說,分支結構也是惰性的,即當前面的匹配上了,後面的就不再嘗試了。

5. 案例分析

匹配字元,無非就是字元組、量詞和分支結構的組合使用罷了。

下面找幾個例子演練一下(其中,每個正則並不是只有唯一寫法):

5.1 匹配16進位制顏色值

要求匹配:

#ffbbad

#Fc01DF

#FFF

#ffE

分析:

表示一個16進位制字元,可以用字元組[0-9a-fA-F]

其中字元可以出現3或6次,需要是用量詞和分支結構。

使用分支結構時,需要注意順序。

正則如下:

var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g;
var string = "#ffbbad #Fc01DF #FFF #ffE";
console.log( string.match(regex) ); 
// => ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]

5.2 匹配時間

以24小時製為例。

要求匹配:

23:59

02:07

分析:

共4位數字,第一位數字可以為[0-2]

當第1位為2時,第2位可以為[0-3],其他情況時,第2位為[0-9]

第3位數字為[0-5],第4位為[0-9]

正則如下:

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/;
console.log( regex.test("23:59") ); 
console.log( regex.test("02:07") ); 
// => true
// => true

如果也要求匹配7:9,也就是說時分前面的0可以省略。

此時正則變成:

var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/;
console.log( regex.test("23:59") ); 
console.log( regex.test("02:07") ); 
console.log( regex.test("7:9") ); 
// => true
// => true
// => true

5.3 匹配日期

比如yyyy-mm-dd格式為例。

要求匹配:

2017-06-10

分析:

年,四位數字即可,可用[0-9]{4}

月,共12個月,分兩種情況01、02、……、09和10、11、12,可用(0[1-9]|1[0-2])

日,最大31天,可用(0[1-9]|[12][0-9]|3[01])

正則如下:

var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/;
console.log( regex.test("2017-06-10") ); 
// => true

5.4 window作業系統檔案路徑

要求匹配:

F:\study\javascript\regex\regular expression.pdf

F:\study\javascript\regex\

F:\study\javascript

F:\

分析:

整體模式是: 碟符:\資料夾\資料夾\資料夾\

其中匹配F:\,需要使用[a-zA-Z]:\\,其中碟符不區分大小寫,注意\字元需要轉義。

檔名或者資料夾名,不能包含一些特殊字元,此時我們需要排除字元組[^\\:*<>|"?\r\n/]來表示合法字元。另外不能為空名,至少有一個字元,也就是要使用量詞+。因此匹配“資料夾\”,可用[^\\:*<>|"?\r\n/]+\\

另外“資料夾\”,可以出現任意次。也就是([^\\:*<>|"?\r\n/]+\\)*。其中括號提供子表示式。

路徑的最後一部分可以是“資料夾”,沒有\,因此需要新增([^\\:*<>|"?\r\n/]+)?

最後拼接成了一個看起來比較複雜的正則:

var regex = /^[a-zA-Z]:\\([^\\:*<>|"?\r\n/]+\\)*([^\\:*<>|"?\r\n/]+)?$/;
console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") ); 
console.log( regex.test("F:\\study\\javascript\\regex\\") ); 
console.log( regex.test("F:\\study\\javascript") ); 
console.log( regex.test("F:\\") ); 
// => true
// => true
// => true
// => true

其中,JS中字串表示\時,也要轉義。

5.5 匹配id

要求從

<div id="container" class="main"></div>

提取出id="container"。

可能最開始想到的正則是:

var regex = /id=".*"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container" class="main"

因為.是萬用字元,本身就匹配雙引號的,而量詞*又是貪婪的,當遇到container後面雙引號時,不會停下來,會繼續匹配,直到遇到最後一個雙引號為止。

解決之道,可以使用惰性匹配:

var regex = /id=".*?"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

當然,這樣也會有個問題。效率比較低,因為其匹配原理會涉及到“回溯”這個概念(這裡也只是順便提一下,第四章會詳細說明)。可以優化如下:

var regex = /id="[^"]*"/
var string = '<div id="container" class="main"></div>';
console.log(string.match(regex)[0]); 
// => id="container"

第1章 小結

字元匹配相關的案例,挺多的,不一而足。

掌握字元組和量詞就能解決大部分常見的情形,也就是說,當你會了這二者,JS正則算是入門了。

第二章 正規表示式位置匹配攻略

正規表示式是匹配模式,要麼匹配字元,要麼匹配位置。請記住這句話。

然而大部分人學習正則時,對於匹配位置的重視程度沒有那麼高。

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

內容包括:

  1. 什麼是位置?
  2. 如何匹配位置?
  3. 位置的特性
  4. 幾個應用例項分析

1. 什麼是位置呢?

位置是相鄰字元之間的位置。比如,下圖中箭頭所指的地方:

img

2. 如何匹配位置呢?

ES5中,共有6個錨字元:

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

2.1 ^和$

^(脫字元)匹配開頭,在多行匹配中匹配行開頭。

$(美元符號)匹配結尾,在多行匹配中匹配行結尾。

比如我們把字串的開頭和結尾用"#"替換(位置可以替換成字元的!):

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

多行匹配模式時,二者是行的概念,這個需要我們的注意:

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

2.2 \b和\B

\b是單詞邊界,具體就是\w\W之間的位置,也包括\w^之間的位置,也包括\w$之間的位置。

比如一個檔名是"[JS] Lesson_01.mp4"中的\b,如下:

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

為什麼是這樣呢?這需要仔細看看。

首先,我們知道,\w是字元組[0-9a-zA-Z_]的簡寫形式,即\w是字母數字或者下劃線的中任何一個字元。而\W是排除字元組[^0-9a-zA-Z_]的簡寫形式,即\W\w以外的任何一個字元。

此時我們可以看看"[#JS#] #Lesson_01#.#mp4#"中的每一個"#",是怎麼來的。

  • 第一個"#",兩邊是"["與"J",是\W\w之間的位置。
  • 第二個"#",兩邊是"S"與"]",也就是\w\W之間的位置。
  • 第三個"#",兩邊是空格與"L",也就是\W\w之間的位置。
  • 第四個"#",兩邊是"1"與".",也就是\w\W之間的位置。
  • 第五個"#",兩邊是"."與"m",也就是\W\w之間的位置。
  • 第六個"#",其對應的位置是結尾,但其前面的字元"4"是\w,即\w$之間的位置。

知道了\b的概念後,那麼\B也就相對好理解了。

\B就是\b的反面的意思,非單詞邊界。例如在字串中所有位置中,扣掉\b,剩下的都是\B的。

具體說來就是\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是一個子模式,即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#"

二者的學名分別是positive lookaheadnegative lookahead

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

ES6中,還支援positive lookbehindnegative lookbehind

具體是(?<=p)(?<!p)

也有書上把這四個東西,翻譯成環視,即看看右邊或看看左邊。

但一般書上,沒有很好強調這四者是個位置。

比如(?=p),一般都理解成:要求接下來的字元與p匹配,但不能包括p的那些字元。

而在本人看來(?=p)就與^一樣好理解,就是p前面的那個位置。

3. 位置的特性

對於位置的理解,我們可以理解成空字元""

比如"hello"字串等價於如下的形式:

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

也等價於:

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

因此,把/^hello$/寫成/^^hello?$/,是沒有任何問題的:

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

甚至可以寫成更復雜的:

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

也就是說字元之間的位置,可以寫成多個。

把位置理解空字元,是對位置非常有效的理解方式。

4. 相關案例

4.1 不匹配任何東西的正則

讓你寫個正則不匹配任何東西

easy,/.^/

因為此正則要求只有一個字元,但該字元後面是開頭。

4.2 數字的千位分隔符表示法

比如把"12345678",變成"12,345,678"

可見是需要把相應的位置替換成","。

思路是什麼呢?

4.2.1 弄出最後一個逗號

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

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

4.2.2 弄出所有的逗號

因為逗號出現的位置,要求後面3個數字一組,也就是\d{3}至少出現一次。

此時可以使用量詞+

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

4.2.3 匹配其餘案例

寫完正則後,要多驗證幾個案例,此時我們會發現問題:

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

因為上面的正則,僅僅表示把從結尾向前數,一但是3的倍數,就把其前面的位置替換成逗號。因此才會出現這個問題。

怎麼解決呢?我們要求匹配的到這個位置不能是開頭。

我們知道匹配開頭可以使用^,但要求這個位置不是開頭怎麼辦?

easy,(?!^),你想到了嗎?測試如下:

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"

此時我們需要修改正則,把裡面的開頭^和結尾$,替換成\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)怎麼理解呢?

要求當前是一個位置,但不是\b前面的位置,其實(?!\b)說的就是\B

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

4.3 驗證密碼問題

密碼長度6-12位,由數字、小寫字元和大寫字母組成,但必須至少包括2種字元。

此題,如果寫成多個正則來判斷,比較容易。但要寫成一個正則就比較困難。

那麼,我們就來挑戰一下。看看我們對位置的理解是否深刻。

4.3.1 簡化

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

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

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

假設,要求的必須包含數字,怎麼辦?此時我們可以使用(?=.*[0-9])來做。

因此正則變成:

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

4.3.3 同時包含具體兩種字元

比如同時包含數字和小寫字母,可以用(?=.*[0-9])(?=.*[a-z])來做。

因此正則變成:

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

4.3.4 解答

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

  1. 同時包含數字和小寫字母
  2. 同時包含數字和大寫字母
  3. 同時包含小寫字母和大寫字母
  4. 同時包含數字、小寫字母和大寫字母

以上的4種情況是或的關係(實際上,可以不用第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 全是數字
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 大寫字母和數字
console.log( reg.test("abcdEF234") ); // true 三者都有

4.3.5 解惑

上面的正則看起來比較複雜,只要理解了第二步,其餘就全部理解了。

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

對於這個正則,我們只需要弄明白(?=.*[0-9])^即可。

分開來看就是(?=.*[0-9])^

表示開頭前面還有個位置(當然也是開頭,即同一個位置,想想之前的空字元類比)。

(?=.*[0-9])表示該位置後面的字元匹配.*[0-9],即,有任何多個任意字元,後面再跟個數字。

翻譯成大白話,就是從開頭算起接下來的字元,必須包含個數字。

注意:^一定是需要的,不然就不是從開頭算起任意個字元後跟個數字,就無法控制整體字元個數,比如反面例子:

// 有^
var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("ABCDEFGH1234") ); // ture
console.log( reg.test("ABCDEFGH12345") ); // false

// 沒有^
var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;
console.log( reg.test("ABCDEFGH1234") ); // ture
console.log( reg.test("ABCDEFGH12345") ); // ture

4.3.6 另外一種解法

“至少包含兩種字元”的意思就是說,不能全部都是數字,也不能全部都是小寫字母,也不能全部都是大寫字母。

那麼要求“不能全部都是數字”,怎麼做呢?(?!p)出馬!

對應的正則是:

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 全是數字
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 大寫字母和數字
console.log( reg.test("abcdEF234") ); // true 三者都有

第二章小結

位置匹配相關的案例,挺多的,不一而足。

掌握匹配位置的這6個錨字元,給我們解決正則問題一個新工具。

第三章 正規表示式括號的作用

不管哪門語言中都有括號。正規表示式也是一門語言,而括號的存在使這門語言更為強大。

對括號的使用是否得心應手,是衡量對正則的掌握水平的一個側面標準。

括號的作用,其實三言兩語就能說明白,括號提供了分組,便於我們引用它。

引用某個分組,會有兩種情形:在JavaScript裡引用它,在正規表示式裡引用它。

本章內容雖相對簡單,但我也要寫長點。

內容包括:

  1. 分組和分支結構
  2. 捕獲分組
  3. 反向引用
  4. 非捕獲分組
  5. 相關案例

1. 分組和分支結構

這二者是括號最直覺的作用,也是最原始的功能。

1.1 分組

我們知道/a+/匹配連續出現的“a”,而要匹配連續出現的“ab”時,需要使用/(ab)+/

其中括號是提供分組功能,使量詞+作用於“ab”這個整體,測試如下:

var regex = /(ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); 
// => ["abab", "ab", "ababab"]

1.2 分支結構

而在多選分支結構(p1|p2)中,此處括號的作用也是不言而喻的,提供了子表示式的所有可能。

比如,要匹配如下的字串:

I love JavaScript

I love Regular Expression

可以使用正則:

var regex = /^I love (JavaScript|Regular Expression)$/;
console.log( regex.test("I love JavaScript") );
console.log( regex.test("I love Regular Expression") );
// => true
// => true

如果去掉正則中的括號,即/^I love JavaScript|Regular Expression$/,匹配字串是"I love JavaScript""Regular Expression",當然這不是我們想要的。

2. 引用分組

這是括號一個重要的作用,有了它,我們就可以進行資料提取,以及更強大的替換操作。

而要使用它帶來的好處,必須配合使用實現環境的API。

以日期為例。假設格式是yyyy-mm-dd的,我們可以先寫一個簡單的正則:

var regex = /\d{4}-\d{2}-\d{2}/;

然後再修改成括號版的:

var regex = /(\d{4})-(\d{2})-(\d{2})/;

為什麼要使用這個正則呢?

2.1 提取資料

比如提取出年、月、日,可以這麼做:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( string.match(regex) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

match返回的一個陣列,第一個元素是整體匹配結果,然後是各個分組(括號裡)匹配的內容,然後是匹配下標,最後是輸入的文字。(注意:如果正則是否有修飾符gmatch返回的陣列格式是不一樣的)。

另外也可以使用正則物件的exec方法:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
console.log( regex.exec(string) ); 
// => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同時,也可以使用建構函式的全域性屬性$1$9來獲取:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";

regex.test(string); // 正則操作即可,例如
//regex.exec(string);
//string.match(regex);

console.log(RegExp.$1); // "2017"
console.log(RegExp.$2); // "06"
console.log(RegExp.$3); // "12"

2.2 替換

比如,想把yyyy-mm-dd格式,替換成mm/dd/yyyy怎麼做?

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, "$2/$3/$1");
console.log(result); 
// => "06/12/2017"

其中replace中的,第二個引數裡用$1$2$3指代相應的分組。等價於如下的形式:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function() {
    return RegExp.$2 + "/" + RegExp.$3 + "/" + RegExp.$1;
});
console.log(result); 
// => "06/12/2017"

也等價於:

var regex = /(\d{4})-(\d{2})-(\d{2})/;
var string = "2017-06-12";
var result = string.replace(regex, function(match, year, month, day) {
    return month + "/" + day + "/" + year;
});
console.log(result); 
// => "06/12/2017"

3. 反向引用

除了使用相應API來引用分組,也可以在正則本身裡引用分組。但只能引用之前出現的分組,即反向引用。

還是以日期為例。

比如要寫一個正則支援匹配如下三種格式:

2016-06-12

2016/06/12

2016.06.12

最先可能想到的正則是:

var regex = /\d{4}(-|\/|\.)\d{2}(-|\/|\.)\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // true

其中/.需要轉義。雖然匹配了要求的情況,但也匹配"2016-06/12"這樣的資料。

假設我們想要求分割符前後一致怎麼辦?此時需要使用反向引用:

var regex = /\d{4}(-|\/|\.)\d{2}\1\d{2}/;
var string1 = "2017-06-12";
var string2 = "2017/06/12";
var string3 = "2017.06.12";
var string4 = "2016-06/12";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // true
console.log( regex.test(string4) ); // false

注意裡面的\1,表示的引用之前的那個分組(-|\/|\.)。不管它匹配到什麼(比如-),\1都匹配那個同樣的具體某個字元。

我們知道了\1的含義後,那麼\2\3的概念也就理解了,即分別指代第二個和第三個分組。

看到這裡,此時,恐怕你會有三個問題。

3.1 括號巢狀怎麼辦?

以左括號(開括號)為準。比如:

var regex = /^((\d)(\d(\d)))\1\2\3\4$/;
var string = "1231231233";
console.log( regex.test(string) ); // true
console.log( RegExp.$1 ); // 123
console.log( RegExp.$2 ); // 1
console.log( RegExp.$3 ); // 23
console.log( RegExp.$4 ); // 3

我們可以看看這個正則匹配模式:

  • 第一個字元是數字,比如說1,
  • 第二個字元是數字,比如說2,
  • 第三個字元是數字,比如說3,
  • 接下來的是\1,是第一個分組內容,那麼看第一個開括號對應的分組是什麼,是123,
  • 接下來的是\2,找到第2個開括號,對應的分組,匹配的內容是1,
  • 接下來的是\3,找到第3個開括號,對應的分組,匹配的內容是23,
  • 最後的是\4,找到第3個開括號,對應的分組,匹配的內容是3。

這個問題,估計仔細看一下,就該明白了。

3.2 \10表示什麼呢?

另外一個疑問可能是,即\10是表示第10個分組,還是\10呢?

答案是前者,雖然一個正則裡出現\10比較罕見。測試如下:

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/;
var string = "123456789# ######"
console.log( regex.test(string) );
// => true

3.3 引用不存在的分組會怎樣?

因為反向引用,是引用前面的分組,但我們在正則裡引用了不存在的分組時,此時正則不會報錯,只是匹配反向引用的字元本身。例如\2,就匹配"\2"。注意"\2"表示對"2"進行了轉意。

var regex = /\1\2\3\4\5\6\7\8\9/;
console.log( regex.test("\1\2\3\4\5\6\7\8\9") ); 
console.log( "\1\2\3\4\5\6\7\8\9".split("") );

chrome瀏覽器列印的結果:

img

4. 非捕獲分組

之前文中出現的分組,都會捕獲它們匹配到的資料,以便後續引用,因此也稱他們是捕獲型分組。

如果只想要括號最原始的功能,但不會引用它,即,既不在API裡引用,也不在正則裡反向引用。此時可以使用非捕獲分組(?:p),例如本文第一個例子可以修改為:

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) ); 
// => ["abab", "ab", "ababab"]

5. 相關案例

至此括號的作用已經講完了,總結一句話,就是提供了可供我們使用的分組,如何用就看我們的了。

5.1 字串trim方法模擬

trim方法是去掉字串的開頭和結尾的空白符。有兩種思路去做。

第一種,匹配到開頭和結尾的空白符,然後替換成空字元。如:

function trim(str) {
    return str.replace(/^\s+|\s+$/g, '');
}
console.log( trim("  foobar   ") ); 
// => "foobar"

第二種,匹配整個字串,然後用引用來提取出相應的資料:

function trim(str) {
    return str.replace(/^\s*(.*?)\s*$/g, "$1");
}
console.log( trim("  foobar   ") ); 
// => "foobar"

這裡使用了惰性匹配*?,不然也會匹配最後一個空格之前的所有空格的。

當然,前者效率高。

5.2 將每個單詞的首字母轉換為大寫

function titleize(str) {
    return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {
        return c.toUpperCase();
    });
}
console.log( titleize('my name is epeli') ); 
// => "My Name Is Epeli"

思路是找到每個單詞的首字母,當然這裡不使用非捕獲匹配也是可以的。

5.3 駝峰化

function camelize(str) {
    return str.replace(/[-_\s]+(.)?/g, function(match, c) {
        return c ? c.toUpperCase() : '';
    });
}
console.log( camelize('-moz-transform') ); 
// => "MozTransform"

其中分組(.)表示首字母。單詞的界定是,前面的字元可以是多個連字元、下劃線以及空白符。正則後面的?的目的,是為了應對str尾部的字元可能不是單詞字元,比如str'-moz-transform'

5.4 中劃線化

function dasherize(str) {
    return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase();
}
console.log( dasherize('MozTransform') ); 
// => "-moz-transform"

駝峰化的逆過程。

5.5 html轉義和反轉義

// 將HTML特殊字元轉換成等值的實體
function escapeHTML(str) {
    var escapeChars = {
      '¢' : 'cent',
      '£' : 'pound',
      '¥' : 'yen',
      '€': 'euro',
      '©' :'copy',
      '®' : 'reg',
      '<' : 'lt',
      '>' : 'gt',
      '"' : 'quot',
      '&' : 'amp',
      '\'' : '#39'
    };
    return str.replace(new RegExp('[' + Object.keys(escapeChars).join('') +']', 'g'),         function(match) {
            return '&' + escapeChars[match] + ';';
        }
    );
}
console.log( escapeHTML('<div>Blah blah blah</div>') );
// => "&lt;div&gt;Blah blah blah&lt;/div&gt";

其中使用了用建構函式生成的正則,然後替換相應的格式就行了,這個跟本章沒多大關係。

倒是它的逆過程,使用了括號,以便提供引用,也很簡單,如下:

// 實體字元轉換為等值的HTML。
function unescapeHTML(str) {
    var htmlEntities = {
      nbsp: ' ',
      cent: '¢',
      pound: '£',
      yen: '¥',
      euro: '€',
      copy: '©',
      reg: '®',
      lt: '<',
      gt: '>',
      quot: '"',
      amp: '&',
      apos: '\''
    };
    return str.replace(/\&([^;]+);/g, function(match, key) {
        if (key in htmlEntities) {
            return htmlEntities[key];
        }
        return match;
    });
}
console.log( unescapeHTML('&lt;div&gt;Blah blah blah&lt;/div&gt;') );
// => "<div>Blah blah blah</div>"

通過key獲取相應的分組引用,然後作為物件的鍵。

5.6 匹配成對標籤

要求匹配:

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配:

<title>wrong!</p>

匹配一個開標籤,可以使用正則<[^>]+>

匹配一個閉標籤,可以使用<\/[^>]+>

但是要求匹配成對標籤,那就需要使用反向引用,如:

var regex = /<([^>]+)>[\d\D]*<\/\1>/;
var string1 = "<title>regular expression</title>";
var string2 = "<p>laoyao bye bye</p>";
var string3 = "<title>wrong!</p>";
console.log( regex.test(string1) ); // true
console.log( regex.test(string2) ); // true
console.log( regex.test(string3) ); // false

其中開標籤<[^>]+>改成<([^>]+)>,使用括號的目的是為了後面使用反向引用,而提供分組。閉標籤使用了反向引用,<\/\1>

另外[\d\D]的意思是,這個字元是數字或者不是數字,因此,也就是匹配任意字元的意思。

第三章小結

正則中使用括號的例子那可是太多了,不一而足。

重點理解括號可以提供分組,我們可以提取資料,應該就可以了。

例子中的程式碼,基本沒做多少分析,相信你都能看懂的。

第4章 正規表示式回溯法原理

學習正規表示式,是需要懂點兒匹配原理的。

而研究匹配原理時,有兩個字出現的頻率比較高:“回溯”。

聽起來挺高大上,確實還有很多人對此不明不白的。

因此,本章就簡單扼要地說清楚回溯到底是什麼東西。

內容包括:

  1. 沒有回溯的匹配
  2. 有回溯的匹配
  3. 常見的回溯形式

1. 沒有回溯的匹配

假設我們的正則是/ab{1,3}c/,其視覺化形式是:

img

而當目標字串是"abbbc"時,就沒有所謂的“回溯”。其匹配過程是:

img

其中子表示式b{1,3}表示“b”字元連續出現1到3次。

2. 有回溯的匹配

如果目標字串是"abbc",中間就有回溯。

img

圖中第5步有紅顏色,表示匹配不成功。此時b{1,3}已經匹配到了2個字元“b”,準備嘗試第三個時,結果發現接下來的字元是“c”。那麼就認為b{1,3}就已經匹配完畢。然後狀態又回到之前的狀態(即第6步,與第4步一樣),最後再用子表示式c,去匹配字元“c”。當然,此時整個表示式匹配成功了。

圖中的第6步,就是“回溯”。

你可能對此沒有感覺,這裡我們再舉一個例子。正則是:

img

目標字串是"abbbc",匹配過程是:

img

其中第7步和第10步是回溯。第7步與第4步一樣,此時b{1,3}匹配了兩個"b",而第10步與第3步一樣,此時b{1,3}只匹配了一個"b",這也是b{1,3}的最終匹配結果。

這裡再看一個清晰的回溯,正則是:

img

目標字串是:"acd"ef,匹配過程是:

img

圖中省略了嘗試匹配雙引號失敗的過程。可以看出.*是非常影響效率的。

為了減少一些不必要的回溯,可以把正則修改為/"[^"]*"/

3. 常見的回溯形式

正規表示式匹配字串的這種方式,有個學名,叫回溯法。

回溯法也稱試探法,它的基本思想是:從問題的某一種狀態(初始狀態)出發,搜尋從這種狀態出發所能達到的所有“狀態”,當一條路走到“盡頭”的時候(不能再前進),再後退一步或若干步,從另一種可能“狀態”出發,繼續搜尋,直到所有的“路徑”(狀態)都試探過。這種不斷“前進”、不斷“回溯”尋找解的方法,就稱作“回溯法”。(copy於百度百科)。

本質上就是深度優先搜尋演算法。其中退到之前的某一步這一過程,我們稱為“回溯”。從上面的描述過程中,可以看出,路走不通時,就會發生“回溯”。即,嘗試匹配失敗時,接下來的一步通常就是回溯。

道理,我們是懂了。那麼JS中正規表示式會產生回溯的地方都有哪些呢?

3.1 貪婪量詞

之前的例子都是貪婪量詞相關的。比如b{1,3},因為其是貪婪的,嘗試可能的順序是從多往少的方向去嘗試。首先會嘗試"bbb",然後再看整個正則是否能匹配。不能匹配時,吐出一個"b",即在"bb"的基礎上,再繼續嘗試。如果還不行,再吐出一個,再試。如果還不行呢?只能說明匹配失敗了。

雖然區域性匹配是貪婪的,但也要滿足整體能正確匹配。否則,皮之不存,毛將焉附?

此時我們不禁會問,如果當多個貪婪量詞挨著存在,並相互有衝突時,此時會是怎樣?

答案是,先下手為強!因為深度優先搜尋。測試如下:

var string = "12345";
var regex = /(\d{1,3})(\d{1,3})/;
console.log( string.match(regex) );
// => ["12345", "123", "45", index: 0, input: "12345"]

其中,前面的\d{1,3}匹配的是"123",後面的\d{1,3}匹配的是"45"。

3.2 惰性量詞

惰性量詞就是在貪婪量詞後面加個問號。表示儘可能少的匹配,比如:

var string = "12345";
var regex = /(\d{1,3}?)(\d{1,3})/;
console.log( string.match(regex) );
// => ["1234", "1", "234", index: 0, input: "12345"]

其中\d{1,3}?只匹配到一個字元"1",而後面的\d{1,3}匹配了"234"。

雖然惰性量詞不貪,但也會有回溯的現象。比如正則是:

img

目標字串是"12345",匹配過程是:

img

知道你不貪、很知足,但是為了整體匹配成,沒辦法,也只能給你多塞點了。因此最後\d{1,3}?匹配的字元是"12",是兩個數字,而不是一個。

3.3 分支結構

我們知道分支也是惰性的,比如/can|candy/,去匹配字串"candy",得到的結果是"can",因為分支會一個一個嘗試,如果前面的滿足了,後面就不會再試驗了。

分支結構,可能前面的子模式會形成了區域性匹配,如果接下來表示式整體不匹配時,仍會繼續嘗試剩下的分支。這種嘗試也可以看成一種回溯。

比如正則:

img

目標字串是"candy",匹配過程:

img

上面第5步,雖然沒有回到之前的狀態,但仍然回到了分支結構,嘗試下一種可能。所以,可以認為它是一種回溯的。

第四章小結

其實回溯法,很容易掌握的。

簡單總結就是,正因為有多種可能,所以要一個一個試。直到,要麼到某一步時,整體匹配成功了;要麼最後都試完後,發現整體匹配不成功。

  1. 貪婪量詞“試”的策略是:買衣服砍價。價錢太高了,便宜點,不行,再便宜點。
  2. 惰性量詞“試”的策略是:賣東西加價。給少了,再多給點行不,還有點少啊,再給點。
  3. 分支結構“試”的策略是:貨比三家。這家不行,換一家吧,還不行,再換。

既然有回溯的過程,那麼匹配效率肯定低一些。相對誰呢?相對那些DFA引擎。

而JS的正則引擎是NFA,NFA是“非確定型有限自動機”的簡寫。

大部分語言中的正則都是NFA,為啥它這麼流行呢?

答:你別看我匹配慢,但是我編譯快啊,而且我還有趣哦。

第5章 正規表示式的拆分

對於一門語言的掌握程度怎麼樣,可以有兩個角度來衡量:讀和寫。

不僅要求自己能解決問題,還要看懂別人的解決方案。程式碼是這樣,正規表示式也是這樣。

正則這門語言跟其他語言有一點不同,它通常就是一大堆字元,而沒有所謂“語句”的概念。

如何能正確地把一大串正則拆分成一塊一塊的,成為了破解“天書”的關鍵。

本章就解決這一問題,內容包括:

  1. 結構和操作符
  2. 注意要點
  3. 案例分析

1. 結構和操作符

程式語言一般都有操作符。只要有操作符,就會出現一個問題。當一大堆操作在一起時,先操作誰,又後操作誰呢?為了不產生歧義,就需要語言本身定義好操作順序,即所謂的優先順序。

而在正規表示式中,操作符都體現在結構中,即由特殊字元和普通字元所代表的一個個特殊整體。

JS正規表示式中,都有哪些結構呢?

字元字面量、字元組、量詞、錨字元、分組、選擇分支、反向引用。

具體含義簡要回顧如下(如懂,可以略去不看):

字面量,匹配一個具體字元,包括不用轉義的和需要轉義的。比如a匹配字元"a",又比如\n匹配換行符,又比如\.匹配小數點。

字元組,匹配一個字元,可以是多種可能之一,比如[0-9],表示匹配一個數字。也有\d的簡寫形式。另外還有反義字元組,表示可以是除了特定字元之外任何一個字元,比如[^0-9],表示一個非數字字元,也有\D的簡寫形式。

量詞,表示一個字元連續出現,比如a{1,3}表示“a”字元連續出現3次。另外還有常見的簡寫形式,比如a+表示“a”字元連續出現至少一次。

錨點,匹配一個位置,而不是字元。比如^匹配字串的開頭,又比如\b匹配單詞邊界,又比如(?=\d)表示數字前面的位置。

分組,用括號表示一個整體,比如(ab)+,表示"ab"兩個字元連續出現多次,也可以使用非捕獲分組(?:ab)+

分支,多個子表示式多選一,比如abc|bcd,表示式匹配"abc"或者"bcd"字元子串。

反向引用,比如\2,表示引用第2個分組。

其中涉及到的操作符有:

1.轉義符 \
2.括號和方括號 (...)(?:...)(?=...)(?!...)[...]
3.量詞限定符 {m}{m,n}{m,}?*+
4.位置和序列 ^$\元字元一般字元
\5. 管道符(豎槓)|

上面操作符的優先順序從上至下,由高到低。

這裡,我們來分析一個正則:

/ab?(c|de*)+|fg/
  1. 由於括號的存在,所以,(c|de*)是一個整體結構。
  2. (c|de*)中,注意其中的量詞*,因此e*是一個整體結構。
  3. 又因為分支結構“|”優先順序最低,因此c是一個整體、而de*是另一個整體。
  4. 同理,整個正則分成了 ab?(...)+fg。而由於分支的原因,又可以分成ab?(c|de*)+fg這兩部分。

希望你沒被我繞暈,上面的分析可用其視覺化形式描述如下:

img

2. 注意要點

關於結構和操作符,還是有幾點需要強調:

2.1 匹配字串整體問題

因為是要匹配整個字串,我們經常會在正則前後中加上錨字元^$

比如要匹配目標字串"abc"或者"bcd"時,如果一不小心,就會寫成/^abc|bcd$/

而位置字元和字元序列優先順序要比豎槓高,故其匹配的結構是:

img

應該修改成:

img

2.2 量詞連綴問題

假設,要匹配這樣的字串:

\1. 每個字元為a、b、c任選其一

\2. 字串的長度是3的倍數

此時正則不能想當然地寫成/^[abc]{3}+$/,這樣會報錯,說+前面沒什麼可重複的:

img

此時要修改成:

img

2.3 元字元轉義問題

所謂元字元,就是正則中有特殊含義的字元。

所有結構裡,用到的元字元總結如下:

^ $ . * + ? | \ / ( ) [ ] { } = ! : - ,

當匹配上面的字元本身時,可以一律轉義:

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/;
console.log( regex.test(string) ); 
// => true

其中string中的\字元也要轉義的。

另外,在string中,也可以把每個字元轉義,當然,轉義後的結果仍是本身:

var string = "^$.*+?|\\/[]{}=!:-,";
var string2 = "\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,";
console.log( string == string2 ); 
// => true

現在的問題是,是不是每個字元都需要轉義呢?否,看情況。

2.3.1 字元組中的元字元

跟字元組相關的元字元有[]^-。因此在會引起歧義的地方進行轉義。例如開頭的^必須轉義,不然會把整個字元組,看成反義字元組。

var string = "^$.*+?|\\/[]{}=!:-,";
var regex = /[\^$.*+?|\\/\[\]{}=!:\-,]/g;
console.log( string.match(regex) );
// => ["^", "$", ".", "*", "+", "?", "|", "\", "/", "[", "]", "{", "}", "=", "!", ":", "-", ","]

2.3.2 匹配“[abc]”和“{3,5}”

我們知道[abc],是個字元組。如果要匹配字串"[abc]"時,該怎麼辦?

可以寫成/\[abc\]/,也可以寫成/\[abc]/,測試如下:

var string = "[abc]";
var regex = /\[abc]/g;
console.log( string.match(regex)[0] ); 
// => "[abc]"

只需要在第一個方括號轉義即可,因為後面的方括號構不成字元組,正則不會引發歧義,自然不需要轉義。

同理,要匹配字串"{3,5}",只需要把正則寫成/\{3,5}/即可。

另外,我們知道量詞有簡寫形式{m,},卻沒有{,n}的情況。雖然後者不構成量詞的形式,但此時並不會報錯。當然,匹配的字串也是"{,n}",測試如下:

var string = "{,3}";
var regex = /{,3}/g;
console.log( string.match(regex)[0] ); 
// => "{,3}"

2.3.3 其餘情況

比如= ! : - ,等符號,只要不在特殊結構中,也不需要轉義。

但是,括號需要前後都轉義的,如/\(123\)/

至於剩下的^ $ . * + ? | \ /等字元,只要不在字元組內,都需要轉義的。

3. 案例分析

接下來分析兩個例子,一個簡單的,一個複雜的。

3.1 身份證

正規表示式是:

/^(\d{15}|\d{17}[\dxX])$/

因為豎槓“|”,的優先順序最低,所以正則分成了兩部分\d{15}\d{17}[\dxX]

  • \d{15}表示15位連續數字。
  • \d{17}[\dxX]表示17位連續數字,最後一位可以是數字可以大小寫字母"x"。

視覺化如下:

img

3.2 IPV4地址

正規表示式是:

/^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/

這個正則,看起來非常嚇人。但是熟悉優先順序後,會立馬得出如下的結構:

((...)\.){3}(...)

上面的兩個(...)是一樣的結構。表示匹配的是3位數字。因此整個結構是

3位數.3位數.3位數.3位數

然後再來分析(...)

(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])

它是一個多選結構,分成5個部分:

  • 0{0,2}\d,匹配一位數,包括0補齊的。比如,9、09、009;
  • 0?\d{2},匹配兩位數,包括0補齊的,也包括一位數;
  • 1\d{2},匹配100到199;
  • 2[0-4]\d,匹配200-249;
  • 25[0-5],匹配250-255。

最後來看一下其視覺化形式:

img

第五章小結

掌握正規表示式中的優先順序後,再看任何正則應該都有信心分析下去了。

至於例子,不一而足,沒有寫太多。

這裡稍微總結一下,豎槓的優先順序最低,即最後運算。

只要知道這一點,就能讀懂大部分正則。

另外關於元字元轉義問題,當自己不確定與否時,儘管去轉義,總之是不會錯的。

第6章 正規表示式的構建

對於一門語言的掌握程度怎麼樣,可以有兩個角度來衡量:讀和寫。

不僅要看懂別人的解決方案,也要能獨立地解決問題。程式碼是這樣,正規表示式也是這樣。

與“讀”相比,“寫”往往更為重要,這個道理是不言而喻的。

對正則的運用,首重就是:如何針對問題,構建一個合適的正規表示式?

本章就解決該問題,內容包括:

  1. 平衡法則
  2. 構建正則前提
  3. 準確性
  4. 效率

1. 平衡法則

構建正則有一點非常重要,需要做到下面幾點的平衡:

  1. 匹配預期的字串
  2. 不匹配非預期的字串
  3. 可讀性和可維護性
  4. 效率

2. 構建正則前提

2.1 是否能使用正則

正則太強大了,以至於我們隨便遇到一個操作字串問題時,都會下意識地去想,用正則該怎麼做。但我們始終要提醒自己,正則雖然強大,但不是萬能的,很多看似很簡單的事情,還是做不到的。

比如匹配這樣的字串:1010010001....

雖然很有規律,但是隻靠正則就是無能為力。

2.2 是否有必要使用正則

要認識到正則的侷限,不要去研究根本無法完成的任務。同時,也不能走入另一個極端:無所不用正則。能用字串API解決的簡單問題,就不該正則出馬。

  • 比如,從日期中提取出年月日,雖然可以使用正則:
var string = "2017-07-01";
var regex = /^(\d{4})-(\d{2})-(\d{2})/;
console.log( string.match(regex) );
// => ["2017-07-01", "2017", "07", "01", index: 0, input: "2017-07-01"]

其實,可以使用字串的split方法來做,即可:

var string = "2017-07-01";
var result = string.split("-");
console.log( result );
// => ["2017", "07", "01"]
  • 比如,判斷是否有問號,雖然可以使用:
var string = "?id=xx&act=search";
console.log( string.search(/\?/) );
// => 0

其實,可以使用字串的indexOf方法:

var string = "?id=xx&act=search";
console.log( string.indexOf("?") );
// => 0
  • 比如獲取子串,雖然可以使用正則:
var string = "JavaScript";
console.log( string.match(/.{4}(.+)/)[1] );
// => Script

其實,可以直接使用字串的substringsubstr方法來做:

var string = "JavaScript";
console.log( string.substring(4) );
// => Script

2.3 是否有必要構建一個複雜的正則

比如密碼匹配問題,要求密碼長度6-12位,由數字、小寫字元和大寫字母組成,但必須至少包括2種字元。

在第2章裡,我們寫出了正則是:

/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/

其實可以使用多個小正則來做:

var regex1 = /^[0-9A-Za-z]{6,12}$/;
var regex2 = /^[0-9]{6,12}$/;
var regex3 = /^[A-Z]{6,12}$/;
var regex4 = /^[a-z]{6,12}$/;
function checkPassword(string) {
    if (!regex1.test(string)) return false;
    if (regex2.test(string)) return false;
    if (regex3.test(string)) return false;
    if (regex4.test(string)) return false;
    return true;
}

3. 準確性

所謂準確性,就是能匹配預期的目標,並且不匹配非預期的目標。

這裡提到了“預期”二字,那麼我們就需要知道目標的組成規則。

不然沒法界定什麼樣的目標字串是符合預期的,什麼樣的又不是符合預期的。

下面將舉例說明,當目標字串構成比較複雜時,該如何構建正則,並考慮到哪些平衡。

3.1 匹配固定電話

比如要匹配如下格式的固定電話號碼:

055188888888

0551-88888888

(0551)88888888

第一步,瞭解各部分的模式規則。

上面的電話,總體上分為區號和號碼兩部分(不考慮分機號和+86的情形)。

區號是0開頭的3到4位數字,對應的正則是:0\d{2,3}

號碼是非0開頭的7到8位數字,對應的正則是:[1-9]\d{6,7}

因此,匹配055188888888的正則是:/^0\d{2,3}[1-9]\d{6,7}$/

匹配0551-88888888的正則是:/^0\d{2,3}-[1-9]\d{6,7}$/

匹配(0551)88888888的正則是:/^\(0\d{2,3}\)[1-9]\d{6,7}$/

第二步,明確形式關係。

這三者情形是或的關係,可以構建分支:

/^0\d{2,3}[1-9]\d{6,7}$|^0\d{2,3}-[1-9]\d{6,7}$|^\(0\d{2,3}\)[1-9]\d{6,7}$/

提取公共部分:

/^(0\d{2,3}|0\d{2,3}-|\(0\d{2,3}\))[1-9]\d{6,7}$/

進一步簡寫:

/^(0\d{2,3}-?|\(0\d{2,3}\))[1-9]\d{6,7}$/

其視覺化形式:

img

上面的正則構建過程略顯羅嗦,但是這樣做,能保證正則是準確的。

上述三種情形是或的關係,這一點很重要,不然很容易按字元是否出現的情形把正則寫成:

/^\(?0\d{2,3}\)?-?[1-9]\d{6,7}$/

雖然也能匹配上述目標字串,但也會匹配(0551-88888888這樣的字串。當然,這不是我們想要的。

其實這個正則也不是完美的,因為現實中,並不是每個3位數和4位數都是一個真實的區號。

這就是一個平衡取捨問題,一般夠用就行。

3.2 匹配浮點數

要求匹配如下的格式:

1.23、+1.23、-1.23

10、+10、-10

.2、+.2、-.2

可以看出正則分為三部分。

符號部分:[+-]

整數部分:\d+

小數部分:\.\d+

上述三個部分,並不是全部都出現。如果此時很容易寫出如下的正則:

/^[+-]?(\d+)?(\.\d+)?$/

此正則看似沒問題,但這個正則也會匹配空字元""。

因為目標字串的形式關係不是要求每部分都是可選的。

要匹配1.23、+1.23、-1.23,可以用/^[+-]?\d+\.\d+$/

要匹配10、+10、-10,可以用/^[+-]?\d+$/

要匹配.2、+.2、-.2,可以用/^[+-]?\.\d+$/

因此整個正則是這三者的或的關係,提取公眾部分後是:

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

其視覺化形式是:

img

如果要求不匹配+.2和-.2,此時正則變成:

img

當然,/^[+-]?(\d+\.\d+|\d+|\.\d+)$/也不是完美的,我們也是做了些取捨,比如:

  • 它也會匹配012這樣以0開頭的整數。如果要求不匹配的話,需要修改整數部分的正則。
  • 一般進行驗證操作之前,都要經過trim和判空。那樣的話,也許那個錯誤正則也就夠用了。
  • 也可以進一步改寫成:/^[+-]?(\d+)?(\.)?\d+$/,這樣我們就需要考慮可讀性和可維護性了。

4. 效率

保證了準確性後,才需要是否要考慮要優化。大多數情形是不需要優化的,除非執行的非常慢。什麼情形正規表示式執行才慢呢?我們需要考察正規表示式的執行過程(原理)。

正規表示式的執行分為如下的階段:

  1. 編譯
  2. 設定起始位置
  3. 嘗試匹配
  4. 匹配失敗的話,從下一位開始繼續第3步
  5. 最終結果:匹配成功或失敗

下面以程式碼為例,來看看這幾個階段都做了什麼:

var regex = /\d+/g;
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
console.log( regex.lastIndex, regex.exec("123abc34def") );
// => 0 ["123", index: 0, input: "123abc34def"]
// => 3 ["34", index: 6, input: "123abc34def"]
// => 8 null
// => 0 ["123", index: 0, input: "123abc34def"]

具體分析如下:

var regex = /\d+/g;複製程式碼

當生成一個正則時,引擎會對其進行編譯。報錯與否出現這這個階段。

regex.exec("123abc34def")

當嘗試匹配時,需要確定從哪一位置開始匹配。一般情形都是字串的開頭,即第0位。

但當使用testexec方法,且正則有g時,起始位置是從正則物件的lastIndex屬性開始。

因此第一次exec是從第0位開始,而第二次是從3開始的。

設定好起始位置後,就開始嘗試匹配了。

比如第一次exec,從0開始,去嘗試匹配,並且成功地匹配到3個數字。此時結束時的下標是2,因此下一次的起始位置是3。

而第二次,起始下標是3,但第3個字元是“a”,並不是數字。但此時並不會直接報匹配失敗,而是移動到下一位置,即從第4位開始繼續嘗試匹配,但該字元是b,也不是數字。再移動到下一位,是c仍不行,再移動一位是數字3,此時匹配到了兩位數字34。此時,下一次匹配的位置是d的位置,即第8位。

第三次,是從第8位開始匹配,直到試到最後一位,也沒發現匹配的,因此匹配失敗,返回null。同時設定lastIndex為0,即,如要再嘗試匹配的話,需從頭開始。

從上面可以看出,匹配會出現效率問題,主要出現在上面的第3階段和第4階段。

因此,主要優化手法也是針對這兩階段的。

4.1 使用具體型字元組來代替萬用字元,來消除回溯

而在第三階段,最大的問題就是回溯。

例如,匹配雙引用號之間的字元。如,匹配字串123"abc"456中的"abc"。

如果正則用的是:/".*"/,,會在第3階段產生4次回溯(粉色表示.*匹配的內容):

img

如果正則用的是:/".*?"/,會產生2次回溯(粉色表示.*?匹配的內容):

img

因為回溯的存在,需要引擎儲存多種可能中未嘗試過的狀態,以便後續回溯時使用。註定要佔用一定的記憶體。

此時要使用具體化的字元組,來代替萬用字元.,以便消除不必要的字元,此時使用正則/"[^"]*"/,即可。

4.2 使用非捕獲型分組

因為括號的作用之一是,可以捕獲分組和分支裡的資料。那麼就需要記憶體來儲存它們。

當我們不需要使用分組引用和反向引用時,此時可以使用非捕獲分組。例如:

/^[+-]?(\d+\.\d+|\d+|\.\d+)$/

可以修改成:

/^[+-]?(?:\d+\.\d+|\d+|\.\d+)$/

4.3 獨立出確定字元

例如/a+/,可以修改成/aa*/

因為後者能比前者多確定了字元a。這樣會在第四步中,加快判斷是否匹配失敗,進而加快移位的速度。

4.4 提取分支公共部分

比如/^abc|^def/,修改成/^(?:abc|def)/

又比如/this|that/,修改成/th(?:is|at)/

這樣做,可以減少匹配過程中可消除的重複。

4.5 減少分支的數量,縮小它們的範圍

/red|read/,可以修改成/rea?d/。此時分支和量詞產生的回溯的成本是不一樣的。但這樣優化後,可讀性會降低的。

第六章小結

本章涉及的內容並不多。

一般情況下,針對某問題能寫出一個滿足需求的正則,基本上就可以了。

至於準確性和效率方面的追求,純屬看個人要求了。我覺得夠用就行了。

關於準確性,本章關心的是最常用的解決思路:

針對每種情形,分別寫出正則,然用分支把他們合併在一起,再提取分支公共部分,就能得到準確的正則。

至於優化,本章沒有為了湊數,去寫一大堆。瞭解了匹配原理,常見的優化手法也就這麼幾種。

第七章 正規表示式程式設計

什麼叫知識,能指導我們實踐的東西才叫知識。

學習一樣東西,如果不能使用,最多隻能算作紙上談兵。正規表示式的學習,也不例外。

掌握了正規表示式的語法後,下一步,也是關鍵的一步,就是在真實世界中使用它。

那麼如何使用正規表示式呢?有哪些關鍵的點呢?本章就解決這個問題。

內容包括:

  1. 正規表示式的四種操作
  2. 相關API注意要點
  3. 真實案例

1. 正規表示式的四種操作

正規表示式是匹配模式,不管如何使用正規表示式,萬變不離其宗,都需要先“匹配”。

有了匹配這一基本操作後,才有其他的操作:驗證、切分、提取、替換。

進行任何相關操作,也需要宿主引擎相關API的配合使用。當然,在JS中,相關API也不多。

1.1 驗證

驗證是正規表示式最直接的應用,比如表單驗證。

在說驗證之前,先要說清楚匹配是什麼概念。

所謂匹配,就是看目標字串裡是否有滿足匹配的子串。因此,“匹配”的本質就是“查詢”。

有沒有匹配,是不是匹配上,判斷是否的操作,即稱為“驗證”。

這裡舉一個例子,來看看如何使用相關API進行驗證操作的。

比如,判斷一個字串中是否有數字。

  • 使用search
var regex = /\d/;
var string = "abc123";
console.log( !!~string.search(regex) );
// => true
  • 使用test
var regex = /\d/;
var string = "abc123";
console.log( regex.test(string) );
// => true
  • 使用match
var regex = /\d/;
var string = "abc123";
console.log( !!string.match(regex) );
// => true
  • 使用exec
var regex = /\d/;
var string = "abc123";
console.log( !!regex.exec(string) );
// => true

其中,最常用的是test

1.2 切分

匹配上了,我們就可以進行一些操作,比如切分。

所謂“切分”,就是把目標字串,切成一段一段的。在JS中使用的是split

比如,目標字串是"html,css,javascript",按逗號來切分:

var regex = /,/;
var string = "html,css,javascript";
console.log( string.split(regex) );
// => ["html", "css", "javascript"]
複製程式碼

又比如,如下的日期格式:

2017/06/26

2017.06.26

2017-06-26

可以使用split“切出”年月日:

var regex = /\D/;
console.log( "2017/06/26".split(regex) );
console.log( "2017.06.26".split(regex) );
console.log( "2017-06-26".split(regex) );
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]
// => ["2017", "06", "26"]

1.3 提取

雖然整體匹配上了,但有時需要提取部分匹配的資料。

此時正則通常要使用分組引用(分組捕獲)功能,還需要配合使用相關API

這裡,還是以日期為例,提取出年月日。注意下面正則中的括號:

  • match
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log( string.match(regex) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]
  • exec
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
console.log( regex.exec(string) );
// =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]
  • test
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
regex.test(string);
console.log( RegExp.$1, RegExp.$2, RegExp.$3 );
// => "2017" "06" "26"
  • search
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
string.search(regex);
console.log( RegExp.$1, RegExp.$2, RegExp.$3 );
// => "2017" "06" "26"
  • replace
var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/;
var string = "2017-06-26";
var date = [];
string.replace(regex, function(match, year, month, day) {
    date.push(year, month, day);
});
console.log(date);
// => ["2017", "06", "26"]

其中,最常用的是match

1.4 替換

找,往往不是目的,通常下一步是為了替換。在JS中,使用replace進行替換。

比如把日期格式,從yyyy-mm-dd替換成yyyy/mm/dd

var string = "2017-06-26";
var today = new Date( string.replace(/-/g, "/") );
console.log( today );
// => Mon Jun 26 2017 00:00:00 GMT+0800 (中國標準時間)

這裡只是簡單地應用了一下replace。但,replace方法是強大的,是需要重點掌握的。

2. 相關API注意要點

從上面可以看出用於正則操作的方法,共有6個,字串例項4個,正則例項2個:

String#search

String#split

String#match

String#replace

RegExp#test

RegExp#exec

本文不打算詳細地講解它們的方方面面細節,具體可以參考《JavaScript權威指南》的第三部分。本文重點列出一些容易忽視的地方,以饗讀者。

2.1 search和match的引數問題

我們知道字串例項的那4個方法引數都支援正則和字串。

searchmatch,會把字串轉換為正則的。

var string = "2017.06.27";

console.log( string.search(".") );
// => 0
//需要修改成下列形式之一
console.log( string.search("\\.") );
console.log( string.search(/\./) );
// => 4
// => 4

console.log( string.match(".") );
// => ["2", index: 0, input: "2017.06.27"]
//需要修改成下列形式之一
console.log( string.match("\\.") );
console.log( string.match(/\./) );
// => [".", index: 4, input: "2017.06.27"]
// => [".", index: 4, input: "2017.06.27"]

console.log( string.split(".") );
// => ["2017", "06", "27"]

console.log( string.replace(".", "/") );
// => "2017/06.27"

2.2 match返回結果的格式問題

match返回結果的格式,與正則物件是否有修飾符g有關。

var string = "2017.06.27";
var regex1 = /\b(\d+)\b/;
var regex2 = /\b(\d+)\b/g;
console.log( string.match(regex1) );
console.log( string.match(regex2) );
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => ["2017", "06", "27"]

沒有g,返回的是標準匹配格式,即,陣列的第一個元素是整體匹配的內容,接下來是分組捕獲的內容,然後是整體匹配的第一個下標,最後是輸入的目標字串。

g,返回的是所有匹配的內容。

當沒有匹配時,不管有無g,都返回null

2.3 exec比match更強大

當正則沒有g時,使用match返回的資訊比較多。但是有g後,就沒有關鍵的資訊index了。

exec方法就能解決這個問題,它能接著上一次匹配後繼續匹配:

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
console.log( regex2.exec(string) );
console.log( regex2.lastIndex);
// => ["2017", "2017", index: 0, input: "2017.06.27"]
// => 4
// => ["06", "06", index: 5, input: "2017.06.27"]
// => 7
// => ["27", "27", index: 8, input: "2017.06.27"]
// => 10
// => null
// => 0

其中正則例項lastIndex屬性,表示下一次匹配開始的位置。

比如第一次匹配了“2017”,開始下標是0,共4個字元,因此這次匹配結束的位置是3,下一次開始匹配的位置是4。

從上述程式碼看出,在使用exec時,經常需要配合使用while迴圈:

var string = "2017.06.27";
var regex2 = /\b(\d+)\b/g;
var result;
while ( result = regex2.exec(string) ) {
    console.log( result, regex2.lastIndex );
}
// => ["2017", "2017", index: 0, input: "2017.06.27"] 4
// => ["06", "06", index: 5, input: "2017.06.27"] 7
// => ["27", "27", index: 8, input: "2017.06.27"] 10

2.4 修飾符g,對exex和test的影響

上面提到了正則例項的lastIndex屬性,表示嘗試匹配時,從字串的lastIndex位開始去匹配。

字串的四個方法,每次匹配時,都是從0開始的,即lastIndex屬性始終不變。

而正則例項的兩個方法exectest,當正則是全域性匹配時,每一次匹配完成後,都會修改lastIndex。下面讓我們以test為例,看看你是否會迷糊:

var regex = /a/g;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 1
// => true 3
// => false 0

注意上面程式碼中的第三次呼叫test,因為這一次嘗試匹配,開始從下標lastIndex即3位置處開始查詢,自然就找不到了。

如果沒有g,自然都是從字串第0個字元處開始嘗試匹配:

var regex = /a/;
console.log( regex.test("a"), regex.lastIndex );
console.log( regex.test("aba"), regex.lastIndex );
console.log( regex.test("ababc"), regex.lastIndex );
// => true 0
// => true 0
// => true 0

2.5 test整體匹配時需要使用^和$

這個相對容易理解,因為test是看目標字串中是否有子串匹配正則,即有部分匹配即可。

如果,要整體匹配,正則前後需要新增開頭和結尾:

console.log( /123/.test("a123b") );
// => true
console.log( /^123$/.test("a123b") );
// => false
console.log( /^123$/.test("123") );
// => true

2.6 split相關注意事項

split方法看起來不起眼,但要注意的地方有兩個的。

第一,它可以有第二個引數,表示結果陣列的最大長度:

var string = "html,css,javascript";
console.log( string.split(/,/, 2) );
// =>["html", "css"]

第二,正則使用分組時,結果陣列中是包含分隔符的:

var string = "html,css,javascript";
console.log( string.split(/(,)/) );
// =>["html", ",", "css", ",", "javascript"]

2.7 replace是很強大的

《JavaScript權威指南》認為exec是這6個API中最強大的,而我始終認為replace才是最強大的。因為它也能拿到該拿到的資訊,然後可以假借替換之名,做些其他事情。

總體來說replace有兩種使用形式,這是因為它的第二個引數,可以是字串,也可以是函式。

當第二個引數是字串時,如下的字元有特殊的含義:

$1,$2,...,$99 匹配第1~99個分組裡捕獲的文字
$& 匹配到的子串文字
$` 匹配到的子串的左邊文字
$' 匹配到的子串的右邊文字
? 美元符號

例如,把"2,3,5",變成"5=2+3":

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2");
console.log(result);
// => "5=2+3"

又例如,把"2,3,5",變成"222,333,555":

var result = "2,3,5".replace(/(\d+)/g, "$&$&$&");
console.log(result);
// => "222,333,555"

再例如,把"2+3=5",變成"2+3=2+3=5=5":

var result = "2+3=5".replace(/=/, "$&$`$&$'$&");
console.log(result);
// => "2+3=2+3=5=5"

當第二個引數是函式時,我們需要注意該回撥函式的引數具體是什麼:

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {
    console.log([match, $1, $2, index, input]);
});
// => ["1234", "1", "4", 0, "1234 2345 3456"]
// => ["2345", "2", "5", 5, "1234 2345 3456"]
// => ["3456", "3", "6", 10, "1234 2345 3456"]

此時我們可以看到replace拿到的資訊,並不比exec少。

2.8 使用建構函式需要注意的問題

一般不推薦使用建構函式生成正則,而應該優先使用字面量。因為用建構函式會多寫很多\

var string = "2017-06-27 2017.06.27 2017/06/27";
var regex = /\d{4}(-|\.|\/)\d{2}\1\d{2}/g;
console.log( string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

regex = new RegExp("\\d{4}(-|\\.|\\/)\\d{2}\\1\\d{2}", "g");
console.log( string.match(regex) );
// => ["2017-06-27", "2017.06.27", "2017/06/27"]

2.9 修飾符

ES5中修飾符,共3個:

g 全域性匹配,即找到所有匹配的,單詞是global

i 忽略字母大小寫,單詞ingoreCase

m 多行匹配,隻影響^$,二者變成行的概念,即行開頭和行結尾。單詞是multiline

當然正則物件也有相應的只讀屬性:

var regex = /\w/img;
console.log( regex.global );
console.log( regex.ignoreCase );
console.log( regex.multiline );
// => true
// => true
// => true

2.10 source屬性

正則例項物件屬性,除了globalingnoreCasemultilinelastIndex屬性之外,還有一個source屬性。

它什麼時候有用呢?

比如,在構建動態的正規表示式時,可以通過檢視該屬性,來確認構建出的正則到底是什麼:

var className = "high";
var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
console.log( regex.source )
// => (^|\s)high(\s|$) 即字串"(^|\\s)high(\\s|$)"

2.11 建構函式屬性

建構函式的靜態屬性基於所執行的最近一次正則操作而變化。除了是$1,...,$9之外,還有幾個不太常用的屬性(有相容性問題):

RegExp.input` 最近一次目標字串,簡寫成`RegExp["$_"]`
`RegExp.lastMatch` 最近一次匹配的文字,簡寫成`RegExp["$&"]`
`RegExp.lastParen` 最近一次捕獲的文字,簡寫成`RegExp["$+"]`
`RegExp.leftContext` 目標字串中`lastMatch`之前的文字,簡寫成`RegExp["$`"]`
`RegExp.rightContext `目標字串中`lastMatch`之後的文字,簡寫成`RegExp["$'"]

測試程式碼如下:

var regex = /([abc])(\d)/g;
var string = "a1b2c3d4e5";
string.match(regex);

console.log( RegExp.input );
console.log( RegExp["$_"]);
// => "a1b2c3d4e5"

console.log( RegExp.lastMatch );
console.log( RegExp["$&"] );
// => "c3"

console.log( RegExp.lastParen );
console.log( RegExp["$+"] );
// => "3"

console.log( RegExp.leftContext );
console.log( RegExp["$`"] );
// => "a1b2"

console.log( RegExp.rightContext );
console.log( RegExp["$'"] );
// => "d4e5"

3. 真實案例

3.1 使用建構函式生成正規表示式

我們知道要優先使用字面量來建立正則,但有時正規表示式的主體是不確定的,此時可以使用建構函式來建立。模擬getElementsByClassName方法,就是很能說明該問題的一個例子。

這裡getElementsByClassName函式的實現思路是:

  • 比如要獲取className"high"dom元素;
  • 首先生成一個正則:/(^|\s)high(\s|$)/
  • 然後再用其逐一驗證頁面上的所有dom元素的類名,拿到滿足匹配的元素即可。

程式碼如下(可以直接複製到本地檢視執行效果):

<p class="high">1111</p>
<p class="high">2222</p>
<p>3333</p>
<script>
function getElementsByClassName(className) {
    var elements = document.getElementsByTagName("*");
    var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var result = [];
    for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        if (regex.test(element.className)) {
            result.push(element)
        }
    }
    return result;
}
var highs = getElementsByClassName('high');
highs.forEach(function(item) {
    item.style.color = 'red';
});
</script>

3.2 使用字串儲存資料

一般情況下,我們都願意使用陣列來儲存資料。但我看到有的框架中,使用的卻是字串。

使用時,仍需要把字串切分成陣列。雖然不一定用到正則,但總感覺酷酷的,這裡分享如下:

var utils = {};
"Boolean|Number|String|Function|Array|Date|RegExp|Object|Error".split("|").forEach(function(item) {
    utils["is" + item] = function(obj) {
        return {}.toString.call(obj) == "[object " + item + "]";
    };
});
console.log( utils.isArray([1, 2, 3]) );
// => true

3.3 if語句中使用正則替代&&

比如,模擬ready函式,即載入完畢後再執行回撥(不相容ie的):

var readyRE = /complete|loaded|interactive/;

function ready(callback) {
    if (readyRE.test(document.readyState) && document.body) {
        callback()
    } 
    else {
        document.addEventListener(
            'DOMContentLoaded', 
            function () {
                callback()
            },
            false
        );
    }
};
ready(function() {
    alert("載入完畢!")
});

3.4 使用強大的replace

因為replace方法比較強大,有時用它根本不是為了替換,只是拿其匹配到的資訊來做文章。

這裡以查詢字串(querystring)壓縮技術為例,注意下面replace方法中,回撥函式根本沒有返回任何東西。

function compress(source) {
    var keys = {};
    source.replace(/([^=&]+)=([^&]*)/g, function(full, key, value) {
        keys[key] = (keys[key] ? keys[key] + ',' : '') + value;
    });
    var result = [];
    for (var key in keys) {
        result.push(key + '=' + keys[key]);
    }
    return result.join('&');
}

console.log( compress("a=1&b=2&a=3&b=4") );
// => "a=1,3&b=2,4"

3.5 綜合運用

最後這裡再做個簡單實用的正則測試器。

具體效果如下:img

img

程式碼,直接貼了,相信你能看得懂:

<section>
    <div id="err"></div>
    <input id="regex" placeholder="請輸入正規表示式">
    <input id="text" placeholder="請輸入測試文字">
    <button id="run">測試一下</button>
    <div id="result"></div>
</section>
<style>
section{
    display:flex;
    flex-direction:column;
    justify-content:space-around;
    height:300px;
    padding:0 200px;
}
section *{
    min-height:30px;
}
#err {
    color:red;
}
#result{
    line-height:30px;
}
.info {
    background:#00c5ff;
    padding:2px;
    margin:2px;
    display:inline-block;
}
</style>
<script>
(function() {
    // 獲取相應dom元素
    var regexInput = document.getElementById("regex");
    var textInput = document.getElementById("text");
    var runBtn = document.getElementById("run");
    var errBox = document.getElementById("err");
    var resultBox = document.getElementById("result");
    
    // 繫結點選事件
    runBtn.onclick = function() {
        // 清除錯誤和結果
        errBox.innerHTML = "";
        resultBox.innerHTML = "";
        
        // 獲取正則和文字
        var text = textInput.value;
        var regex = regexInput.value;
        
        if (regex == "") {
            errBox.innerHTML = "請輸入正規表示式";
        } else if (text == "") {
            errBox.innerHTML = "請輸入測試文字";
        } else {
            regex = createRegex(regex);
            if (!regex) return;
            var result, results = [];
            
            // 沒有修飾符g的話,會死迴圈
            if (regex.global) {
                while(result = regex.exec(text)) {
                    results.push(result);
                }
            } else {
                results.push(regex.exec(text));
            }
                        
            if (results[0] == null) {
                resultBox.innerHTML = "匹配到0個結果";
                return;
            }
            
            // 倒序是有必要的
            for (var i = results.length - 1; i >= 0; i--) {
                var result = results[i];
                var match = result[0];
                var prefix = text.substr(0, result.index);
                var suffix = text.substr(result.index + match.length);
                text = prefix 
                    + '<span class="info">'
                    + match
                    + '</span>'
                    + suffix;
            }
            resultBox.innerHTML = "匹配到" + results.length + "個結果:<br>" + text;
        }
    };
    
    // 生成正規表示式,核心函式
    function createRegex(regex) {
        try {
            if (regex[0] == "/") {
                regex = regex.split("/");
                regex.shift();
                var flags = regex.pop();
                regex = regex.join("/");
                regex = new RegExp(regex, flags);
            } else {
                regex = new RegExp(regex, "g");
            }
            return regex;
        } catch(e) {
            errBox.innerHTML = "無效的正規表示式";
            return false;
        }
    }
})();
</script>複製程式碼

第七章小結

相關API的注意點,本章基本上算是一網打盡了。

至於文中的例子,都是點睛之筆,沒有詳細解析。如有理解不透的,建議自己敲一敲。

後記

其實本文首發於:正規表示式系列總結 - 知乎專欄

原文是一個系列。一直等到老姚成為掘金的專欄作者,經過仔細考慮,在掘金平臺沒有采用系列形式,而是合成為了一篇文章。這樣既便於讀者閱讀,最起碼能一氣呵成地閱讀。同時也便於作者統一回復留言。

文章要結束了,最後還要有幾點說明。

1. 需要注意的地方

本文主要討論的是JavaScript的正規表示式,更精確地說是ES5的正規表示式。

JavaScript的正規表示式引擎是傳統型NFA的,因此本系列的討論是適合任何一門正則引擎是傳統型NFA的程式語言。當然,市面上大部分語言的正則引擎都是這種的。而JS里正則涉及到的所有語法要點,是這種引擎支援的核心子集。也就是說,要學正規表示式,不妨以JS正則為出發點。

2. 參考資料

當然本文不是無本之末。主要參考的是幾本書籍。

以下書籍中核心章節都認真閱讀過,甚至閱讀多遍。

《JavaScript權威指南》,看完本系列,再去看書中的第10章,你就知道了什麼叫字字珠璣。

《精通正規表示式》,權威且比較雜亂,我閱讀的第一本正規表示式書籍。

《正規表示式必知必會》,這是我看的第二本正則,看完後,確定自己算是入門了。

《正則指引》,《精通正規表示式》的譯者寫的,相對清晰。

《正規表示式入門》,我看的是英文版的,對於已經入門的我,基本沒多少收穫了。

《正規表示式經典例項》,除了第3章,比較雜外,也有收穫,以例項為主導的一本書。

《JavaScript Regular Expressions》,為數不多轉講JS正則的。頁數不多,也有收穫。

《高效能JavaScript 》第5章,我看的是英文版的。第5章,講了回溯和優化。

《JavaScript忍者祕籍》第7章,大概講了一下正則的用法,幾個例子還不錯。

《JavaScript高階程式設計》第5.4節,比較簡短的介紹。

使用的工具:

**Regulex,一款視覺化工具
ProcessOn - 免費線上作圖,實時協作
LICEcap – 靈活好用,GIF 螢幕錄製工具

**

3. 個人感悟

要多寫文章的

首先,我十分感謝讀者。讀者能在資訊氾濫的網路裡,點選我的文章進來瞧兩眼,這都是對其注意力的消費。更何況,還有很多童鞋都認真讀了,甚至給我挑毛病,這都是對我的幫助。不知有多少童鞋是從頭讀到這裡的,不妨留言打卡,讓我知道你是用心的讀者,而並非簡簡單單地收藏一下,然後就再也不曾看過了。

說到要寫文章,其目的是以教為學。看似為了教,其實是為了學能教會別人才算自己真正學會了,最起碼形成了文字,通過了自己的語言邏輯這一關。如果還能有人指出你的錯誤認知,那樣收穫就更大了,何樂而不為呢?

很多書中都提到類似的觀點,例如《知道做到》《好好學習》《與時間做朋友》《暗時間》等。

以教為學的其他手段

當然,以教為學的手段還有很多,比如翻譯一本書。我私下已經翻譯了好幾本(竊喜^_^)。

可以從薄點的書籍開始,比如100頁左右的。基本上使用有道就可以了,也不用要求自己一詞一句的翻譯,能用自己的話說明白就行了。說到這裡,不得不提起,我們的阮一峰大神,在我看來,他就是成功地應用這種模式的。看完外文的文章,理解明白了,用自己的話說一說,再形成自己的簡練風格。

恐怕你可能說自己的英文水平不夠,沒信心嘗試。相信我,熟悉了常用詞彙(比如literal翻譯成字面量)後,配合有道翻譯,薄點的書,一天翻譯一章是沒問題的。當然前提是你懂相關領域,不然是沒辦法意譯的。

最後一種以教為學的手段是,寫一本書。寫文章是基礎,文章多了,自然而言就可以寫成一本書。當然,寫書強調的是整體架構,所以文章最好成體系。

你看看那些國內專業書籍的作者,一般都事先翻譯過幾本書的。最起碼在前端領域,我就看到了好幾位是這麼幹的。翻譯明白了,學會了,用自己的角度去弄出一本書還是相對很容易的。

雖然,本人並未曾寫過書,但上述方法,我始終相信是可行的。

最後,我們該想到,陸游詩人對前端界做出的最大貢獻是:

紙上得來終覺淺,絕知此事要躬行。

本文完。

可以收藏PDF版本:《JavaScript正則迷你書》

相關文章