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

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

正則表達式（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["$'"]);   // 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 也會被匹配相應捕獲組的字符串自動填充。

模式的侷限性

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

匹配字符串開始和結尾的\A和\Z錨
向後查找（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

關注微信公衆號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 https://github.com/stone0090/javascript-lessons，獲取最新動態。

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

正則表達式的定義

`RegExp` 實例屬性

`RegExp` 實例方法

`RegExp` 構造函數屬性

模式的侷限性

關卡

更多

這種嵌套字典類型的數據，我想把它讀取到df裏，如何操作？

微調真的能讓LLM學到新東西嗎:引入新知識可能讓模型產生更多的幻覺

iNeuOS工業互聯網操作系統，增加電力IEC104協議

微服務實踐k8s&dapr開發部署實驗（3）訂閱發佈

kbgressdb之數據結構V0.2

樣式佈局分享-基於frozen.js的移動OA

tab.js分享及瀏覽器兼容性問題彙總

如何排版微信公衆號「代碼塊」

《JavaScript 闖關記》之變量和數據類型

《JavaScript 闖關記》之表達式和運算符

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

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

正則表達式的定義

RegExp 實例屬性

RegExp 實例方法

RegExp 構造函數屬性

模式的侷限性

關卡

更多

`RegExp` 實例屬性

`RegExp` 實例方法

`RegExp` 構造函數屬性