《JavaScript 闖關記》之正則表達式
因爲本課程的核心是 JavaScript，因此本文着重講解了「正則表達式」在 JavaScript 中的用法，並未深刻「正則表達式」的具體細節。若是您尚不瞭解「正則表達式」，強烈推薦您先學習 正則表達式30分鐘入門教程 deerchao.net/tutorials/r… 以後，再進行本課程的學習。javascript
正則表達式（regular expression）是一個描述字符模式的對象，使用正則表達式能夠進行強大的模式匹配和文本檢索與替換功能。JavaScript 的正則表達式語法是 Perl5 的正則表達式語法的大型子集，因此對於有 Perl 編程經驗的程序員來講，學習 JavaScript 中的正則表達式是小菜一碟。java
正則表達式的定義
JavaScript 中的正則表達式用 RegExp 對象表示，可使用 RegExp() 構造函數來建立 RegExp 對象，不過 RegExp 對象更可能是經過字面量的語法來建立，使用下面相似 Perl 的語法，就能夠建立一個正則表達式。例如：git
// 推薦寫法
var expression = / pattern / flags ;
// 不推薦寫法
var expression = new RegExp(pattern, flags);複製代碼
其中的模式（pattern）部分，是包含在一對斜槓 / 之間的字符，能夠是任何簡單或複雜的正則表達式，能夠包含字符類、限定符、分組、向前查找以及反向引用。每一個正則表達式均可帶有一或多個標誌（flags），用以標明正則表達式的行爲。正則表達式的匹配模式支持下列3個標誌。程序員
g：表示全局（global）模式，即模式將被應用於全部字符串，而非在發現第一個匹配項時當即中止；i：表示不區分大小寫（case-insensitive）模式，即在肯定匹配項時忽略模式與字符串的大小寫；m：表示多行（multiline）模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項。
所以，一個正則表達式就是一個模式與上述3個標誌的組合體。不一樣組合產生不一樣結果，以下面的例子所示。github
// 匹配字符串中全部"at"的實例
var pattern1 = /at/g;
// 匹配第一個"bat"或"cat"，不區分大小寫
var pattern2 = /[bc]at/i;
// 匹配全部以"at"結尾的3個字符的組合，不區分大小寫
var pattern3 = /.at/gi;複製代碼
與其餘語言中的正則表達式相似，模式中使用的全部元字符都必須轉義。正則表達式中的元字符包括：正則表達式
( [ { \ ^ $ | ) ? * + . ] }複製代碼
這些元字符在正則表達式中都有一或多種特殊用途，所以若是想要匹配字符串中包含的這些字符，就必須對它們進行轉義。下面給出幾個例子。express
// 匹配第一個"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，分別用於存儲第1、第二...第九個匹配的捕獲組。在調用 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複製代碼
更多
關注微信公衆號「劼哥舍」回覆「答案」，獲取關卡詳解。
關注 github.com/stone0090/j…，獲取最新動態。
- 1. JavaScript之正則表達式
- 2. JavaScript 正則表達式相關理解
- 3. JavaScript正則表達式
- 4. javascript正則表達式
- 5. javaScript正則表達式
- 6. javascript 正則表達式
- 7. JavaScript--正則表達式
- 8. JavaScript 正則表達式
- 9. JavaScript正則表達式2
- 10. 《JavaScript》正則表達式
- 更多相關文章...
- • Scala 正則表達式 - Scala教程
- • PHP 正則表達式(PCRE) - PHP參考手冊
- • NewSQL-TiDB相關
- • Tomcat學習筆記（史上最全tomcat學習筆記）
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西