正則表達式 · 《JavaScript 闖關記》

# 正則表達式 > 由于本課程的核心是 JavaScript，所以本文著重講解了「正則表達式」在 JavaScript 中的用法，并未深入「正則表達式」的具體細節。如果您尚不了解「正則表達式」，強烈推薦您先學習「正則表達式30分鐘入門教程[http://deerchao.net/tutorials/regex/regex.htm」之后，再進行本課程的學習。](http://deerchao.net/tutorials/regex/regex.htm%E3%80%8D%E4%B9%8B%E5%90%8E%EF%BC%8C%E5%86%8D%E8%BF%9B%E8%A1%8C%E6%9C%AC%E8%AF%BE%E7%A8%8B%E7%9A%84%E5%AD%A6%E4%B9%A0%E3%80%82) 正則表達式（regular expression）是一個描述字符模式的對象，使用正則表達式可以進行強大的模式匹配和文本檢索與替換功能。JavaScript 的正則表達式語法是 Perl5 的正則表達式語法的大型子集，所以對于有 Perl 編程經驗的程序員來說，學習 JavaScript 中的正則表達式是小菜一碟。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#正則表達式的定義)正則表達式的定義 JavaScript 中的正則表達式用?`RegExp`?對象表示，可以使用?`RegExp()`?構造函數來創建?`RegExp`?對象，不過?`RegExp`?對象更多是通過字面量的語法來創建，使用下面類似 Perl 的語法，就可以創建一個正則表達式。例如： ~~~ // 推薦寫法 var expression = / pattern / flags ; // 不推薦寫法 var expression = new RegExp(pattern, flags); ~~~ 其中的模式（pattern）部分，是包含在一對斜杠?`/`?之間的字符，可以是任何簡單或復雜的正則表達式，可以包含字符類、限定符、分組、向前查找以及反向引用。每個正則表達式都可帶有一或多個標志（flags），用以標明正則表達式的行為。正則表達式的匹配模式支持下列3個標志。 * `g`：表示全局（global）模式，即模式將被應用于所有字符串，而非在發現第一個匹配項時立即停止； * `i`：表示不區分大小寫（case-insensitive）模式，即在確定匹配項時忽略模式與字符串的大小寫； * `m`：表示多行（multiline）模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項。因此，一個正則表達式就是一個模式與上述3個標志的組合體。不同組合產生不同結果，如下面的例子所示。 ~~~ // 匹配字符串中所有"at"的實例 var pattern1 = /at/g; // 匹配第一個"bat"或"cat"，不區分大小寫 var pattern2 = /[bc]at/i; // 匹配所有以"at"結尾的3個字符的組合，不區分大小寫 var pattern3 = /.at/gi; ~~~ 與其他語言中的正則表達式類似，模式中使用的所有元字符都必須轉義。正則表達式中的元字符包括： ~~~ ( [ { \ ^ $ | ) ? * + . ] } ~~~ 這些元字符在正則表達式中都有一或多種特殊用途，因此如果想要匹配字符串中包含的這些字符，就必須對它們進行轉義。下面給出幾個例子。 ~~~ // 匹配第一個"bat"或"cat"，不區分大小寫 var pattern1 = /[bc]at/i; // 匹配第一個" [bc]at"，不區分大小寫 var pattern2 = /\[bc\]at/i; // 匹配所有以"at"結尾的3個字符的組合，不區分大小寫 var pattern3 = /.at/gi; // 匹配所有".at"，不區分大小寫 var pattern4 = /\.at/gi; ~~~ ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#regexp-實例屬性)`RegExp`?實例屬性 `RegExp`?的每個實例都具有下列屬性，通過這些屬性可以取得有關模式的各種信息。 * `global`：布爾值，表示是否設置了?`g`?標志。 * `ignoreCase`：布爾值，表示是否設置了?`i`?標志。 * `lastIndex`：整數，表示開始搜索下一個匹配項的字符位置，從0算起。 * `multiline`：布爾值，表示是否設置了?`m`?標志。 * `source`：正則表達式的字符串表示，按照字面量形式而非傳入構造函數中的字符串模式返回。通過這些屬性可以獲知一個正則表達式的各方面信息，但卻沒有多大用處，因為這些信息全都包含在模式聲明中。例如： ~~~ 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`?構造函數，但它們的?`source`?屬性是相同的。可見，`source`?屬性保存的是規范形式的字符串，即字面量形式所用的字符串。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#regexp-實例方法)`RegExp`?實例方法 `RegExp`?對象的主要方法是?`exec()`，該方法是專門為捕獲組而設計的。`exec()`?接受一個參數，即要應用模式的字符串，然后返回包含第一個匹配項信息的數組；或者在沒有匹配項的情況下返回?`null`。返回的數組雖然是?`Array`?的實例，但包含兩個額外的屬性：`index`?和?`input`。其中，`index`?表示匹配項在字符串中的位置，而?`input`?表示應用正則表達式的字符串。在數組中，第一項是與整個模式匹配的字符串，其他項是與模式中的捕獲組匹配的字符串（如果模式中沒有捕獲組，則該數組只包含一項）。請看下面的例子。 ~~~ 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" ~~~ 這個例子中的模式包含兩個捕獲組。最內部的捕獲組匹配?`"and baby"`，而包含它的捕獲組匹配?`"and dad"`?或者?`"and dad and baby"`。當把字符串傳入?`exec()`?方法中之后，發現了一個匹配項。因為整個字符串本身與模式匹配，所以返回的數組`matchs`?的?`index`?屬性值為?`0`。數組中的第一項是匹配的整個字符串，第二項包含與第一個捕獲組匹配的內容，第三項包含與第二個捕獲組匹配的內容。對于?`exec()`?方法而言，即使在模式中設置了全局標志?`g`，它每次也只會返回一個匹配項。在不設置全局標志的情況下，在同一個字符串上多次調用?`exec()`?將始終返回第一個匹配項的信息。而在設置全局標志的情況下，每次調用?`exec()`?則都會在字符串中繼續查找新匹配項，如下面的例子所示。 ~~~ 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`?不是全局模式，因此每次調用?`exec()`?返回的都是第一個匹配項?`"cat"`。而第二個模式`pattern2`?是全局模式，因此每次調用?`exec()`?都會返回字符串中的下一個匹配項，直至搜索到字符串末尾為止。此外，還應該注意模式的?`lastIndex`?屬性的變化情況。在全局匹配模式下，`lastIndex`?的值在每次調用?`exec()`?后都會增加，而在非全局模式下則始終保持不變。 > IE 的 JavaScript 實現在?`lastIndex`?屬性上存在偏差，即使在非全局模式下，`lastIndex`?屬性每次也會變化。正則表達式的第二個方法是?`test()`，它接受一個字符串參數。在模式與該參數匹配的情況下返回?`true`；否則，返回`false`。在只想知道目標字符串與某個模式是否匹配，但不需要知道其文本內容的情況下，使用這個方法非常方便。因此，`test()`?方法經常被用在?`if`?語句中，如下面的例子所示。 ~~~ var text = "000-00-0000"; var pattern = /\d{3}-\d{2}-\d{4}/; if (pattern.test(text)){ console.log("The pattern was matched."); } ~~~ 在這個例子中，我們使用正則表達式來測試了一個數字序列。如果輸入的文本與模式匹配，則顯示一條消息。這種用法經常出現在驗證用戶輸入的情況下，因為我們只想知道輸入是不是有效，至于它為什么無效就無關緊要了。 `RegExp`?實例繼承的?`toLocaleString()`?和?`toString()`?方法都會返回正則表達式的字面量，與創建正則表達式的方式無關。例如： ~~~ var pattern = new RegExp("\\[bc\\]at", "gi"); console.log(pattern.toString()); // /\[bc\]at/gi console.log(pattern.toLocaleString()); // /\[bc\]at/gi ~~~ 即使上例中的模式是通過調用?`RegExp`?構造函數創建的，但?`toLocaleString()`?和?`toString()`?方法仍然會像它是以字面量形式創建的一樣顯示其字符串表示。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#regexp-構造函數屬性)`RegExp`?構造函數屬性 `RegExp`?構造函數包含一些屬性（這些屬性在其他語言中被看成是靜態屬性）。這些屬性適用于作用域中的所有正則表達式，并且基于所執行的最近一次正則表達式操作而變化。關于這些屬性的另一個獨特之處，就是可以通過兩種方式訪問它們。換句話說，這些屬性分別有一個長屬性名和一個短屬性名（Opera是例外，它不支持短屬性名）。下表列出了RegExp構造函數的屬性。 | 長屬性名 | 短屬性名 | 說明 | | --- | --- | --- | | input | $_ | 最近一次要匹配的字符串。Opera未實現此屬性。 | | lastMatch | $& | 最近一次的匹配項。Opera未實現此屬性。 | | lastParen | $+ | 最近一次匹配的捕獲組。Opera未實現此屬性。 | | leftContext | $` | input字符串中lastMatch之前的文本。 | | multiline | $* | 布爾值，表示是否所有表達式都使用多行模式。IE和Opera未實現此屬性。 | | rightContext | $' | Input字符串中lastMatch之后的文本。 | 使用這些屬性可以從?`exec()`?或?`test()`?執行的操作中提取出更具體的信息。請看下面的例子。 ~~~ 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 } ~~~ 如前所述，例子使用的長屬性名都可以用相應的短屬性名來代替。只不過，由于這些短屬性名大都不是有效的 JavaScript 標識符，因此必須通過方括號語法來訪問它們，如下所示。 ~~~ 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 } ~~~ 除了上面介紹的幾個屬性之外，還有多達9個用于存儲捕獲組的構造函數屬性。訪問這些屬性的語法是`RegExp.$1`、`RegExp.$2`...`RegExp.$9`，分別用于存儲第一、第二...第九個匹配的捕獲組。在調用?`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 } ~~~ 這里創建了一個包含兩個捕獲組的模式，并用該模式測試了一個字符串。即使?`test()`?方法只返回一個布爾值，但?`RegExp`?構造函數的屬性?`$1`?和?`$2`?也會被匹配相應捕獲組的字符串自動填充。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#模式的局限性)模式的局限性盡管 JavaScript 中的正則表達式功能還是比較完備的，但仍然缺少某些語言（特別是 Perl）所支持的高級正則表達式特性。下面列出了 JavaScript 正則表達式所不支持的特性。 * 匹配字符串開始和結尾的\A和\Z錨 * 向后查找（lookbehind） * 并集和交集類 * 原子組（atomic grouping） * Unicode支持（單個字符除外，如\uFFFF） * 命名的捕獲組 * s（single，單行）和x（free-spacing，無間隔）匹配模式 * 條件匹配 * 正則表達式注釋即使存在這些限制，JavaScript 正則表達式仍然是非常強大的，能夠幫我們完成絕大多數模式匹配任務。 ## [](https://github.com/stone0090/javascript-lessons/tree/master/1.10-RegExpObjects#關卡)關卡按要求完成下列常用的正則表達式。 ~~~ // 挑戰一：數字 var pattern1 = null; // 補全該正則表達式 console.log(pattern1.test('123')); // true console.log(pattern1.test('abc')); // false ~~~ ~~~ // 挑戰二：3位的數字 var pattern2 = null; // 補全該正則表達式 console.log(pattern2.test('123')); // true console.log(pattern2.test('1234')); // false ~~~ ~~~ // 挑戰三：至少3位的數字 var pattern3 = null; // 補全該正則表達式 console.log(pattern3.test('1234')); // true console.log(pattern3.test('12')); // false ~~~ ~~~ // 挑戰四：3-5位的數字 var pattern4 = null; // 補全該正則表達式 console.log(pattern4.test('1234')); // true console.log(pattern4.test('1')); // false ~~~ ~~~ // 挑戰五：由26個英文字母組成的字符串 var pattern5 = null; // 補全該正則表達式 console.log(pattern5.test('abc')); // true console.log(pattern5.test('1abc')); // false ~~~ ~~~ // 挑戰六：由數字和26個英文字母組成的字符串 var pattern6 = null; // 補全該正則表達式 console.log(pattern6.test('1abc')); // true console.log(pattern6.test('_abc')); // false ~~~ ~~~ // 挑戰七：日期格式：年-月-日 var pattern7 = null; // 補全該正則表達式 console.log(pattern7.test('2016-08-20')); // true console.log(pattern7.test('2016/08/20')); // false ~~~ ~~~ // 挑戰八：時間格式：小時:分鐘, 24小時制 var pattern8 = null; // 補全該正則表達式 console.log(pattern8.test('13:45')); // true console.log(pattern8.test('13點45')); // false ~~~ ~~~ // 挑戰九：中國大陸身份證號，15位或18位 var pattern9 = null; // 補全該正則表達式 console.log(pattern9.test('4223222199901090033')); // true console.log(pattern9.test('asdfasdfasfasdf1234')); // false ~~~