JS正規表示式完整教程（略長）

注：本文已經整理成電子書：《JavaScript正則迷你書》

引言

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

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

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

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

本文內容共有七章，用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)，其中p1、p2和p3是子模式，用|（管道符）分隔，表示其中任何之一。

例如要匹配”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. 什麼是位置呢？

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

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 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$\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]，即，有任何多個任意字元，後面再跟個數字。

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

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返回的一個陣列，第一個元素是整體匹配結果，然後是各個分組（括號裡）匹配的內容，然後是匹配下標，最後是輸入的文字。（注意：如果正則是否有修飾符g，match返回的陣列格式是不一樣的）。

另外也可以使用正則物件的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) );
 // trueconsole.log( regex.test(string2) );
 // trueconsole.log( regex.test(string3) );
 // trueconsole.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) );
 // trueconsole.log( regex.test(string2) );
 // trueconsole.log( regex.test(string3) );
 // trueconsole.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) );
 // trueconsole.log( RegExp.$1 );
 // 123console.log( RegExp.$2 );
 // 1console.log( RegExp.$3 );
 // 23console.log( RegExp.$4 );
 // 3複製程式碼

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

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

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

3.2 \10表示什麼呢？

另外一個疑問可能是，即\10是表示第10個分組，還是\1和0呢？

答案是前者，雖然一個正則裡出現\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瀏覽器列印的結果：

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) );
 // trueconsole.log( regex.test(string2) );
 // trueconsole.log( regex.test(string3) );
 // false複製程式碼

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

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

第三章小結

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

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

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

第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正規表示式中，都有哪些結構呢？

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

具體含義簡要回顧如下（如懂，可以略去不看）：

字面量，匹配一個具體字元，包括不用轉義的和需要轉義的。比如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. 同理，整個正則分成了 a、b?、(...)+、f、g。而由於分支的原因，又可以分成ab?(c|de*)+和fg這兩部分。

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

2. 注意要點

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

2.1 匹配字串整體問題

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

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

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

應該修改成:

2.2 量詞連綴問題

假設，要匹配這樣的字串：

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

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

此時正則不能想當然地寫成/^[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
}|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。

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

第五章小結

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

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

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

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

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

第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複製程式碼

其實，可以直接使用字串的substring或substr方法來做：

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
}$/

其視覺化形式：

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

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

/^\(?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+)$/

其視覺化形式是：

如果要求不匹配+.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;
複製程式碼

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

regex.exec("123abc34def")複製程式碼

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

但當使用test和exec方法，且正則有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次回溯（粉色表示.*匹配的內容）：

如果正則用的是：/".*?"/，會產生2次回溯（粉色表示.*?匹配的內容）：

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

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

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個方法引數都支援正則和字串。

但search和match，會把字串轉換為正則的。

var string = "2017.06.27";
console.log( string.search(".") );
// =>
 0//需要修改成下列形式之一console.log( string.search("\\.") );
console.log( string.search(/\./) );
// =>
 4// =>
 4console.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屬性始終不變。

而正則例項的兩個方法exec、test，當正則是全域性匹配時，每一次匹配完成後，都會修改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") );
// =>
 trueconsole.log( /^123$/.test("a123b") );
// =>
 falseconsole.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屬性

正則例項物件屬性，除了global、ingnoreCase、multiline、lastIndex屬性之外，還有一個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 綜合運用

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

具體效果如下：

程式碼，直接貼了，相信你能看得懂：

<
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翻譯成字面量）後，配合有道翻譯，薄點的書，一天翻譯一章是沒問題的。當然前提是你懂相關領域，不然是沒辦法意譯的。

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

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

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

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

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

本文完。

來源：https://juejin.im/post/5965943ff265da6c30653879