JS正則表達式完整教程（略長）

06-27

JS正則表達式完整教程（略長）

引言

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

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

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

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

本文內容共有七章，用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是[ v
f]。表示空白符，包括空格、水平製表符、垂直製表符、換行符、回車符、換頁符。記憶方式：s是space character的首字母。

S是[^ v
f]。非空白符。
.就是[^
u2028u2029]。通配符，表示幾乎任意字元。換行符、回車符、行分隔符和段分隔符除外。記憶方式：想想省略號...中的每個點，都可以理解成佔位符，表示任何類似的東西。

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

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:studyjavascript
egex
egular expression.pdf
F:studyjavascript
egex
F:studyjavascript
F:

分析：

整體模式是: 盤符:文件夾文件夾文件夾

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

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

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

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

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

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

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 (?=p) (?!p)

2.1 ^和$

^（脫字元）匹配開頭，在多行匹配中匹配行開頭。

$（美元符號）匹配結尾，在多行匹配中匹配行結尾。

比如我們把字元串的開頭和結尾用"#"替換（位置可以替換成字元的！）：

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

console.log(result); 
// => "#hello#"

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

var result = "I love javascript".replace(/^|$/gm, #);

console.log(result);
/*
#I#
#love#
#javascript#
*/

2.2 和B

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

比如一個文件名是"[JS] Lesson_01.mp4"中的，如下：

var result = "[JS] Lesson_01.mp4".replace(//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的。

具體說來就是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$$/.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"。

此時我們需要修改正則，把裡面的開頭^和結尾$，替換成：

var string = "12345678 123456789",

reg = /(?!)(?=(d{3})+)/g;
var result = string.replace(reg, ,)
console.log(result); 
// => "12,345,678 123,456,789"

其中(?!)怎麼理解呢？

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

因此最終正則變成了：/B(?=(d{3})+)/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}$/;

第二章小結

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

掌握匹配位置的這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}/;

然後再修改成括弧版的：