摘要：正則表達(dá)式的字符串表示，按照字面量形式而非傳入構(gòu)造函數(shù)中的字符串模式返回。其中，表示匹配項在字符串中的位置，而表示應(yīng)用正則表達(dá)式的字符串。下面列出了正則表達(dá)式所不支持的特性。關(guān)卡按要求完成下列常用的正則表達(dá)式。

由于本課程的核心是 JavaScript，所以本文著重講解了「正則表達(dá)式」在 JavaScript 中的用法，并未深入「正則表達(dá)式」的具體細(xì)節(jié)。如果您尚不了解「正則表達(dá)式」，強烈推薦您先學(xué)習(xí) 正則表達(dá)式30分鐘入門教程 http://deerchao.net/tutorials/regex/regex.htm 之后，再進行本課程的學(xué)習(xí)。

正則表達(dá)式（regular expression）是一個描述字符模式的對象，使用正則表達(dá)式可以進行強大的模式匹配和文本檢索與替換功能。JavaScript 的正則表達(dá)式語法是 Perl5 的正則表達(dá)式語法的大型子集，所以對于有 Perl 編程經(jīng)驗的程序員來說，學(xué)習(xí) JavaScript 中的正則表達(dá)式是小菜一碟。

JavaScript 中的正則表達(dá)式用 RegExp 對象表示，可以使用 RegExp() 構(gòu)造函數(shù)來創(chuàng)建 RegExp 對象，不過 RegExp 對象更多是通過字面量的語法來創(chuàng)建，使用下面類似 Perl 的語法，就可以創(chuàng)建一個正則表達(dá)式。例如：

// 推薦寫法
var expression = / pattern / flags ;

// 不推薦寫法
var expression = new RegExp(pattern, flags);

其中的模式（pattern）部分，是包含在一對斜杠 / 之間的字符，可以是任何簡單或復(fù)雜的正則表達(dá)式，可以包含字符類、限定符、分組、向前查找以及反向引用。每個正則表達(dá)式都可帶有一或多個標(biāo)志（flags），用以標(biāo)明正則表達(dá)式的行為。正則表達(dá)式的匹配模式支持下列3個標(biāo)志。

g：表示全局（global）模式，即模式將被應(yīng)用于所有字符串，而非在發(fā)現(xiàn)第一個匹配項時立即停止；

i：表示不區(qū)分大小寫（case-insensitive）模式，即在確定匹配項時忽略模式與字符串的大小寫；

m：表示多行（multiline）模式，即在到達(dá)一行文本末尾時還會繼續(xù)查找下一行中是否存在與模式匹配的項。

因此，一個正則表達(dá)式就是一個模式與上述3個標(biāo)志的組合體。不同組合產(chǎn)生不同結(jié)果，如下面的例子所示。

// 匹配字符串中所有"at"的實例
var pattern1 = /at/g;

// 匹配第一個"bat"或"cat"，不區(qū)分大小寫
var pattern2 = /[bc]at/i;

// 匹配所有以"at"結(jié)尾的3個字符的組合，不區(qū)分大小寫
var pattern3 = /.at/gi;

與其他語言中的正則表達(dá)式類似，模式中使用的所有元字符都必須轉(zhuǎn)義。正則表達(dá)式中的元字符包括：

( [ {  ^ $ | ) ? * + . ] }

這些元字符在正則表達(dá)式中都有一或多種特殊用途，因此如果想要匹配字符串中包含的這些字符，就必須對它們進行轉(zhuǎn)義。下面給出幾個例子。

// 匹配第一個"bat"或"cat"，不區(qū)分大小寫
var pattern1 = /[bc]at/i;

// 匹配第一個" [bc]at"，不區(qū)分大小寫
var pattern2 = /[bc]at/i;

// 匹配所有以"at"結(jié)尾的3個字符的組合，不區(qū)分大小寫
var pattern3 = /.at/gi;

// 匹配所有".at"，不區(qū)分大小寫
var pattern4 = /.at/gi;

RegExp 的每個實例都具有下列屬性，通過這些屬性可以取得有關(guān)模式的各種信息。

global：布爾值，表示是否設(shè)置了 g 標(biāo)志。

ignoreCase：布爾值，表示是否設(shè)置了 i 標(biāo)志。

lastIndex：整數(shù)，表示開始搜索下一個匹配項的字符位置，從0算起。

multiline：布爾值，表示是否設(shè)置了 m 標(biāo)志。

source：正則表達(dá)式的字符串表示，按照字面量形式而非傳入構(gòu)造函數(shù)中的字符串模式返回。

通過這些屬性可以獲知一個正則表達(dá)式的各方面信息，但卻沒有多大用處，因為這些信息全都包含在模式聲明中。例如：

var pattern1 = /[bc]at/i;
console.log(pattern1.global);         // false
console.log(pattern1.ignoreCase);     // true
console.log(pattern1.multiline);      // false
console.log(pattern1.lastIndex);      // 0
console.log(pattern1.source);         // "[bc]at"

var pattern2 = new RegExp("[bc]at", "i");
console.log(pattern2.global);         // false
console.log(pattern2.ignoreCase);     // true
console.log(pattern2.multiline);      // false
console.log(pattern2.lastIndex);      // 0
console.log(pattern2.source);         // "[bc]at"

我們注意到，盡管第一個模式使用的是字面量，第二個模式使用了 RegExp 構(gòu)造函數(shù)，但它們的 source 屬性是相同的。可見，source 屬性保存的是規(guī)范形式的字符串，即字面量形式所用的字符串。

RegExp 對象的主要方法是 exec()，該方法是專門為捕獲組而設(shè)計的。exec() 接受一個參數(shù)，即要應(yīng)用模式的字符串，然后返回包含第一個匹配項信息的數(shù)組；或者在沒有匹配項的情況下返回 null。返回的數(shù)組雖然是 Array 的實例，但包含兩個額外的屬性：index 和 input。其中，index 表示匹配項在字符串中的位置，而 input 表示應(yīng)用正則表達(dá)式的字符串。在數(shù)組中，第一項是與整個模式匹配的字符串，其他項是與模式中的捕獲組匹配的字符串（如果模式中沒有捕獲組，則該數(shù)組只包含一項）。請看下面的例子。

var text = "mom and dad and baby";
var pattern = /mom( and dad( and baby)?)?/gi;

var matches = pattern.exec(text);
console.log(matches.index);     // 0
console.log(matches.input);     // "mom and dad and baby"
console.log(matches[0]);        // "mom and dad and baby"
console.log(matches[1]);        // " and dad and baby"
console.log(matches[2]);        // " and baby"

這個例子中的模式包含兩個捕獲組。最內(nèi)部的捕獲組匹配 "and baby"，而包含它的捕獲組匹配 "and dad" 或者 "and dad and baby"。當(dāng)把字符串傳入 exec() 方法中之后，發(fā)現(xiàn)了一個匹配項。因為整個字符串本身與模式匹配，所以返回的數(shù)組 matchs 的 index 屬性值為 0。數(shù)組中的第一項是匹配的整個字符串，第二項包含與第一個捕獲組匹配的內(nèi)容，第三項包含與第二個捕獲組匹配的內(nèi)容。

對于 exec() 方法而言，即使在模式中設(shè)置了全局標(biāo)志 g，它每次也只會返回一個匹配項。在不設(shè)置全局標(biāo)志的情況下，在同一個字符串上多次調(diào)用 exec() 將始終返回第一個匹配項的信息。而在設(shè)置全局標(biāo)志的情況下，每次調(diào)用 exec() 則都會在字符串中繼續(xù)查找新匹配項，如下面的例子所示。

var text = "cat, bat, sat, fat";

var pattern1 = /.at/;

// 非全局模式，第一次匹配
var matches = pattern1.exec(text);
console.log(matches.index);        // 0
console.log(matches[0]);           // cat
console.log(pattern1.lastIndex);   // 0

// 非全局模式，第二次匹配
matches = pattern1.exec(text);
console.log(matches.index);        // 0
console.log(matches[0]);           // cat
console.log(pattern1.lastIndex);   // 0

var pattern2 = /.at/g;

// 全局模式，第一次匹配
var matches = pattern2.exec(text);
console.log(matches.index);        // 0
console.log(matches[0]);           // cat
console.log(pattern2.lastIndex);   // 0

// 全局模式，第二次匹配
matches = pattern2.exec(text);
console.log(matches.index);        // 5
console.log(matches[0]);           // bat
console.log(pattern2.lastIndex);   // 8

這個例子中的第一個模式 pattern1 不是全局模式，因此每次調(diào)用 exec() 返回的都是第一個匹配項 "cat"。而第二個模式 pattern2 是全局模式，因此每次調(diào)用 exec() 都會返回字符串中的下一個匹配項，直至搜索到字符串末尾為止。此外，還應(yīng)該注意模式的 lastIndex 屬性的變化情況。在全局匹配模式下，lastIndex 的值在每次調(diào)用 exec() 后都會增加，而在非全局模式下則始終保持不變。

IE 的 JavaScript 實現(xiàn)在 lastIndex 屬性上存在偏差，即使在非全局模式下，lastIndex 屬性每次也會變化。

正則表達(dá)式的第二個方法是 test()，它接受一個字符串參數(shù)。在模式與該參數(shù)匹配的情況下返回 true；否則，返回 false。在只想知道目標(biāo)字符串與某個模式是否匹配，但不需要知道其文本內(nèi)容的情況下，使用這個方法非常方便。因此，test() 方法經(jīng)常被用在 if 語句中，如下面的例子所示。

var text = "000-00-0000";
var pattern = /d{3}-d{2}-d{4}/;

if (pattern.test(text)){
    console.log("The pattern was matched.");
}

在這個例子中，我們使用正則表達(dá)式來測試了一個數(shù)字序列。如果輸入的文本與模式匹配，則顯示一條消息。這種用法經(jīng)常出現(xiàn)在驗證用戶輸入的情況下，因為我們只想知道輸入是不是有效，至于它為什么無效就無關(guān)緊要了。

RegExp 實例繼承的 toLocaleString() 和 toString() 方法都會返回正則表達(dá)式的字面量，與創(chuàng)建正則表達(dá)式的方式無關(guān)。例如：

var pattern = new RegExp("[bc]at", "gi");
console.log(pattern.toString());             // /[bc]at/gi
console.log(pattern.toLocaleString());       // /[bc]at/gi

即使上例中的模式是通過調(diào)用 RegExp 構(gòu)造函數(shù)創(chuàng)建的，但 toLocaleString() 和 toString() 方法仍然會像它是以字面量形式創(chuàng)建的一樣顯示其字符串表示。

RegExp 構(gòu)造函數(shù)包含一些屬性（這些屬性在其他語言中被看成是靜態(tài)屬性）。這些屬性適用于作用域中的所有正則表達(dá)式，并且基于所執(zhí)行的最近一次正則表達(dá)式操作而變化。關(guān)于這些屬性的另一個獨特之處，就是可以通過兩種方式訪問它們。換句話說，這些屬性分別有一個長屬性名和一個短屬性名（Opera是例外，它不支持短屬性名）。下表列出了RegExp構(gòu)造函數(shù)的屬性。

使用這些屬性可以從 exec() 或 test() 執(zhí)行的操作中提取出更具體的信息。請看下面的例子。

var text = "this has been a short summer";
var pattern = /(.)hort/g;

/*
 * 注意：Internet Explorer 不支持 multiline 屬性
 * Opera 不支持 input、lastMatch、lastParen 和 multiline 屬性
 */
if (pattern.test(text)){
    console.log(RegExp.input);          // this has been a short summer
    console.log(RegExp.leftContext);    // this has been a
    console.log(RegExp.rightContext);   // summer
    console.log(RegExp.lastMatch);      // short
    console.log(RegExp.lastParen);      // s
    console.log(RegExp.multiline);      // false
}

如前所述，例子使用的長屬性名都可以用相應(yīng)的短屬性名來代替。只不過，由于這些短屬性名大都不是有效的 JavaScript 標(biāo)識符，因此必須通過方括號語法來訪問它們，如下所示。

var text = "this has been a short summer";
var pattern = /(.)hort/g;

/*
 * 注意：Internet Explorer 不支持 multiline 屬性
 * Opera 不支持 input、lastMatch、lastParen 和 multiline 屬性
 */
if (pattern.test(text)){
    console.log(RegExp.$_);      // this has been a short summer
    console.log(RegExp["$`"]);   // this has been a
    console.log(RegExp["$""]);   // summer
    console.log(RegExp["$&"]);   // short
    console.log(RegExp["$+"]);   // s
    console.log(RegExp["$*"]);   // false
}

除了上面介紹的幾個屬性之外，還有多達(dá)9個用于存儲捕獲組的構(gòu)造函數(shù)屬性。訪問這些屬性的語法是 RegExp.$1、RegExp.$2...RegExp.$9，分別用于存儲第一、第二...第九個匹配的捕獲組。在調(diào)用 exec() 或 test() 方法時，這些屬性會被自動填充。然后，我們就可以像下面這樣來使用它們。

var text = "this has been a short summer";
var pattern = /(..)or(.)/g;

if (pattern.test(text)){
    console.log(RegExp.$1);  // sh
    console.log(RegExp.$2);  // t
}

這里創(chuàng)建了一個包含兩個捕獲組的模式，并用該模式測試了一個字符串。即使 test() 方法只返回一個布爾值，但 RegExp 構(gòu)造函數(shù)的屬性 $1 和 $2 也會被匹配相應(yīng)捕獲組的字符串自動填充。

盡管 JavaScript 中的正則表達(dá)式功能還是比較完備的，但仍然缺少某些語言（特別是 Perl）所支持的高級正則表達(dá)式特性。下面列出了 JavaScript 正則表達(dá)式所不支持的特性。

匹配字符串開始和結(jié)尾的A和Z錨

向后查找（lookbehind）

并集和交集類

原子組（atomic grouping）

Unicode支持（單個字符除外，如uFFFF）

命名的捕獲組

s（single，單行）和x（free-spacing，無間隔）匹配模式

條件匹配

正則表達(dá)式注釋

即使存在這些限制，JavaScript 正則表達(dá)式仍然是非常強大的，能夠幫我們完成絕大多數(shù)模式匹配任務(wù)。

按要求完成下列常用的正則表達(dá)式。

// 挑戰(zhàn)一：數(shù)字
var pattern1 = null;  // 補全該正則表達(dá)式
console.log(pattern1.test("123")); // true
console.log(pattern1.test("abc")); // false

// 挑戰(zhàn)二：3位的數(shù)字
var pattern2 = null;  // 補全該正則表達(dá)式
console.log(pattern2.test("123"));  // true
console.log(pattern2.test("1234")); // false

// 挑戰(zhàn)三：至少3位的數(shù)字
var pattern3 = null;  // 補全該正則表達(dá)式
console.log(pattern3.test("1234")); // true
console.log(pattern3.test("12"));   // false

// 挑戰(zhàn)四：3-5位的數(shù)字
var pattern4 = null;  // 補全該正則表達(dá)式
console.log(pattern4.test("1234")); // true
console.log(pattern4.test("1"));    // false

// 挑戰(zhàn)五：由26個英文字母組成的字符串
var pattern5 = null;  // 補全該正則表達(dá)式
console.log(pattern5.test("abc"));  // true
console.log(pattern5.test("1abc")); // false

// 挑戰(zhàn)六：由數(shù)字和26個英文字母組成的字符串
var pattern6 = null;  // 補全該正則表達(dá)式
console.log(pattern6.test("1abc"));  // true
console.log(pattern6.test("_abc"));  // false

// 挑戰(zhàn)七：日期格式：年-月-日
var pattern7 = null;  // 補全該正則表達(dá)式
console.log(pattern7.test("2016-08-20"));  // true
console.log(pattern7.test("2016/08/20"));  // false

// 挑戰(zhàn)八：時間格式：小時:分鐘, 24小時制
var pattern8 = null;  // 補全該正則表達(dá)式
console.log(pattern8.test("13:45"));  // true
console.log(pattern8.test("13點45")); // false

// 挑戰(zhàn)九：中國大陸身份證號，15位或18位
var pattern9 = null;  // 補全該正則表達(dá)式
console.log(pattern9.test("4223222199901090033"));  // true
console.log(pattern9.test("asdfasdfasfasdf1234"));  // false

關(guān)注微信公眾號「劼哥舍」回復(fù)「答案」，獲取關(guān)卡詳解。  
關(guān)注 https://github.com/stone0090/javascript-lessons，獲取最新動態(tài)。