文章首發於[sau交流學習社區](https://www.mwcxs.top/page/585.html)
一、前言
正則表達式是匹配模式，要么匹配字符，要么匹配位置。
正則里面的元字符太多了，沒有系統性，可以分為：
（1）字符匹配攻略
（2）位置匹配攻略
二、字符匹配
包括：兩種模糊匹配，字符數組，量詞，分支結構。
1.1兩種模糊匹配
正則精確匹配乜有意義的，比如正則/saucxs/，只能匹配字符串中的"saucxs"這個子串。
var regex = /saucxs/; console.log(regex.test('saucxs')); //true console.log(regex.test('123saucxs4560')); //true正則很強大的地方就是，實現模糊匹配。
模糊匹配分為：（1）橫向模糊匹配；（2）縱向模糊匹配。
1.1.1橫向模糊匹配
橫向模糊匹配指的是：一個正則可匹配的字符串的長度不是固定的，可以是很多種情況。
實現方式：使用量詞。比如：{m,n}表示的連續出現最少m次，最多n次。
比如正則： /ab{2,5}c/表示匹配這樣一個字符串：第一個字符是‘a’，接下來第2個到第5個字符是‘b’，最后是字符‘c’。
正則可視化形式如下：
RegExp：/ab{2,5}c/
測試一下：
var regex = /ab{2,5}c/g; var string = "abc abbc abbbc abbbbc abbbbbc abbbbbbc"; console.log( string.match(regex) ); // ["abbc", "abbbc", "abbbbc", "abbbbbc"]正則里的g是正則的一個修飾符，表示全局匹配，即按照順序找到滿足匹配的所有子串。
1.1.2縱向模糊匹配
縱向模糊匹配的是，一個正則匹配的字符串，具體到某一個字符時。
實現的方式：使用字符組。比如[abc]，表示該字符可以是‘a’，‘b’，‘c’中的任何一個。
比如正則/a[123]b/可以匹配到如下三種字符串'a1b'，'a2b'，'a3b'。
可視化過程：
RegExp：/a[123]b/
測試一下
var regex = /a[123]b/g; var string = "a0b a1b a2b a3b a4b"; console.log( string.match(regex) ); // ["a1b", "a2b", "a3b"]橫向和縱向匹配，能解決很多的正則匹配問題
1.2字符組
字符組只是其中一個字符
比如[abc]，表示匹配一個字符，它可以是'a'，'b'，'c'之一。
1.2.1范圍表示法
如果字符組中字符特別多，怎么處理？可以使用范圍表示法。
比如[123456abcdefGHIJKLM]，可以寫成[1-6a-fG-M]。用連字符 - 來省略和簡寫。
如果要匹配'a'，'-',‘z’這三個字符中任意一個字符，怎么處理？
答：這個時候不能寫成[a-z]，因為這個是表示的是小寫字母中的任何一個字符。可以寫成[-az]或[az-]或[a\-z]。就是說要不放在開頭，要不放在結尾，要么轉義。
個人覺得用[a\-z]最好，使用\將連字符 - 轉義成普通字符。
1.2.2排除字符組
縱向模糊匹配，還有一種情形：某一個字符可以是除了'a'，'b'，'c'之外的任何字符。
這個時候就需要使用排除字符組（反義字符組），比如[^abc]，表示的是一個除'a'，'b'，'c'之外的任意一個字符。
字符組的第一位放^（脫字符），表示求反的意思。
1.2.3常見的簡寫形式
有了字符組的概念后，一些常見的符號我們就可以理解了，因為都是系統自帶的簡寫形式。
如果要匹配任意字符怎么辦？可以使用 [\d\D]、[\w\W]、[\s\S] 和 [^] 中任何的一個。
1.3量詞
量詞也稱為重復，掌握{m,n}的准確含義，只需要記住一些簡寫形式。
1.3.1簡寫形式
正則RegExp：/a{1,2}b{3,}c{4}d?e+f*/
1.3.2貪婪匹配與惰性匹配
看個栗子：
var regex = /\d{2,5}/g; var string = "123 1234 12345 123456"; console.log( string.match(regex) ); // ["123", "1234", "12345", "12345"]正則/\d{2,5}/表示數字連續出現2到5次。會匹配第2位，第3位，第4位，第5位的連續數字。
但是他是貪婪的，會盡可能多的匹配。
還有一種就是懶惰的匹配（盡可能少的匹配）：
var regex = /\d{2,5}?/g; var string = "123 1234 12345 123456"; console.log( string.match(regex) ); // ["12", "12", "34", "12", "34", "12", "34", "56"]正則/\d{2,5}?/表示，雖然2到5次都行，當2個就夠的時候，就不再往下嘗試了。
惰性實現：通過在量詞后面加個問號就能實現惰性匹配
記憶方式：量詞后面加個問號，問一問你知足了嗎，你很貪婪嗎？
RegExp：/a{1,2}?b{3,}?c{4}?d??e+?f*?/
1.4多選分支
一個模式可以實現橫向和縱向模糊匹配，而多選分支可以支持多個子模式任選其一。
具體形式：：(p1|p2|p3)，其中 p1、p2 和 p3 是子模式，用 |（管道符）分隔，表示其中任何之一。
比如：要匹配字符串good和nice，可以使用/good|nice/。
可視化形式如下：
RegExp：/good|nice/
測試如下
var regex = /good|nice/g; var string = "good idea, nice try."; console.log( string.match(regex) ); // ["good", "nice"]有個地方需要注意：我用 /good|goodbye/，去匹配 "goodbye" 字符串時，結果是 "good"：
var regex = /good|goodbye/g; var string = "goodbye"; console.log( string.match(regex) ); // ["good"]而把正則改成 /goodbye|good/，結果是：
var regex = /goodbye|good/g; var string = "goodbye"; console.log( string.match(regex) ); // ["goodbye"]也就是說，分支結構也是惰性的，即當前面的匹配上了，后面的就不再嘗試了。
1.5案例分析
匹配字符，無非就是字符組，量詞，分支結構的組合使用。
多練習一下：
1.5.1匹配16進制的顏色值
要求匹配：
#ffbbad
#Fc01DF
#FFF
#ffE分析：
表示一個16進制字符，可以使用字符組[0-99a-fA-F]；
其中字符可以出現3或6次，需要使用量詞和分支結構；
使用分支結構，需要注意順序。
var regex = /#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g; var string = "#ffbbad #Fc01DF #FFF #ffE"; console.log( string.match(regex) ); // ["#ffbbad", "#Fc01DF", "#FFF", "#ffE"]可視化形式：
REgExp：/#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})/g
1.5.2匹配時間
以24小時為例
要求匹配：
23:59 02:07分析：
一共四位數字，第一位數字可以為[0-2]；
當第1位為'2'時，第2位可以是為[0-3]，其他情況，第2位為[0-9]；
第三位數字為[0-5]，第四位為[0-9]。
正則如下：
var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/; console.log( regex.test("23:59") ); //true console.log( regex.test("02:07") ); //true console.log( regex.test("24:00") ); //falseconsole.log( regex.test("24:01") ); //false注意：正則中使用了^和$，分別表示字符串開頭和結尾。
如果要求可以匹配'7:9'，也就是說時分前面的'0'可以省略。
var regex = /^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/; console.log( regex.test("23:59") ); // true console.log( regex.test("02:07") ); //true console.log( regex.test("7:9") ); //true可視化形式：
RegExp：/^(0?[0-9]|1[0-9]|[2][0-3]):(0?[0-9]|[1-5][0-9])$/
1.5.3匹配日期
比如要求yyyy-mm-dd格式
要求匹配：
2017-06-10分析：
年，4位數字即可，可以用[0-9]{4}；
月，共12個月，分為兩種："01","02",...,"09"和"10","11","12"，可以用(0[1-9]|1[0-2]);
日，最大31天，可以用(0[1-9]|[12][0-9]|3[01])。
正則如下：
var regex = /^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/; console.log( regex.test("2017-06-10") ); //true可視化形式：
RegExp：/^[0-9]{4}-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01])$/
注意：其實並不是很准確的，因為要考慮的還有是否是閏年，2月份特殊情況等情況。
1.5.4匹配id
要求從
<div id="container" class="main"></div>提取出id="container"
最初想應該是這樣的
var regex = /id=".*"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // id="container" class="main"可視化形式：
RegExp：/id=".*"/g
因為 . 是通配符，本身就會匹配雙引號的，而量詞 * 又是貪婪的，當遇到container后面雙引號時候，是不會停下來的，會繼續匹配，直到遇到最后一個雙引號為止。
解決辦法：使用惰性匹配
var regex = /id=".*?"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // id="container"其實這樣也是有問題的。效率比較低，因為匹配原理會涉及到“回溯”這個概念。可以優化一下：
var regex = /id="[^"]*"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // id="container"