《JavaScript 闖關記》之正規表示式

劼哥stone發表於2019-03-03
JavaScript

由於本課程的核心是 JavaScript，所以本文著重講解了「正規表示式」在 JavaScript 中的用法，並未深入「正規表示式」的具體細節。如果您尚不瞭解「正規表示式」，強烈推薦您先學習 正規表示式30分鐘入門教程 deerchao.net/tutorials/r… 之後，再進行本課程的學習。

正規表示式（regular expression）是一個描述字元模式的物件，使用正規表示式可以進行強大的模式匹配和文字檢索與替換功能。JavaScript 的正規表示式語法是 Perl5 的正規表示式語法的大型子集，所以對於有 Perl 程式設計經驗的程式設計師來說，學習 JavaScript 中的正規表示式是小菜一碟。

正規表示式的定義

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;複製程式碼

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 屬性儲存的是規範形式的字串，即字面量形式所用的字串。

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() 方法仍然會像它是以字面量形式建立的一樣顯示其字串表示。

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["複製程式碼

“__JJ_LT_JJ__/span__JJ_GT_JJ__]); __JJ_LT_JJ__span class=”hljs-comment”__JJ_GT_JJ__// summer__JJ_LT_JJ__/span__JJ_GT_JJ__
__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__console__JJ_LT_JJ__/span__JJ_GT_JJ__.log(__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__RegExp__JJ_LT_JJ__/span__JJ_GT_JJ__[__JJ_LT_JJ__span class=”hljs-string”__JJ_GT_JJ__”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
}amp;”__JJ_LT_JJ__/span__JJ_GT_JJ__]); __JJ_LT_JJ__span class=”hljs-comment”__JJ_GT_JJ__// short__JJ_LT_JJ__/span__JJ_GT_JJ__
__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__console__JJ_LT_JJ__/span__JJ_GT_JJ__.log(__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__RegExp__JJ_LT_JJ__/span__JJ_GT_JJ__[__JJ_LT_JJ__span class=”hljs-string”__JJ_GT_JJ__”$+”__JJ_LT_JJ__/span__JJ_GT_JJ__]); __JJ_LT_JJ__span class=”hljs-comment”__JJ_GT_JJ__// s__JJ_LT_JJ__/span__JJ_GT_JJ__
__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__console__JJ_LT_JJ__/span__JJ_GT_JJ__.log(__JJ_LT_JJ__span class=”hljs-built_in”__JJ_GT_JJ__RegExp__JJ_LT_JJ__/span__JJ_GT_JJ__[__JJ_LT_JJ__span class=”hljs-string”__JJ_GT_JJ__”$*”__JJ_LT_JJ__/span__JJ_GT_JJ__]); __JJ_LT_JJ__span class=”hljs-comment”__JJ_GT_JJ__// false__JJ_LT_JJ__/span__JJ_GT_JJ__
}

除了上面介紹的幾個屬性之外，還有多達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 也會被匹配相應捕獲組的字串自動填充。

模式的侷限性

儘管 JavaScript 中的正規表示式功能還是比較完備的，但仍然缺少某些語言（特別是 Perl）所支援的高階正規表示式特性。下面列出了 JavaScript 正規表示式所不支援的特性。

  • 匹配字串開始和結尾的A和錨
  • 向後查詢（lookbehind）
  • 並集和交集類
  • 原子組（atomic grouping）
  • Unicode支援（單個字元除外，如uFFFF）
  • 命名的捕獲組
  • s（single，單行）和x（free-spacing，無間隔）匹配模式
  • 條件匹配
  • 正規表示式註釋

即使存在這些限制，JavaScript 正規表示式仍然是非常強大的，能夠幫我們完成絕大多數模式匹配任務。

關卡

按要求完成下列常用的正規表示式。

// 挑戰一：數字
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複製程式碼

更多

關注微信公眾號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。

相關文章