JS正則表達式完整教程(略長)

引言

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

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

關於正則表達式的教程,網上也有很多,相信你也看瞭一些。

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

本文內容共有七章,用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 常見的簡寫形式

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

如果要匹配任意字符怎麼辦?可以使用[dD][wW][sS][^]中任何的一個。

3. 量詞

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

3.1 簡寫形式

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個就夠的時候,就不在往下嘗試瞭。

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

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

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進制顏色值

要求匹配:

分析:

表示一個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小時制為例。

要求匹配:

分析:

共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格式為例。

要求匹配:

分析:

年,四位數字即可,可用[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:,需要使用[a-zA-Z]:\,其中盤符不區分大小寫,註意字符需要轉義。

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

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

路徑的最後一部分可以是“文件夾”,沒有,因此需要添加([^\:*<>|"?rn/]+)?

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

var regex = /^[a-zA-Z]:\([^\:*<>|"?rn/]+\)*([^\:*<>|"?rn/]+)?$/;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

要求從

提取出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. 什麼是位置呢?

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

2. 如何匹配位置呢?

在ES5中,共有6個錨字符:

2.1 ^和$

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

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

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

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

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

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

2.2 b和B

b是單詞邊界,具體就是wW之間的位置,也包括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_]的簡寫形式,即Ww以外的任何一個字符。

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

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

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

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

具體說來就是wwWW^WW$之間的位置。

比如上面的例子,把所有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 lookahead和negative lookahead。

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

ES6中,還支持positive lookbehind和negative 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$bb$/.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],即,有任何多個任意字符,後面再跟個數字。

翻譯成大白話,就是接下來的字符,必須包含個數字。

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)中,此處括號的作用也是不言而喻的,提供瞭子表達式的所有可能。

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

可以使用正則:

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來引用分組,也可以在正則本身裡引用分組。但隻能引用之前出現的分組,即反向引用。

還是以日期為例。

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

最先可能想到的正則是:

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}1d{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的含義後,那麼23的概念也就理解瞭,即分別指代第二個和第三個分組。

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

3.1 括號嵌套怎麼辦?

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

var regex = /^((d)(d(d)))1234$/;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 = /123456789/;console.log( regex.test("123456789") ); console.log( "123456789".split("") );

chrome瀏覽器打印的結果:

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 匹配成對標簽

要求匹配:

不匹配:

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

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

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

var regex = /<([^>]+)>[dD]*</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>

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

第三章小結

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

重點理解括號可以提供分組,我們可以提取數據,應該就可以瞭。

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

第4章 正則表達式回溯法原理

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

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

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

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

內容包括:

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

1. 沒有回溯的匹配

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

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

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

2. 有回溯的匹配

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

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

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

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

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

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

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

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

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

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

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"。

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

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

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

3.3 分支結構

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

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

比如正則:

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

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

第四章小結

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

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

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

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

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

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

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

第5章 正則表達式的拆分

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

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

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

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

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

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

1. 結構和操作符

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

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

JS正則表達式中,都有哪些結構呢?

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

其中涉及到的操作符有:

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

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

/ab?(c|de*)+|fg/

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

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

2. 註意要點

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

2.1 匹配字符串整體問題

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

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

而位置字符和字符序列優先級要比豎杠高,故其匹配的結構是:

應該修改成:

2.2 量詞連綴問題

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

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

此時要修改成:

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"。

可視化如下:

3.2 IPV4地址

正則表達式是:

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

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

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

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

然後再來分析(...)

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

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

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

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

第五章小結

掌握正則表達式中的優先級後,再看任何正則應該都有信心分析下去瞭。

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

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

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

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

第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 匹配固定電話

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

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

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

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

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

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

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

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

第二步,明確形式關系。

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

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

提取公共部分:

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

進一步簡寫:

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

其可視化形式:

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

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

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

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

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

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

3.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+)$/

其可視化形式是:

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

當然,/^[+-]?(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;

赞(0)