正則表達式學習（一）-- 字符匹配

文章首發於[sau交流學習社區](https://www.mwcxs.top/page/585.html)

1、前言

正則表達式是匹配模式，要麼匹配字符，要麼匹配位置。

正則裏面的元字符太多了，沒有系統性，能夠分爲：

（1）字符匹配攻略

（2）位置匹配攻略

 

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)，其中 p一、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"