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個月，分兩種狀況0一、0二、……、09和十、十一、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) ); // 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>') );
// => "&lt;div&gt;Blah blah blah&lt;/div&gt";
複製代碼

其中使用了用構造函數生成的正則，而後替換相應的格式就好了，這個跟本章沒多大關係。

卻是它的逆過程，使用了括號，以便提供引用，也很簡單，以下：

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

經過key獲取相應的分組引用，而後做爲對象的鍵。

5.6 匹配成對標籤

要求匹配：

<title>regular expression</title>

<p>laoyao bye bye</p>

不匹配：

<title>wrong!</p>

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

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

可是要求匹配成對標籤，那就須要使用反向引用，如：

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

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

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

第三章小結

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

重點理解括號能夠提供分組，咱們能夠提取數據，應該就能夠了。

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

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

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

而研究匹配原理時，有兩個字出現的頻率比較高：「回溯」。

聽起來挺高大上，確實還有不少人對此不明不白的。

所以，本章就簡單扼要地說清楚回溯究竟是什麼東西。

內容包括：

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

1. 沒有回溯的匹配

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

而當目標字符串是"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補齊的。好比，九、0九、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.2三、+1.2三、-1.23

十、+十、-10

.二、+.二、-.2

能夠看出正則分爲三部分。

符號部分：[+-]

整數部分：\d+

小數部分：\.\d+

上述三個部分，並非所有都出現。若是此時很容易寫出以下的正則：

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

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

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

要匹配1.2三、+1.2三、-1.23，能夠用/^[+-]?\d+\.\d+$/

要匹配十、+十、-10，能夠用/^[+-]?\d+$/

要匹配.二、+.二、-.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
// => 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翻譯成字面量）後，配合有道翻譯，薄點的書，一天翻譯一章是沒問題的。固然前提是你懂相關領域，否則是沒辦法意譯的。

最後一種以教爲學的手段是，寫一本書。寫文章是基礎，文章多了，天然而言就能夠寫成一本書。固然，寫書強調的是總體架構，因此文章最好成體系。

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

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

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

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

本文完。

能夠收藏PDF版本：《JavaScript正則迷你書》