。

目錄

第一章 正則表示式字元匹配攻略

第二章正則表示式位置匹配攻略

第三章 正則表示式括號的作用

下面簡單地說說每一章都討論了什麼？

正則是匹配模式，要麼匹配字元，要麼匹配位置。

第1章和第2章以這個角度去講解了正則的基礎。

在正則中可以使用括號捕獲資料，要麼在API中進行分組引用，要麼在正則裡進行反向引用。

這是第3章的主題，講解了正則中括號的作用。

=====================================================================================

第一章 正則表示式字元匹配攻略

正則表示式是匹配模式，要麼匹配字元，要麼匹配位置。請記住這句話。

內容：

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

去掉g的情況（只匹配一次）

var regex = /ab{2,5}c/;
var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc";
console.log(string.match(regex));
//["abbc", index: 4, input: "abc abbc abbbc abbbbc abbbbbc abbbbbbc", groups: undefined]
 

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

也就是說，分支結構也是惰性的，即當前面的匹配上了，後面的就不再嘗試了。

第二章 正則表示式位置匹配攻略

正則表示式是匹配模式，要麼匹配字元，要麼匹配位置。請記住這句話。

然而大部分人學習正則時，對於匹配位置的重視程度沒有那麼高。

本章講講正則匹配位置的總總。

內容包括：

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#

知道了\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#

3. 位置的特性

對於位置的理解，我們可以理解成空字元""。

比如"hello"字串等價於如下的形式：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";

也等價於：

"hello" == "" + "" + "hello"

因此，把/^hello$/寫成/^^hello$$$/，是沒有任何問題的：

var result = /^^hello$$$/.test("hello");
console.log(result); 
// true

4. 相關案例

4.1 不匹配任何東西的正則

/.^/

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, ',')
var result2 = string2.replace(reg,",")
console.log(result); // 12,345,678
console.log(result2); // 123,456,789

第三章 正則表示式括號的作用

括號的使用是否得心應手，是衡量對正則的掌握水平的一個側面標準。

括號的作用，其實三言兩語就能說明白，括號提供了分組，便於我們引用它。

引用某個分組，會有兩種情形：在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

如果去掉正則中的括號，即/^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})/;

為什麼要使用這個正則呢？

比如提取出年、月、日，可以這麼做：

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", groups: undefined]

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", groups: undefined]

同時，也可以使用建構函式的全域性屬性$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

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") ); //true
console.log( "\1\2\3\4\5\6\7\8\9".split("") );//["
", "", "", "", "", "", "", "8", "9"]

4. 非捕獲分組

之前文中出現的分組，都會捕獲它們匹配到的資料，以便後續引用，因此也稱他們是捕獲型分組。

如果只想要括號最原始的功能，但不會引用它，即，既不在API裡引用，也不在正則裡反向引用。此時可以使用非捕獲分組(?:p)，例如本文第一個例子可以修改為：

var regex = /(?:ab)+/g;
var string = "ababa abbb ababab";
console.log( string.match(regex) );
// ["abab", "ab", "ababab"]

。