注：本文已經整理成電子書：《JavaScript正則迷你書》
引言
親愛的讀者朋友，如果你點開了這篇文章，說明你對正則很感興趣。
想必你也瞭解正則的重要性，在我看來正規表示式是衡量程式設計師水平的一個側面標準。
關於正規表示式的教程，網上也有很多，相信你也看了一些。
與之不同的是，本文的目的是希望所有認真讀完的童鞋們，都有實質性的提高。
本文內容共有七章，用JavaScript語言完整地討論了正規表示式的方方面面。
如果覺得文章某塊兒沒有說明白清楚，歡迎留言，能力範圍之內，老姚必做詳細解答。
具體章節如下：
- 引言
- 第一章 正規表示式字元匹配攻略
- 第二章 正規表示式位置匹配攻略
- 第三章 正規表示式括號的作用
- 第四章 正規表示式回溯法原理
- 第五章 正規表示式的拆分
- 第六章 正規表示式的構建
- 第七章 正規表示式程式設計
- 後記
下面簡單地說說每一章都討論了什麼？
正則是匹配模式，要麼匹配字元，要麼匹配位置。
第1章和第2章以這個角度去講解了正則的基礎。
在正則中可以使用括號捕獲資料，要麼在API中進行分組引用，要麼在正則裡進行反向引用。
這是第3章的主題，講解了正則中括號的作用。
學習正規表示式，是需要了解其匹配原理的。
第4章，講解了正則了正規表示式的回溯法原理。另外在第6章裡，也講解了正則的表示式的整體工作原理。
不僅能看懂別人的正則，還要自己會寫正則。
第5章，是從讀的角度，去拆分一個正規表示式，而第6章是從寫的角度，去構建一個正規表示式。
學習正則，是為了在真實世界裡應用的。
第7章講解了正則的用法，和相關API需要注意的地方。
如何閱讀本文？
我的建議是閱讀兩遍。第一遍，不求甚解地快速閱讀一遍。閱讀過程中遇到的問題不妨記錄下來，也許閱讀完畢後就能解決很多。然後有時間的話，再帶著問題去精讀第二遍。
深呼吸，開始我們的正規表示式旅程吧。我在終點等你。
第一章 正規表示式字元匹配攻略
正規表示式是匹配模式，要麼匹配字元，要麼匹配位置。請記住這句話。
然而關於正則如何匹配字元的學習，大部分人都覺得這塊比較雜亂。
畢竟元字元太多了，看起來沒有系統性，不好記。本章就解決這個問題。
內容包括：
- 兩種模糊匹配
- 字元組
- 量詞
- 分支結構
- 案例分析
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. 如何匹配位置呢？
在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 解答
我們可以把原題變成下列幾種情況之一：
- 同時包含數字和小寫字母
- 同時包含數字和大寫字母
- 同時包含小寫字母和大寫字母
- 同時包含數字、小寫字母和大寫字母
以上的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. 分組和分支結構
這二者是括號最直覺的作用，也是最原始的功能。
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) ); // 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個分組，還是\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>') );
// => "<div>Blah blah blah</div>";
複製程式碼其中使用了用建構函式生成的正則，然後替換相應的格式就行了，這個跟本章沒多大關係。
倒是它的逆過程，使用了括號，以便提供引用，也很簡單，如下：
// 實體字元轉換為等值的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('<div>Blah blah blah</div>') );
// => "<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. 沒有回溯的匹配
假設我們的正則是/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步，雖然沒有回到之前的狀態，但仍然回到了分支結構，嘗試下一種可能。所以，可以認為它是一種回溯的。
第四章小結
其實回溯法，很容易掌握的。
簡單總結就是，正因為有多種可能，所以要一個一個試。直到，要麼到某一步時，整體匹配成功了；要麼最後都試完後，發現整體匹配不成功。
- 貪婪量詞“試”的策略是：買衣服砍價。價錢太高了，便宜點，不行，再便宜點。
- 惰性量詞“試”的策略是：賣東西加價。給少了，再多給點行不，還有點少啊，再給點。
- 分支結構“試”的策略是：貨比三家。這家不行，換一家吧，還不行，再換。
既然有回溯的過程，那麼匹配效率肯定低一些。相對誰呢？相對那些DFA引擎。
而JS的正則引擎是NFA，NFA是“非確定型有限自動機”的簡寫。
大部分語言中的正則都是NFA，為啥它這麼流行呢？
答：你別看我匹配慢，但是我編譯快啊，而且我還有趣哦。
第5章 正規表示式的拆分
對於一門語言的掌握程度怎麼樣，可以有兩個角度來衡量：讀和寫。
不僅要求自己能解決問題，還要看懂別人的解決方案。程式碼是這樣，正規表示式也是這樣。
正則這門語言跟其他語言有一點不同，它通常就是一大堆字元，而沒有所謂“語句”的概念。
如何能正確地把一大串正則拆分成一塊一塊的，成為了破解“天書”的關鍵。
本章就解決這一問題，內容包括：
- 結構和操作符
- 注意要點
- 案例分析
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/
- 由於括號的存在，所以，
(c|de*)是一個整體結構。 - 在
(c|de*)中，注意其中的量詞*，因此e*是一個整體結構。 - 又因為分支結構“|”優先順序最低，因此
c是一個整體、而de*是另一個整體。 - 同理，整個正則分成了
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. 構建正則前提
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. 效率
保證了準確性後，才需要是否要考慮要優化。大多數情形是不需要優化的，除非執行的非常慢。什麼情形正規表示式執行才慢呢？我們需要考察正規表示式的執行過程（原理）。
正規表示式的執行分為如下的階段：
- 編譯
- 設定起始位置
- 嘗試匹配
- 匹配失敗的話，從下一位開始繼續第3步
- 最終結果：匹配成功或失敗
下面以程式碼為例，來看看這幾個階段都做了什麼：
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/。此時分支和量詞產生的回溯的成本是不一樣的。但這樣優化後，可讀性會降低的。
第六章小結
本章涉及的內容並不多。
一般情況下，針對某問題能寫出一個滿足需求的正則，基本上就可以了。
至於準確性和效率方面的追求，純屬看個人要求了。我覺得夠用就行了。
關於準確性，本章關心的是最常用的解決思路：
針對每種情形，分別寫出正則，然用分支把他們合併在一起，再提取分支公共部分，就能得到準確的正則。
至於優化，本章沒有為了湊數，去寫一大堆。瞭解了匹配原理，常見的優化手法也就這麼幾種。
第七章 正規表示式程式設計
什麼叫知識，能指導我們實踐的東西才叫知識。
學習一樣東西，如果不能使用，最多隻能算作紙上談兵。正規表示式的學習，也不例外。
掌握了正規表示式的語法後，下一步，也是關鍵的一步，就是在真實世界中使用它。
那麼如何使用正規表示式呢？有哪些關鍵的點呢？本章就解決這個問題。
內容包括：
- 正規表示式的四種操作
- 相關API注意要點
- 真實案例
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
// => 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屬性始終不變。
而正則例項的兩個方法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") );
// => 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屬性
正則例項物件屬性，除了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翻譯成字面量）後，配合有道翻譯，薄點的書，一天翻譯一章是沒問題的。當然前提是你懂相關領域，不然是沒辦法意譯的。
最後一種以教為學的手段是，寫一本書。寫文章是基礎，文章多了，自然而言就可以寫成一本書。當然，寫書強調的是整體架構，所以文章最好成體系。
你看看那些國內專業書籍的作者，一般都事先翻譯過幾本書的。最起碼在前端領域，我就看到了好幾位是這麼幹的。翻譯明白了，學會了，用自己的角度去弄出一本書還是相對很容易的。
雖然，本人並未曾寫過書，但上述方法，我始終相信是可行的。
最後，我們該想到，陸游詩人對前端界做出的最大貢獻是：
紙上得來終覺淺，絕知此事要躬行。
本文完。