當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

正则表达式攻略

發(fā)布時間：2023/12/20 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了正则表达式攻略小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

第一章正則表達(dá)式字符匹配攻略

正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置。請記住這句話。然而關(guān)于正則如何匹配字符的學(xué)習(xí)，大部分人都覺得這塊比較雜亂。畢竟元字符太多了，看起來沒有系統(tǒng)性，不好記。本章就解決這個問題。內(nèi)容包括：兩種模糊匹配字符組量詞分支結(jié)構(gòu) 案例分析:

1. 兩種模糊匹配

如果正則只有精確匹配是沒多大意義的，比如/hello/，也只能匹配字符串中的"hello"這個子串。

var regex = /hello/; console.log( regex.test("hello") ); // => true

正則表達(dá)式之所以強(qiáng)大，是因為其能實現(xiàn)模糊匹配。而模糊匹配，有兩個方向上的“模糊”：橫向模糊和縱向模糊。

1.1 橫向模糊匹配

橫向模糊指的是，一個正則可匹配的字符串的長度不是固定的，可以是多種情況的。其實現(xiàn)的方式是使用量詞。譬如{m,n}，表示連續(xù)出現(xiàn)最少m次，最多n次。比如/ab{2,5}c/表示匹配這樣一個字符串：第一個字符是“a”，接下來是2到5個字符“b”，最后是字符“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"]

注意：案例中用的正則是/ab{2,5}c/g，后面多了g，它是正則的一個修飾符。表示全局匹配，即在目標(biāo)字符串中按順序找到滿足匹配模式的所有子串，強(qiáng)調(diào)的是“所有”，而不只是“第一個”。g是單詞global的首字母。

1.2 縱向模糊匹配

縱向模糊指的是，一個正則匹配的字符串，具體到某一位字符時，它可以不是某個確定的字符，可以有多種可能。其實現(xiàn)的方式是使用字符組。譬如[abc]，表示該字符是可以字符“a”、“b”、“c”中的任何一個。比如/a[123]b/可以匹配如下三種字符串：“a1b”、“a2b”、“a3b”。測試如下：

var regex = /a[123]b/g; var string = "a0b a1b a2b a3b a4b"; console.log( string.match(regex) ); // => ["a1b", "a2b", "a3b"]

以上就是本章講的主體內(nèi)容，只要掌握橫向和縱向模糊匹配，就能解決很大部分正則匹配問題。接下來的內(nèi)容就是展開說了，如果對此都比較熟悉的話，可以跳過，直接看本章案例那節(jié)。

2. 字符組

需要強(qiáng)調(diào)的是，雖叫字符組（字符類），但只是其中一個字符。例如[abc]，表示匹配一個字符，它可以是“a”、“b”、“c”之一。2.1 范圍表示法如果字符組里的字符特別多的話，怎么辦？可以使用范圍表示法。比如[123456abcdefGHIJKLM]，可以寫成[1-6a-fG-M]。用連字符-來省略和簡寫。因為連字符有特殊用途，那么要匹配“a”、“-”、“z”這三者中任意一個字符，該怎么做呢？不能寫成[a-z]，因為其表示小寫字符中的任何一個字符?？梢詫懗扇缦碌姆绞?#xff1a;[-az]或[az-]或[a\-z]。即要么放在開頭，要么放在結(jié)尾，要么轉(zhuǎn)義?？傊粫屢嬲J(rèn)為是范圍表示法就行了。

2.2 排除字符組

縱向模糊匹配，還有一種情形就是，某位字符可以是任何東西，但就不能是"a"、“b”、“c”。此時就是排除字符組（反義字符組）的概念。例如[^abc]，表示是一個除"a"、“b”、"c"之外的任意一個字符。字符組的第一位放^（脫字符），表示求反的概念。當(dāng)然，也有相應(yīng)的范圍表示法。

2.3 常見的簡寫形式

有了字符組的概念后，一些常見的符號我們也就理解了。因為它們都是系統(tǒng)自帶的簡寫形式。\d就是[0-9]。表示是一位數(shù)字。記憶方式：其英文是digit（數(shù)字）。\D就是[^0-9]。表示除數(shù)字外的任意字符。\w就是[0-9a-zA-Z_]。表示數(shù)字、大小寫字母和下劃線。記憶方式：w是word的簡寫，也稱單詞字符。\W是[^0-9a-zA-Z_]。非單詞字符。\s是[ \t\v\n\r\f]。表示空白符，包括空格、水平制表符、垂直制表符、換行符、回車符、換頁符。記憶方式：s是space character的首字母。\S是[^ \t\v\n\r\f]。非空白符。.就是[^\n\r\u2028\u2029]。通配符，表示幾乎任意字符。換行符、回車符、行分隔符和段分隔符除外。記憶方式：想想省略號…中的每個點，都可以理解成占位符，表示任何類似的東西。如果要匹配任意字符怎么辦？可以使用[\d\D]、[\w\W]、[\s\S]和[^]中任何的一個。

3. 量詞

量詞也稱重復(fù)。掌握{(diào)m,n}的準(zhǔn)確含義后，只需要記住一些簡寫形式。

3.1 簡寫形式

{m,} 表示至少出現(xiàn)m次。{m} 等價于{m,m}，表示出現(xiàn)m次。? 等價于{0,1}，表示出現(xiàn)或者不出現(xiàn)。記憶方式：問號的意思表示，有嗎？+ 等價于{1,}，表示出現(xiàn)至少一次。記憶方式：加號是追加的意思，得先有一個，然后才考慮追加。* 等價于{0,}，表示出現(xiàn)任意次，有可能不出現(xiàn)。記憶方式：看看天上的星星，可能一顆沒有，可能零散有幾顆，可能數(shù)也數(shù)不過來。

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}/，表示數(shù)字連續(xù)出現(xiàn)2到5次。會匹配2位、3位、4位、5位連續(xù)數(shù)字。但是其是貪婪的，它會盡可能多的匹配。你能給我6個，我就要5個。你能給我3個，我就3要個。反正只要在能力范圍內(nèi)，越多越好。我們知道有時貪婪不是一件好事（請看文章最后一個例子）。而惰性匹配，就是盡可能少的匹配：

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次都行，當(dāng)2個就夠的時候，就不在往下嘗試了。通過在量詞后面加個問號就能實現(xiàn)惰性匹配，因此所有惰性匹配情形如下：{m,n}? {m,}???+?*?對惰性匹配的記憶方式是：量詞后面加個問號，問一問你知足了嗎，你很貪婪嗎？

4. 多選分支

一個模式可以實現(xiàn)橫向和縱向模糊匹配。而多選分支可以支持多個子模式任選其一。具體形式如下：(p1|p2|p3)，其中p1、p2和p3是子模式，用|（管道符）分隔，表示其中任何之一。例如要匹配"good"和"nice"可以使用/good|nice/。測試如下：

var regex = /good|nice/g; var string = "good idea, nice try."; console.log( string.match(regex) ); // => ["good", "nice"]

但有個事實我們應(yīng)該注意，比如我用/good|goodbye/，去匹配"goodbye"字符串時，結(jié)果是"good"：

var regex = /good|goodbye/g; var string = "goodbye"; console.log( string.match(regex) ); // => ["good"]

而把正則改成/goodbye|good/，結(jié)果是：

var regex = /goodbye|good/g; var string = "goodbye"; console.log( string.match(regex) ); // => ["goodbye"]

也就是說，分支結(jié)構(gòu)也是惰性的，即當(dāng)前面的匹配上了，后面的就不再嘗試了。

5. 案例分析

匹配字符，無非就是字符組、量詞和分支結(jié)構(gòu)的組合使用罷了。下面找?guī)讉€例子演練一下（其中，每個正則并不是只有唯一寫法）：

5.1 匹配16進(jìn)制顏色值

要求匹配：#ffbbad#Fc01DF#FFF#ffE分析：表示一個16進(jìn)制字符，可以用字符組[0-9a-fA-F]。其中字符可以出現(xiàn)3或6次，需要是用量詞和分支結(jié)構(gòu)。使用分支結(jié)構(gòu)時，需要注意順序。正則如下：

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"]

5.2 匹配時間以24小時制為例

要求匹配：23:5902:07分析：共4位數(shù)字，第一位數(shù)字可以為[0-2]。當(dāng)?shù)?位為2時，第2位可以為[0-3]，其他情況時，第2位為[0-9]。第3位數(shù)字為[0-5]，第4位為[0-9]正則如下：

var regex = /^([01][0-9]|[2][0-3]):[0-5][0-9]$/; console.log( regex.test("23:59") ); console.log( regex.test("02:07") ); // => true // => true

如果也要求匹配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") ); console.log( regex.test("02:07") ); console.log( regex.test("7:9") ); // => true // => true // => true

5.3 匹配日期比如yyyy-mm-dd格式

要求匹配：2017-06-10分析：年，四位數(shù)字即可，可用[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

5.4 window操作系統(tǒng)文件路徑

要求匹配：F:\study\javascript\regex\regular expression.pdfF:\study\javascript\regex\F:\study\javascriptF:\
分析：
整體模式是: 盤符:\文件夾\文件夾\文件夾\其中匹配F:\，需要使用[a-zA-Z]:\\，其中盤符不區(qū)分大小寫，注意\字符需要轉(zhuǎn)義。文件名或者文件夾名，不能包含一些特殊字符，此時我們需要排除字符組[^\\:*<>|"?\r\n/]來表示合法字符。另外不能為空名，至少有一個字符，也就是要使用量詞+。因此匹配“文件夾\”，可用[^\\:*<>|"?\r\n/]+\\。另外“文件夾\”，可以出現(xiàn)任意次。也就是([^\\:*<>|"?\r\n/]+\\)*。其中括號提供子表達(dá)式。路徑的最后一部分可以是“文件夾”，沒有\(zhòng)，因此需要添加([^\\:*<>|"?\r\n/]+)?。最后拼接成了一個看起來比較復(fù)雜的正則：

var regex = /^[a-zA-Z]:\$[^\\:*<>|"?\r\n/]+\$*([^\\:*<>|"?\r\n/]+)?$/; console.log( regex.test("F:\\study\\javascript\\regex\\regular expression.pdf") ); console.log( regex.test("F:\\study\\javascript\\regex\\") ); console.log( regex.test("F:\\study\\javascript") ); console.log( regex.test("F:\\") ); // => true // => true // => true // => true

其中，JS中字符串表示\時，也要轉(zhuǎn)義。

5.5 匹配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"

因為.是通配符，本身就匹配雙引號的，而量詞*又是貪婪的，當(dāng)遇到container后面雙引號時，不會停下來，會繼續(xù)匹配，直到遇到最后一個雙引號為止。解決之道，可以使用惰性匹配：

var regex = /id=".*?"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // => id="container"

當(dāng)然，這樣也會有個問題。效率比較低，因為其匹配原理會涉及到“回溯”這個概念（這里也只是順便提一下，第四章會詳細(xì)說明）?？梢詢?yōu)化如下：

var regex = /id="[^"]*"/ var string = '<div id="container" class="main"></div>'; console.log(string.match(regex)[0]); // => id="container"

第二章正則表達(dá)式位置匹配攻略

正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置。內(nèi)容包括：什么是位置？如何匹配位置？位置的特性幾個應(yīng)用實例分析

1. 什么是位置呢？

位置是相鄰字符之間的位置。

2. 如何匹配位置呢？

在ES5中，共有6個錨字符：^ $ \b \B (?=p) (?!p)2.1 ^和$^（脫字符）匹配開頭，在多行匹配中匹配行開頭。$（美元符號）匹配結(jié)尾，在多行匹配中匹配行結(jié)尾。比如我們把字符串的開頭和結(jié)尾用"#"替換（位置可以替換成字符的！）：

var result = "hello".replace(/^|$/g, '#'); console.log(result); // => "#hello#"

多行匹配模式時，二者是行的概念，這個需要我們的注意：

var result = "I\nlove\njavascript".replace(/^|$/gm, '#'); console.log(result); /* #I# #love# #javascript# */

2.2 \b和\B

\b是單詞邊界，具體就是\w和\W之間的位置，也包括\w和^之間的位置，也包括\w和$之間的位置。比如一個文件名是"[JS] Lesson_01.mp4"中的\b，如下：

var result = "[JS] Lesson_01.mp4".replace(/\b/g, '#'); console.log(result); // => "[#JS#] #Lesson_01#.#mp4#"

為什么是這樣呢？這需要仔細(xì)看看。首先，我們知道，\w是字符組[0-9a-zA-Z_]的簡寫形式，即\w是字母數(shù)字或者下劃線的中任何一個字符。而\W是排除字符組[^0-9a-zA-Z_]的簡寫形式，即\W是\w以外的任何一個字符。
此時我們可以看看"[#JS#] #Lesson_01#.#mp4#“中的每一個”#"，是怎么來的。
第一個"#"，兩邊是"["與"J"，是\W和\w之間的位置。
第二個"#"，兩邊是"S"與"]"，也就是\w和\W之間的位置。
第三個"#"，兩邊是空格與"L"，也就是\W和\w之間的位置。
第四個"#"，兩邊是"1"與"."，也就是\w和\W之間的位置。
第五個"#"，兩邊是"."與"m"，也就是\W和\w之間的位置。
第六個"#"，其對應(yīng)的位置是結(jié)尾，但其前面的字符"4"是\w，即\w和$之間的位置。
知道了\b的概念后，那么\B也就相對好理解了。\B就是\b的反面的意思，非單詞邊界。例如在字符串中所有位置中，扣掉\b，剩下的都是\B的。具體說來就是\w與\w、\W與\W、^與\W，\W與$之間的位置。比如上面的例子，把所有\(zhòng)B替換成"#"：

var result = "[JS] Lesson_01.mp4".replace(/\B/g, '#'); console.log(result); // => "#[J#S]# L#e#s#s#o#n#_#0#1.m#p#4"

2.3 (?=p)和(?!p)(?=p)

其中p是一個子模式，即p前面的位置。比如(?=l)，表示’l’字符前面的位置，例如：

var result = "hello".replace(/(?=l)/g, '#'); console.log(result); // => "he#l#lo"

而(?!p)就是(?=p)的反面意思，比如：

var result = "hello".replace(/(?!l)/g, '#'); console.log(result); // => "#h#ell#o#"

二者的學(xué)名分別是positive lookahead和negative lookahead。中文翻譯分別是正向先行斷言和負(fù)向先行斷言。ES6中，還支持positive lookbehind和negative lookbehind。具體是(?<=p)和(?<!p)。也有書上把這四個東西，翻譯成環(huán)視，即看看右邊或看看左邊。但一般書上，沒有很好強(qiáng)調(diào)這四者是個位置。比如(?=p)，一般都理解成：要求接下來的字符與p匹配，但不能包括p的那些字符。而在本人看來(?=p)就與^一樣好理解，就是p前面的那個位置。

3. 位置的特性

對于位置的理解，我們可以理解成空字符""。比如"hello"字符串等價于如下的形式：

"hello" == "" + "h" + "" + "e" + "" + "l" + "" + "l" + "o" + "";// 也等價于："hello" == "" + "" + "hello"

因此，把/^hello$/寫成/^^hello?$/，是沒有任何問題的：

var result = /^^hello?$/.test("hello"); console.log(result); // => true//甚至可以寫成更復(fù)雜的: var result = /(?=he)^^he(?=\w)llo$\b\b$/.test("hello"); console.log(result); // => true

也就是說字符之間的位置，可以寫成多個。把位置理解空字符，是對位置非常有效的理解方式。

4. 相關(guān)案例

4.1 不匹配任何東西的正則

讓你寫個正則不匹配任何東西easy，/.^/因為此正則要求只有一個字符，但該字符后面是開頭。

4.2 數(shù)字的千位分隔符表示法

比如把"12345678"，變成"12,345,678"?？梢娛切枰严鄳?yīng)的位置替換成","。思路是什么呢？

4.2.1 弄出最后一個逗號

使用(?=\d{3}$)就可以做到：

var result = "12345678".replace(/(?=\d{3}$)/g, ',') console.log(result); // => "12345,678"

4.2.2 弄出所有的逗號

因為逗號出現(xiàn)的位置，要求后面3個數(shù)字一組，也就是\d{3}至少出現(xiàn)一次。此時可以使用量詞+：

var result = "12345678".replace(/(?=(\d{3})+$)/g, ',') console.log(result); // => "12,345,678"

4.2.3 匹配其余

案例寫完正則后，要多驗證幾個案例，此時我們會發(fā)現(xiàn)問題：

var result = "123456789".replace(/(?=(\d{3})+$)/g, ',') console.log(result); // => ",123,456,789"

因為上面的正則，僅僅表示把從結(jié)尾向前數(shù)，一但是3的倍數(shù)，就把其前面的位置替換成逗號。因此才會出現(xiàn)這個問題。怎么解決呢？我們要求匹配的到這個位置不能是開頭。我們知道匹配開頭可以使用^，但要求這個位置不是開頭怎么辦？easy，(?!^)，你想到了嗎？測試如下：

var string1 = "12345678", string2 = "123456789"; reg = /(?!^)(?=(\d{3})+$)/g;var result = string1.replace(reg, ',') console.log(result); // => "12,345,678"result = string2.replace(reg, ','); console.log(result); // => "123,456,789"

4.2.4 支持其他形式

如果要把"12345678 123456789"替換成"12,345,678 123,456,789"。此時我們需要修改正則，把里面的開頭^和結(jié)尾$，替換成\b：

var string = "12345678 123456789", reg = /(?!\b)(?=(\d{3})+\b)/g;var result = string.replace(reg, ',') console.log(result); // => "12,345,678 123,456,789"

其中(?!\b)怎么理解呢？要求當(dāng)前是一個位置，但不是\b前面的位置，其實(?!\b)說的就是\B。因此最終正則變成了：/\B(?=(\d{3})+\b)/g。

4.3 驗證密碼問題

密碼長度6-12位，由數(shù)字、小寫字符和大寫字母組成，但必須至少包括2種字符。此題，如果寫成多個正則來判斷，比較容易。但要寫成一個正則就比較困難。那么，我們就來挑戰(zhàn)一下?？纯次覀儗ξ恢玫睦斫馐欠裆羁獭?/p>

4.3.1 簡化不考慮“但必須至少包括2種字符”這一條件。

我們可以容易寫出：

var reg = /^[0-9A-Za-z]{6,12}$/;

4.3.2 判斷是否包含有某一種字符假設(shè)

要求的必須包含數(shù)字，怎么辦？此時我們可以使用(?=.*[0-9])來做。因此正則變成：

var reg = /(?=.*[0-9])^[0-9A-Za-z]{6,12}$/;

4.3.3 同時包含具體兩種字符

比如同時包含數(shù)字和小寫字母，可以用(?=.*[0-9])(?=.*[a-z])來做。因此正則變成：

4.3.4 解答

我們可以把原題變成下列幾種情況之一：同時包含數(shù)字和小寫字母同時包含數(shù)字和大寫字母同時包含小寫字母和大寫字母同時包含數(shù)字、小寫字母和大寫字母以上的4種情況是或的關(guān)系（實際上，可以不用第4條）。
最終答案是：

var reg = /((?=.*[0-9])(?=.*[a-z])|(?=.*[0-9])(?=.*[A-Z])|(?=.*[a-z])(?=.*[A-Z]))^[0-9A-Za-z]{6,12}$/; console.log( reg.test("1234567") ); // false 全是數(shù)字 console.log( reg.test("abcdef") ); // false 全是小寫字母 console.log( reg.test("ABCDEFGH") ); // false 全是大寫字母 console.log( reg.test("ab23C") ); // false 不足6位 console.log( reg.test("ABCDEF234") ); // true 大寫字母和數(shù)字 console.log( reg.test("abcdEF234") ); // true 三者都有

4.3.5 解惑

上面的正則看起來比較復(fù)雜，只要理解了第二步，其余就全部理解了。/(?=.*[0-9])^[0-9A-Za-z]{6,12}$/對于這個正則，我們只需要弄明白(?=.*[0-9])^即可。分開來看就是(?=.*[0-9])和^。
^表示開頭前面還有個位置（當(dāng)然也是開頭，即同一個位置，想想之前的空字符類比）。
(?=.*[0-9])表示該位置后面的字符匹配.*[0-9]，即，有任何多個任意字符，后面再跟個數(shù)字。翻譯成大白話，就是接下來的字符，必須包含個數(shù)字。

4.3.6 另外一種解法

“至少包含兩種字符”的意思就是說，不能全部都是數(shù)字，也不能全部都是小寫字母，也不能全部都是大寫字母。那么要求“不能全部都是數(shù)字”，怎么做呢？(?!p)出馬！對應(yīng)的正則是：

var reg = /(?!^[0-9]{6,12}$)^[0-9A-Za-z]{6,12}$/;

三種“都不能”呢？最終答案是：

第三章正則表達(dá)式括號的作用

不管哪門語言中都有括號。正則表達(dá)式也是一門語言，而括號的存在使這門語言更為強(qiáng)大。對括號的使用是否得心應(yīng)手，是衡量對正則的掌握水平的一個側(cè)面標(biāo)準(zhǔn)。括號的作用，其實三言兩語就能說明白，括號提供了分組，便于我們引用它。引用某個分組，會有兩種情形：在JavaScript里引用它，在正則表達(dá)式里引用它。本章內(nèi)容雖相對簡單，但我也要寫長點。內(nèi)容包括：分組和分支結(jié)構(gòu)捕獲分組反向引用非捕獲分組相關(guān)案例

1. 分組和分支結(jié)構(gòu)

這二者是括號最直覺的作用，也是最原始的功能。

1.1 分組

我們知道/a+/匹配連續(xù)出現(xiàn)的“a”，而要匹配連續(xù)出現(xiàn)的“ab”時，需要使用/(ab)+/。其中括號是提供分組功能，使量詞+作用于“ab”這個整體，測試如下：

var regex = /(ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // => ["abab", "ab", "ababab"]

1.2 分支結(jié)構(gòu)

而在多選分支結(jié)構(gòu)(p1|p2)中，此處括號的作用也是不言而喻的，提供了子表達(dá)式的所有可能。比如，要匹配如下的字符串：I love JavaScriptI love Regular Expression可以使用正則：

var regex = /^I love (JavaScript|Regular Expression)$/; console.log( regex.test("I love JavaScript") ); console.log( regex.test("I love Regular Expression") ); // => true // => true

如果去掉正則中的括號，即/^I love JavaScript|Regular Expression$/，匹配字符串是"I love JavaScript"和"Regular Expression"，當(dāng)然這不是我們想要的。

2. 引用分組

這是括號一個重要的作用，有了它，我們就可以進(jìn)行數(shù)據(jù)提取，以及更強(qiáng)大的替換操作。而要使用它帶來的好處，必須配合使用實現(xiàn)環(huán)境的API。以日期為例。假設(shè)格式是yyyy-mm-dd的，我們可以先寫一個簡單的正則：

var regex = /\d{4}-\d{2}-\d{2}/; 復(fù)制代碼然后再修改成括號版的：var regex = /(\d{4})-(\d{2})-(\d{2})/;

2.1 提取數(shù)據(jù)

比如提取出年、月、日，可以這么做：

var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; console.log( string.match(regex) ); // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

match返回的一個數(shù)組，第一個元素是整體匹配結(jié)果，然后是各個分組（括號里）匹配的內(nèi)容，然后是匹配下標(biāo)，最后是輸入的文本。（注意：如果正則是否有修飾符g，match返回的數(shù)組格式是不一樣的）。另外也可以使用正則對象的exec方法：

var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; console.log( regex.exec(string) ); // => ["2017-06-12", "2017", "06", "12", index: 0, input: "2017-06-12"]

同時，也可以使用構(gòu)造函數(shù)的全局屬性$1至$9來獲取：

2.2 替換

比如，想把yyyy-mm-dd格式，替換成mm/dd/yyyy怎么做？

var regex = /(\d{4})-(\d{2})-(\d{2})/; var string = "2017-06-12"; var result = string.replace(regex, "$2/$3/$1"); console.log(result); // => "06/12/2017"

其中replace中的，第二個參數(shù)里用$1、$2、$3指代相應(yīng)的分組。等價于如下的形式：

3. 反向引用

除了使用相應(yīng)API來引用分組，也可以在正則本身里引用分組。但只能引用之前出現(xiàn)的分組，即反向引用。還是以日期為例。比如要寫一個正則支持匹配如下三種格式：2016-06-122016/06/122016.06.12最先可能想到的正則是:

但也匹配"2016-06/12"這樣的數(shù)據(jù)。假設(shè)我們想要求分割符前后一致怎么辦？此時需要使用反向引用：

注意里面的\1，表示的引用之前的那個分組(-|\/|\.)。不管它匹配到什么（比如-），\1都匹配那個同樣的具體某個字符。我們知道了\1的含義后，那么\2和\3的概念也就理解了，即分別指代第二個和第三個分組?？吹竭@里，此時，恐怕你會有三個問題。

3.1 括號嵌套怎么辦？

以左括號（開括號）為準(zhǔn)。比如：

var regex = /^((\d)(\d(\d)))\1\2\3\4$/; var string = "1231231233"; console.log( regex.test(string) ); // true console.log( RegExp.$1 ); // 123 console.log( RegExp.$2 ); // 1 console.log( RegExp.$3 ); // 23 console.log( RegExp.$4 ); // 3

我們可以看看這個正則匹配模式：第一個字符是數(shù)字，比如說1，第二個字符是數(shù)字，比如說2，第三個字符是數(shù)字，比如說3，接下來的是\1，是第一個分組內(nèi)容，那么看第一個開括號對應(yīng)的分組是什么，是123，接下來的是\2，找到第2個開括號，對應(yīng)的分組，匹配的內(nèi)容是1，接下來的是\3，找到第3個開括號，對應(yīng)的分組，匹配的內(nèi)容是23，最后的是\4，找到第3個開括號，對應(yīng)的分組，匹配的內(nèi)容是3。這個問題，估計仔細(xì)看一下，就該明白了。

3.2 \10表示什么呢？

另外一個疑問可能是，即\10是表示第10個分組，還是\1和0呢？答案是前者，雖然一個正則里出現(xiàn)\10比較罕見。測試如下：

var regex = /(1)(2)(3)(4)(5)(6)(7)(8)(9)(#) \10+/; var string = "123456789# ######" console.log( regex.test(string) ); // => true

3.3 引用不存在的分組會怎樣？

因為反向引用，是引用前面的分組，但我們在正則里引用了不存在的分組時，此時正則不會報錯，只是匹配反向引用的字符本身。例如\2，就匹配"\2"。注意"\2"表示對"2"進(jìn)行了轉(zhuǎn)意。

console.log( regex.test("\1\2\3\4\5\6\7\8\9") ); console.log( "\1\2\3\4\5\6\7\8\9".split("") );

4. 非捕獲分組

之前文中出現(xiàn)的分組，都會捕獲它們匹配到的數(shù)據(jù)，以便后續(xù)引用，因此也稱他們是捕獲型分組。如果只想要括號最原始的功能，但不會引用它，即，既不在API里引用，也不在正則里反向引用。此時可以使用非捕獲分組(?:p)，例如本文第一個例子可以修改為：

var regex = /(?:ab)+/g; var string = "ababa abbb ababab"; console.log( string.match(regex) ); // => ["abab", "ab", "ababab"]

5. 相關(guān)案例

至此括號的作用已經(jīng)講完了，總結(jié)一句話，就是提供了可供我們使用的分組，如何用就看我們的了。

5.1 字符串trim方法

模擬trim方法是去掉字符串的開頭和結(jié)尾的空白符。有兩種思路去做。
第一種，匹配到開頭和結(jié)尾的空白符，然后替換成空字符。如：

function trim(str) {return str.replace(/^\s+|\s+$/g, ''); } console.log( trim(" foobar ") ); // => "foobar"

第二種，匹配整個字符串，然后用引用來提取出相應(yīng)的數(shù)據(jù)：

function trim(str) {return str.replace(/^\s*(.*?)\s*$/g, "$1"); } console.log( trim(" foobar ") ); // => "foobar"

這里使用了惰性匹配*?，不然也會匹配最后一個空格之前的所有空格的。當(dāng)然，前者效率高。

5.2 將每個單詞的首字母轉(zhuǎn)換為大寫

function titleize(str) {return str.toLowerCase().replace(/(?:^|\s)\w/g, function(c) {return c.toUpperCase();}); } console.log( titleize('my name is epeli') ); // => "My Name Is Epeli"

思路是找到每個單詞的首字母，當(dāng)然這里不使用非捕獲匹配也是可以的。

5.3 駝峰化

function camelize(str) {return str.replace(/[-_\s]+(.)?/g, function(match, c) {return c ? c.toUpperCase() : '';}); } console.log( camelize('-moz-transform') ); // => "MozTransform"

其中分組(.)表示首字母。單詞的界定是，前面的字符可以是多個連字符、下劃線以及空白符。正則后面的?的目的，是為了應(yīng)對str尾部的字符可能不是單詞字符，比如str是’-moz-transform '。

5.4 中劃線化

function dasherize(str) {return str.replace(/([A-Z])/g, '-$1').replace(/[-_\s]+/g, '-').toLowerCase(); } console.log( dasherize('MozTransform') ); // => "-moz-transform"

駝峰化的逆過程。

5.5 html轉(zhuǎn)義和反轉(zhuǎn)義

//將HTML特殊字符轉(zhuǎn)換成等值的實體

其中使用了用構(gòu)造函數(shù)生成的正則，然后替換相應(yīng)的格式就行了，這個跟本章沒多大關(guān)系。倒是它的逆過程，使用了括號，以便提供引用，也很簡單，如下：// 實體字符轉(zhuǎn)換為等值的HTML。

通過key獲取相應(yīng)的分組引用，然后作為對象的鍵。

5.6 匹配成對標(biāo)簽要求

匹配：
<title>regular expression</title><p>laoyao bye bye</p>
不匹配：<title>wrong!</p>
匹配一個開標(biāo)簽，可以使用正則<[^>]+>，匹配一個閉標(biāo)簽，可以使用<\/[^>]+>，但是要求匹配成對標(biāo)簽，那就需要使用反向引用，如：

var regex = /<([^>]+)>[\d\D]*<\/\1>/; var string1 = "<title>regular expression</title>"; var string2 = "<p>laoyao bye bye</p>"; var string3 = "<title>wrong!</p>"; console.log( regex.test(string1) ); // true console.log( regex.test(string2) ); // true console.log( regex.test(string3) ); // false

其中開標(biāo)簽<[^>]+>改成<([^>]+)>，使用括號的目的是為了后面使用反向引用，而提供分組。閉標(biāo)簽使用了反向引用，<\/\1>。另外[\d\D]的意思是，這個字符是數(shù)字或者不是數(shù)字，因此，也就是匹配任意字符的意思。第三章小結(jié)正則中使用括號的例子那可是太多了，不一而足。重點理解括號可以提供分組，我們可以提取數(shù)據(jù)，應(yīng)該就可以了。例子中的代碼，基本沒做多少分析，相信你都能看懂的。

第4章正則表達(dá)式回溯法原理

學(xué)習(xí)正則表達(dá)式，是需要懂點兒匹配原理的。而研究匹配原理時，有兩個字出現(xiàn)的頻率比較高：“回溯”。聽起來挺高大上，確實還有很多人對此不明不白的。因此，本章就簡單扼要地說清楚回溯到底是什么東西。內(nèi)容包括：沒有回溯的匹配有回溯的匹配常見的回溯形式

1. 沒有回溯的匹配

假設(shè)我們的正則是/ab{1,3}c/，其可視化形式是：而當(dāng)目標(biāo)字符串是"abbbc"時，就沒有所謂的“回溯”。其匹配過程是：其中子表達(dá)式b{1,3}表示“b”字符連續(xù)出現(xiàn)1到3次。

2. 有回溯的匹配

如果目標(biāo)字符串是"abbc"，中間就有回溯。圖中第5步有紅顏色，表示匹配不成功。此時b{1,3}已經(jīng)匹配到了2個字符“b”，準(zhǔn)備嘗試第三個時，結(jié)果發(fā)現(xiàn)接下來的字符是“c”。那么就認(rèn)為b{1,3}就已經(jīng)匹配完畢。然后狀態(tài)又回到之前的狀態(tài)（即第6步，與第4步一樣），最后再用子表達(dá)式c，去匹配字符“c”。當(dāng)然，此時整個表達(dá)式匹配成功了。圖中的第6步，就是“回溯”。你可能對此沒有感覺，這里我們再舉一個例子。正則是：目標(biāo)字符串是"abbbc"，匹配過程是：其中第7步和第10步是回溯。第7步與第4步一樣，此時b{1,3}匹配了兩個"b"，而第10步與第3步一樣，此時b{1,3}只匹配了一個"b"，這也是b{1,3}的最終匹配結(jié)果。這里再看一個清晰的回溯，正則是：目標(biāo)字符串是：“acd"ef，匹配過程是：圖中省略了嘗試匹配雙引號失敗的過程。可以看出.是非常影響效率的。為了減少一些不必要的回溯，可以把正則修改為/"[^"]”/。

3. 常見的回溯形式

正則表達(dá)式匹配字符串的這種方式，有個學(xué)名，叫回溯法?；厮莘ㄒ卜Q試探法，它的基本思想是：從問題的某一種狀態(tài)（初始狀態(tài)）出發(fā)，搜索從這種狀態(tài)出發(fā)所能達(dá)到的所有“狀態(tài)”，當(dāng)一條路走到“盡頭”的時候（不能再前進(jìn)），再后退一步或若干步，從另一種可能“狀態(tài)”出發(fā)，繼續(xù)搜索，直到所有的“路徑”（狀態(tài)）都試探過。這種不斷“前進(jìn)”、不斷“回溯”尋找解的方法，就稱作“回溯法”。（copy于百度百科）。本質(zhì)上就是深度優(yōu)先搜索算法。其中退到之前的某一步這一過程，我們稱為“回溯”。從上面的描述過程中，可以看出，路走不通時，就會發(fā)生“回溯”。即，嘗試匹配失敗時，接下來的一步通常就是回溯。道理，我們是懂了。那么JS中正則表達(dá)式會產(chǎn)生回溯的地方都有哪些呢？

3.1 貪婪量詞

之前的例子都是貪婪量詞相關(guān)的。比如b{1,3}，因為其是貪婪的，嘗試可能的順序是從多往少的方向去嘗試。首先會嘗試"bbb"，然后再看整個正則是否能匹配。不能匹配時，吐出一個"b"，即在"bb"的基礎(chǔ)上，再繼續(xù)嘗試。如果還不行，再吐出一個，再試。如果還不行呢？只能說明匹配失敗了。雖然局部匹配是貪婪的，但也要滿足整體能正確匹配。否則，皮之不存，毛將焉附？此時我們不禁會問，如果當(dāng)多個貪婪量詞挨著存在，并相互有沖突時，此時會是怎樣？答案是，先下手為強(qiáng)！因為深度優(yōu)先搜索。測試如下：

var string = "12345"; var regex = /(\d{1,3})(\d{1,3})/; console.log( string.match(regex) ); // => ["12345", "123", "45", index: 0, input: "12345"]

其中，前面的\d{1,3}匹配的是"123"，后面的\d{1,3}匹配的是"45"。

3.2 惰性量詞

惰性量詞就是在貪婪量詞后面加個問號。表示盡可能少的匹配，比如：

var string = "12345"; var regex = /(\d{1,3}?)(\d{1,3})/; console.log( string.match(regex) ); // => ["1234", "1", "234", index: 0, input: "12345"]

其中\(zhòng)d{1,3}?只匹配到一個字符"1"，而后面的\d{1,3}匹配了"234"。雖然惰性量詞不貪，但也會有回溯的現(xiàn)象。比如正則是：目標(biāo)字符串是"12345"，匹配過程是：知道你不貪、很知足，但是為了整體匹配成，沒辦法，也只能給你多塞點了。因此最后\d{1,3}?匹配的字符是"12"，是兩個數(shù)字，而不是一個。

3.3 分支結(jié)構(gòu)

我們知道分支也是惰性的，比如/can|candy/，去匹配字符串"candy"，得到的結(jié)果是"can"，因為分支會一個一個嘗試，如果前面的滿足了，后面就不會再試驗了。分支結(jié)構(gòu)，可能前面的子模式會形成了局部匹配，如果接下來表達(dá)式整體不匹配時，仍會繼續(xù)嘗試剩下的分支。這種嘗試也可以看成一種回溯。比如正則：目標(biāo)字符串是"candy"，匹配過程：上面第5步，雖然沒有回到之前的狀態(tài)，但仍然回到了分支結(jié)構(gòu)，嘗試下一種可能。所以，可以認(rèn)為它是一種回溯的。

第5章正則表達(dá)式的拆分

對于一門語言的掌握程度怎么樣，可以有兩個角度來衡量：讀和寫。不僅要求自己能解決問題，還要看懂別人的解決方案。代碼是這樣，正則表達(dá)式也是這樣。正則這門語言跟其他語言有一點不同，它通常就是一大堆字符，而沒有所謂“語句”的概念。如何能正確地把一大串正則拆分成一塊一塊的，成為了破解“天書”的關(guān)鍵。本章就解決這一問題，內(nèi)容包括：結(jié)構(gòu)和操作符注意要點案例分析

1. 結(jié)構(gòu)和操作符

編程語言一般都有操作符。只要有操作符，就會出現(xiàn)一個問題。當(dāng)一大堆操作在一起時，先操作誰，又后操作誰呢？為了不產(chǎn)生歧義，就需要語言本身定義好操作順序，即所謂的優(yōu)先級。而在正則表達(dá)式中，操作符都體現(xiàn)在結(jié)構(gòu)中，即由特殊字符和普通字符所代表的一個個特殊整體。
JS正則表達(dá)式中，都有哪些結(jié)構(gòu)呢？字符字面量、字符組、量詞、錨字符、分組、選擇分支、反向引用。具體含義簡要回顧如下（如懂，可以略去不看）：字面量，匹配一個具體字符，包括不用轉(zhuǎn)義的和需要轉(zhuǎn)義的。比如a匹配字符"a"，又比如\n匹配換行符，又比如.匹配小數(shù)點。字符組，匹配一個字符，可以是多種可能之一，比如[0-9]，表示匹配一個數(shù)字。也有\(zhòng)d的簡寫形式。另外還有反義字符組，表示可以是除了特定字符之外任何一個字符，比如[^0-9]，表示一個非數(shù)字字符，也有\(zhòng)D的簡寫形式。量詞，表示一個字符連續(xù)出現(xiàn)，比如a{1,3}表示“a”字符連續(xù)出現(xiàn)3次。另外還有常見的簡寫形式，比如a+表示“a”字符連續(xù)出現(xiàn)至少一次。錨點，匹配一個位置，而不是字符。比如^匹配字符串的開頭，又比如\b匹配單詞邊界，又比如(?=\d)表示數(shù)字前面的位置。分組，用括號表示一個整體，比如(ab)+，表示"ab"兩個字符連續(xù)出現(xiàn)多次，也可以使用非捕獲分組(?:ab)+。分支，多個子表達(dá)式多選一，比如abc|bcd，表達(dá)式匹配"abc"或者"bcd"字符子串。反向引用，比如\2，表示引用第2個分組。其中涉及到的操作符有：
1.轉(zhuǎn)義符 \
2.括號和方括號 (…)、(?:…)、(?=…)、(?!..)、[…]
3.量詞限定符 {m}、{m,n}、{m,}、?、*、+
4.位置和序列 ^ 、$、 \元字符、一般字符
5. 管道符（豎杠）|上面操作符的優(yōu)先級從上至下，由高到低。
這里，我們來分析一個正則：/ab?(c|de*)+|fg/由于括號的存在，所以，(c|de*)是一個整體結(jié)構(gòu)。在(c|de*)中，注意其中的量詞*，因此e*是一個整體結(jié)構(gòu)。又因為分支結(jié)構(gòu)“|”優(yōu)先級最低，因此c是一個整體、而de*是另一個整體。同理，整個正則分成了 a、b?、(…)+、f、g。而由于分支的原因，又可以分成ab?(c|de*)+和fg這兩部分。希望你沒被我繞暈，上面的分析可用其可視化形式描述如下：

2. 注意要點

關(guān)于結(jié)構(gòu)和操作符，還是有幾點需要強(qiáng)調(diào)：

2.1 匹配字符串

整體問題因為是要匹配整個字符串，我們經(jīng)常會在正則前后中加上錨字符^和$。比如要匹配目標(biāo)字符串"abc"或者"bcd"時，如果一不小心，就會寫成/^abc|bcd$/。而位置字符和字符序列優(yōu)先級要比豎杠高，故其匹配的結(jié)構(gòu)是：應(yīng)該修改成:

2.2 量詞連綴問題

假設(shè)，要匹配這樣的字符串：

每個字符為a、b、c任選其一2. 字符串的長度是3的倍數(shù)此時正則不能想當(dāng)然地寫成/^[abc]{3}+$/，這樣會報錯，說+前面沒什么可重復(fù)的：此時要修改成：

2.3 元字符轉(zhuǎn)義問題

所謂元字符，就是正則中有特殊含義的字符。所有結(jié)構(gòu)里，用到的元字符總結(jié)如下：^ $ . * + ? | \ / ( ) [ ] { } = ! : -,當(dāng)匹配上面的字符本身時，可以一律轉(zhuǎn)義：

var string = "^$.*+?|\\/[]{}=!:-,"; var regex = /\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,/; console.log( regex.test(string) ); // => true

其中string中的\字符也要轉(zhuǎn)義的。另外，在string中，也可以把每個字符轉(zhuǎn)義，當(dāng)然，轉(zhuǎn)義后的結(jié)果仍是本身：

var string = "^$.*+?|\\/[]{}=!:-,"; var string2 = "\^\$\.\*\+\?\|\\\/\[\]\{\}\=\!\:\-\,"; console.log( string == string2 ); // => true

現(xiàn)在的問題是，是不是每個字符都需要轉(zhuǎn)義呢？否，看情況。

2.3.1 字符組中的元字符

跟字符組相關(guān)的元字符有[]、^、-。因此在會引起歧義的地方進(jìn)行轉(zhuǎn)義。例如開頭的^必須轉(zhuǎn)義，不然會把整個字符組，看成反義字符組。

2.3.2 匹配“[abc]”和“{3,5}”

我們知道[abc]，是個字符組。如果要匹配字符串"[abc]"時，該怎么辦？可以寫成/\[abc\]/，也可以寫成/\[abc]/，測試如下：

var string = "[abc]"; var regex = /\[abc]/g; console.log( string.match(regex)[0] ); // => "[abc]"

只需要在第一個方括號轉(zhuǎn)義即可，因為后面的方括號構(gòu)不成字符組，正則不會引發(fā)歧義，自然不需要轉(zhuǎn)義。同理，要匹配字符串"{3,5}"，只需要把正則寫成/\{3,5}/即可。另外，我們知道量詞有簡寫形式{m,}，卻沒有{,n}的情況。雖然后者不構(gòu)成量詞的形式，但此時并不會報錯。當(dāng)然，匹配的字符串也是"{,n}"，測試如下：

var string = "{,3}"; var regex = /{,3}/g; console.log( string.match(regex)[0] ); // => "{,3}"

2.3.3 其余情況

比如= ! : - ,等符號，只要不在特殊結(jié)構(gòu)中，也不需要轉(zhuǎn)義。但是，括號需要前后都轉(zhuǎn)義的，如/$123$/。至于剩下的^ $ . * + ? | \ /等字符，只要不在字符組內(nèi)，都需要轉(zhuǎn)義的。3. 案例分析接下來分析兩個例子，一個簡單的，一個復(fù)雜的。

3.1 身份證正則表達(dá)式

/^(\d{15}|\d{17}[\dxX])$/因為豎杠“|”,的優(yōu)先級最低，所以正則分成了兩部分\d{15}和\d{17}[\dxX]。\d{15}表示15位連續(xù)數(shù)字。\d{17}[\dxX]表示17位連續(xù)數(shù)字，最后一位可以是數(shù)字可以大小寫字母"x"。可視化如下：

3.2 IPV4地址正則表達(dá)式

/^((0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])\.){3}(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])$/
這個正則，看起來非常嚇人。但是熟悉優(yōu)先級后，會立馬得出如下的結(jié)構(gòu)：((...)\.){3}(...)上面的兩個(...)是一樣的結(jié)構(gòu)。表示匹配的是3位數(shù)字。因此整個結(jié)構(gòu)是3位數(shù).3位數(shù).3位數(shù).3位數(shù)然后再來分析(...)：(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])(0{0,2}\d|0?\d{2}|1\d{2}|2[0-4]\d|25[0-5])它是一個多選結(jié)構(gòu)，分成5個部分：0{0,2}\d，匹配一位數(shù)，包括0補(bǔ)齊的。比如，9、09、009；0?\d{2}，匹配兩位數(shù)，包括0補(bǔ)齊的，也包括一位數(shù)；1\d{2}，匹配100到199;2[0-4]\d，匹配200-249；25[0-5]，匹配250-255。

第6章正則表達(dá)式的構(gòu)建

對于一門語言的掌握程度怎么樣，可以有兩個角度來衡量：讀和寫。不僅要看懂別人的解決方案，也要能獨立地解決問題。代碼是這樣，正則表達(dá)式也是這樣。與“讀”相比，“寫”往往更為重要，這個道理是不言而喻的。對正則的運用，首重就是：如何針對問題，構(gòu)建一個合適的正則表達(dá)式？

1. 平衡法則構(gòu)建

正則有一點非常重要，需要做到下面幾點的平衡：匹配預(yù)期的字符串不匹配非預(yù)期的字符串可讀性和可維護(hù)性效率

2. 構(gòu)建正則前提

2.1 是否能使用正則

正則太強(qiáng)大了，以至于我們隨便遇到一個操作字符串問題時，都會下意識地去想，用正則該怎么做。但我們始終要提醒自己，正則雖然強(qiáng)大，但不是萬能的，很多看似很簡單的事情，還是做不到的。比如匹配這樣的字符串：1010010001…雖然很有規(guī)律，但是只靠正則就是無能為力。

2.2 是否有必要使用正則

要認(rèn)識到正則的局限，不要去研究根本無法完成的任務(wù)。同時，也不能走入另一個極端：無所不用正則。能用字符串API解決的簡單問題，就不該正則出馬。比如，從日期中提取出年月日，雖然可以使用正則：

var string = "2017-07-01"; var regex = /^(\d{4})-(\d{2})-(\d{2})/; console.log( string.match(regex) ); // => ["2017-07-01", "2017", "07", "01", index: 0, input: "2017-07-01"]

其實，可以使用字符串的split方法來做，即可：

var string = "2017-07-01"; var result = string.split("-"); console.log( result ); // => ["2017", "07", "01"]

比如，判斷是否有問號，雖然可以使用：

var string = "?id=xx&act=search"; console.log( string.search(/\?/) ); // => 0

其實，可以使用字符串的indexOf方法：

var string = "?id=xx&act=search"; console.log( string.indexOf("?") ); // => 0

比如獲取子串，雖然可以使用正則：

var string = "JavaScript"; console.log( string.match(/.{4}(.+)/)[1] ); // => Script

其實，可以直接使用字符串的substring或substr方法來做：

var string = "JavaScript"; console.log( string.substring(4) ); // => Script

2.3 是否有必要構(gòu)建一個復(fù)雜的正則

比如密碼匹配問題，要求密碼長度6-12位，由數(shù)字、小寫字符和大寫字母組成，但必須至少包括2種字符。在第2章里，我們寫出了正則是：/(?!^[0-9]{6,12}$)(?!^[a-z]{6,12}$)(?!^[A-Z]{6,12}$)^[0-9A-Za-z]{6,12}$/其實可以使用多個小正則來做：

3. 準(zhǔn)確性

所謂準(zhǔn)確性，就是能匹配預(yù)期的目標(biāo)，并且不匹配非預(yù)期的目標(biāo)。這里提到了“預(yù)期”二字，那么我們就需要知道目標(biāo)的組成規(guī)則。不然沒法界定什么樣的目標(biāo)字符串是符合預(yù)期的，什么樣的又不是符合預(yù)期的。下面將舉例說明，當(dāng)目標(biāo)字符串構(gòu)成比較復(fù)雜時，該如何構(gòu)建正則，并考慮到哪些平衡。

3.1 匹配固定電話

比如要匹配如下格式的固定電話號碼：0551888888880551-88888888(0551)88888888
第一步，了解各部分的模式規(guī)則。上面的電話，總體上分為區(qū)號和號碼兩部分（不考慮分機(jī)號和+86的情形）。區(qū)號是0開頭的3到4位數(shù)字，對應(yīng)的正則是：0\d{2,3}號碼是非0開頭的7到8位數(shù)字，對應(yīng)的正則是：[1-9]\d{6,7}因此，匹配055188888888的正則是：/^0\d{2,3}[1-9]\d{6,7}$/匹配0551-88888888的正則是：/^0\d{2,3}-[1-9]\d{6,7}$/匹配(0551)88888888的正則是：/^{(0\d{2,3})[1-9]\d{6,7}$/第二步，明確形式關(guān)系。這三者情形是或的關(guān)系，可以構(gòu)建分支：`/^0\d{2,3}[1-9]\d{6,7}$|}0\d{2,3}-[1-9]\d{6,7} $KaTeX parse error: Got function '$' with no arguments as superscript at position 3: |^\?(?0\d{2,3}$[1-9]…$ /提取公共部分：/^{(0\d{2,3}|0\d{2,3}-|(0\d{2,3}))[1-9]\d{6,7}$/`進(jìn)一步簡寫：`/^(0\d{2,3}-?|(0\d{2,3}))[1-9]\d{6,7}$/`其可視化形式：上面的正則構(gòu)建過程略顯羅嗦，但是這樣做，能保證正則是準(zhǔn)確的。上述三種情形是或的關(guān)系，這一點很重要，不然很容易按字符是否出現(xiàn)的情形把正則寫成：`/}(?0\d{2,3})?-?[1-9]\d{6,7}$/`雖然也能匹配上述目標(biāo)字符串，但也會匹配(0551-88888888這樣的字符串。當(dāng)然，這不是我們想要的。其實這個正則也不是完美的，因為現(xiàn)實中，并不是每個3位數(shù)和4位數(shù)都是一個真實的區(qū)號。這就是一個平衡取舍問題，一般夠用就行。

3.2 匹配浮點數(shù)

要求匹配如下的格式：1.23、+1.23、-1.2310、+10、-10.2、+.2、-.2可以看出正則分為三部分。符號部分：[+-]，整數(shù)部分：\d+，小數(shù)部分：\.\d+
上述三個部分，并不是全部都出現(xiàn)。如果此時很容易寫出如下的正則：/^[+-]?(\d+)?(\.\d+)?$/此正則看似沒問題，但這個正則也會匹配空字符""。因為目標(biāo)字符串的形式關(guān)系不是要求每部分都是可選的。要匹配1.23、+1.23、-1.23，可以用/^[+-]?\d+\.\d+$/，要匹配10、+10、-10，可以用/^[+-]?\d+$/，要匹配.2、+.2、-.2，可以用/^[+-]?\.\d+$/。因此整個正則是這三者的或的關(guān)系，提取公眾部分后是：/^[+-]?(\d+\.\d+|\d+|\.\d+)$/
/^[+-]?(\d+\.\d+|\d+|\.\d+)$/也不是完美的，我們也是做了些取舍，比如：它也會匹配012這樣以0開頭的整數(shù)。如果要求不匹配的話，需要修改整數(shù)部分的正則。一般進(jìn)行驗證操作之前，都要經(jīng)過trim和判空。那樣的話，也許那個錯誤正則也就夠用了。也可以進(jìn)一步改寫成：/^[+-]?(\d+)?(\.)?\d+$/，這樣我們就需要考慮可讀性和可維護(hù)性了。

標(biāo)題第六章正則表達(dá)式編程

什么叫知識，能指導(dǎo)我們實踐的東西才叫知識。學(xué)習(xí)一樣?xùn)|西，如果不能使用，最多只能算作紙上談兵。正則表達(dá)式的學(xué)習(xí)，也不例外。掌握了正則表達(dá)式的語法后，下一步，也是關(guān)鍵的一步，就是在真實世界中使用它。那么如何使用正則表達(dá)式呢？有哪些關(guān)鍵的點呢？本章就解決這個問題。內(nèi)容包括：正則表達(dá)式的四種操作相關(guān)API注意要點真實案例

1. 正則表達(dá)式的四種操作

正則表達(dá)式是匹配模式，不管如何使用正則表達(dá)式，萬變不離其宗，都需要先“匹配”。有了匹配這一基本操作后，才有其他的操作：驗證、切分、提取、替換。進(jìn)行任何相關(guān)操作，也需要宿主引擎相關(guān)API的配合使用。當(dāng)然，在JS中，相關(guān)API也不多。

1.1 驗證

驗證是正則表達(dá)式最直接的應(yīng)用，比如表單驗證。在說驗證之前，先要說清楚匹配是什么概念。所謂匹配，就是看目標(biāo)字符串里是否有滿足匹配的子串。因此，“匹配”的本質(zhì)就是“查找”。有沒有匹配，是不是匹配上，判斷是否的操作，即稱為“驗證”。這里舉一個例子，來看看如何使用相關(guān)API進(jìn)行驗證操作的。比如，判斷一個字符串中是否有數(shù)字。
使用search

var regex = /\d/; var string = "abc123"; console.log( !!~string.search(regex) ); // => true

使用test

var regex = /\d/; var string = "abc123"; console.log( regex.test(string) ); // => true

使用match

var regex = /\d/; var string = "abc123"; console.log( !!string.match(regex) ); // => true

使用exec

var regex = /\d/; var string = "abc123"; console.log( !!regex.exec(string) ); // => true

其中，最常用的是test。

1.2 切分

匹配上了，我們就可以進(jìn)行一些操作，比如切分。所謂“切分”，就是把目標(biāo)字符串，切成一段一段的。在JS中使用的是split。比如，目標(biāo)字符串是"html,css,javascript"，按逗號來切分：

var regex = /,/; var string = "html,css,javascript"; console.log( string.split(regex) ); // => ["html", "css", "javascript"]

又比如，如下的日期格式：2017/06/262017.06.262017-06-26可以使用split“切出”年月日：

var regex = /\D/; console.log( "2017/06/26".split(regex) ); console.log( "2017.06.26".split(regex) ); console.log( "2017-06-26".split(regex) ); // => ["2017", "06", "26"] // => ["2017", "06", "26"] // => ["2017", "06", "26"]

1.3 提取

雖然整體匹配上了，但有時需要提取部分匹配的數(shù)據(jù)。此時正則通常要使用分組引用（分組捕獲）功能，還需要配合使用相關(guān)API。這里，還是以日期為例，提取出年月日。注意下面正則中的括號：match

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/; var string = "2017-06-26"; console.log( string.match(regex) ); // =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]

exec

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/; var string = "2017-06-26"; console.log( regex.exec(string) ); // =>["2017-06-26", "2017", "06", "26", index: 0, input: "2017-06-26"]

test

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/; var string = "2017-06-26"; regex.test(string); console.log( RegExp.$1, RegExp.$2, RegExp.$3 ); // => "2017" "06" "26"

var regex = /^(\d{4})\D(\d{2})\D(\d{2})$/; var string = "2017-06-26"; string.search(regex); console.log( RegExp.$1, RegExp.$2, RegExp.$3 ); // => "2017" "06" "26"

replace

其中，最常用的是match。

1.4 替換

找，往往不是目的，通常下一步是為了替換。在JS中，使用replace進(jìn)行替換。比如把日期格式，從yyyy-mm-dd替換成yyyy/mm/dd：

var string = "2017-06-26"; var today = new Date( string.replace(/-/g, "/") ); console.log( today ); // => Mon Jun 26 2017 00:00:00 GMT+0800 (中國標(biāo)準(zhǔn)時間)

這里只是簡單地應(yīng)用了一下replace。但，replace方法是強(qiáng)大的，是需要重點掌握的。

2. 相關(guān)API

注意要點從上面可以看出用于正則操作的方法，共有6個，字符串實例4個，正則實例2個：String#searchString#splitString#matchString#replaceRegExp#testRegExp#exec本文不打算詳細(xì)地講解它們的方方面面細(xì)節(jié)，具體可以參考《JavaScript權(quán)威指南》的第三部分。本文重點列出一些容易忽視的地方，以饗讀者。

2.1 search和match的參數(shù)問題

我們知道字符串實例的那4個方法參數(shù)都支持正則和字符串。但search和match，會把字符串轉(zhuǎn)換為正則的。

var string = "2017.06.27";console.log( string.search(".") ); // => 0 //需要修改成下列形式之一 console.log( string.search("\\.") ); console.log( string.search(/\./) ); // => 4 // => 4console.log( string.match(".") ); // => ["2", index: 0, input: "2017.06.27"] //需要修改成下列形式之一 console.log( string.match("\\.") ); console.log( string.match(/\./) ); // => [".", index: 4, input: "2017.06.27"] // => [".", index: 4, input: "2017.06.27"]console.log( string.split(".") ); // => ["2017", "06", "27"]console.log( string.replace(".", "/") ); // => "2017/06.27"

2.2 match返回結(jié)果的格式問題

match返回結(jié)果的格式，與正則對象是否有修飾符g有關(guān)。

var string = "2017.06.27"; var regex1 = /\b(\d+)\b/; var regex2 = /\b(\d+)\b/g; console.log( string.match(regex1) ); console.log( string.match(regex2) ); // => ["2017", "2017", index: 0, input: "2017.06.27"] // => ["2017", "06", "27"]

沒有g(shù)，返回的是標(biāo)準(zhǔn)匹配格式，即，數(shù)組的第一個元素是整體匹配的內(nèi)容，接下來是分組捕獲的內(nèi)容，然后是整體匹配的第一個下標(biāo)，最后是輸入的目標(biāo)字符串。有g(shù)，返回的是所有匹配的內(nèi)容。當(dāng)沒有匹配時，不管有無g，都返回null。

2.3 exec比match更強(qiáng)大

當(dāng)正則沒有g(shù)時，使用match返回的信息比較多。但是有g(shù)后，就沒有關(guān)鍵的信息index了。而exec方法就能解決這個問題，它能接著上一次匹配后繼續(xù)匹配：

var string = "2017.06.27"; var regex2 = /\b(\d+)\b/g; console.log( regex2.exec(string) ); console.log( regex2.lastIndex); console.log( regex2.exec(string) ); console.log( regex2.lastIndex); console.log( regex2.exec(string) ); console.log( regex2.lastIndex); console.log( regex2.exec(string) ); console.log( regex2.lastIndex); // => ["2017", "2017", index: 0, input: "2017.06.27"] // => 4 // => ["06", "06", index: 5, input: "2017.06.27"] // => 7 // => ["27", "27", index: 8, input: "2017.06.27"] // => 10 // => null // => 0

其中正則實例lastIndex屬性，表示下一次匹配開始的位置。比如第一次匹配了“2017”，開始下標(biāo)是0，共4個字符，因此這次匹配結(jié)束的位置是3，下一次開始匹配的位置是4。從上述代碼看出，在使用exec時，經(jīng)常需要配合使用while循環(huán)：

var string = "2017.06.27"; var regex2 = /\b(\d+)\b/g; var result; while ( result = regex2.exec(string) ) {console.log( result, regex2.lastIndex ); } // => ["2017", "2017", index: 0, input: "2017.06.27"] 4 // => ["06", "06", index: 5, input: "2017.06.27"] 7 // => ["27", "27", index: 8, input: "2017.06.27"] 10

2.4 修飾符g

對exex和test的影響上面提到了正則實例的lastIndex屬性，表示嘗試匹配時，從字符串的lastIndex位開始去匹配。字符串的四個方法，每次匹配時，都是從0開始的，即lastIndex屬性始終不變。而正則實例的兩個方法exec、test，當(dāng)正則是全局匹配時，每一次匹配完成后，都會修改lastIndex。下面讓我們以test為例，看看你是否會迷糊：

var regex = /a/g; console.log( regex.test("a"), regex.lastIndex ); console.log( regex.test("aba"), regex.lastIndex ); console.log( regex.test("ababc"), regex.lastIndex ); // => true 1 // => true 3 // => false 0

注意上面代碼中的第三次調(diào)用test，因為這一次嘗試匹配，開始從下標(biāo)lastIndex即3位置處開始查找，自然就找不到了。如果沒有g(shù)，自然都是從字符串第0個字符處開始嘗試匹配：

var regex = /a/; console.log( regex.test("a"), regex.lastIndex ); console.log( regex.test("aba"), regex.lastIndex ); console.log( regex.test("ababc"), regex.lastIndex ); // => true 0 // => true 0 // => true 0

2.5 test

整體匹配時需要使用^和$這個相對容易理解，因為test是看目標(biāo)字符串中是否有子串匹配正則，即有部分匹配即可。如果，要整體匹配，正則前后需要添加開頭和結(jié)尾：

console.log( /123/.test("a123b") ); // => true console.log( /^123$/.test("a123b") ); // => false console.log( /^123$/.test("123") ); // => true

2.6 split相關(guān)注意事項

split方法看起來不起眼，但要注意的地方有兩個的。
第一，它可以有第二個參數(shù)，表示結(jié)果數(shù)組的最大長度：

var string = "html,css,javascript"; console.log( string.split(/,/, 2) ); // =>["html", "css"]

第二，正則使用分組時，結(jié)果數(shù)組中是包含分隔符的：

var string = "html,css,javascript"; console.log( string.split(/(,)/) ); // =>["html", ",", "css", ",", "javascript"]

2.7 replace是很強(qiáng)大的

《JavaScript權(quán)威指南》認(rèn)為exec是這6個API中最強(qiáng)大的，而我始終認(rèn)為replace才是最強(qiáng)大的。因為它也能拿到該拿到的信息，然后可以假借替換之名，做些其他事情?？傮w來說replace有兩種使用形式，這是因為它的第二個參數(shù)，可以是字符串，也可以是函數(shù)。當(dāng)?shù)诙€參數(shù)是字符串時，如下的字符有特殊的含義：$1,$2,...,$99匹配第1~99個分組里捕獲的文本$&匹配到的子串文本$'匹配到的子串的左邊文本 $’ 匹配到的子串的右邊文本? 美元符號例如，把"2,3,5"，變成"5=2+3"：

var result = "2,3,5".replace(/(\d+),(\d+),(\d+)/, "$3=$1+$2"); console.log(result); // => "5=2+3"

又例如，把"2,3,5"，變成"222,333,555":

var result = "2,3,5".replace(/(\d+)/g, "$&$&$&"); console.log(result); // => "222,333,555"

再例如，把"2+3=5"，變成"2+3=2+3=5=5":

var result = "2+3=5".replace(/=/, "$&$`$&$'$&"); console.log(result); // => "2+3=2+3=5=5"

當(dāng)?shù)诙€參數(shù)是函數(shù)時，我們需要注意該回調(diào)函數(shù)的參數(shù)具體是什么：

"1234 2345 3456".replace(/(\d)\d{2}(\d)/g, function(match, $1, $2, index, input) {console.log([match, $1, $2, index, input]); }); // => ["1234", "1", "4", 0, "1234 2345 3456"] // => ["2345", "2", "5", 5, "1234 2345 3456"] // => ["3456", "3", "6", 10, "1234 2345 3456"]

此時我們可以看到replace拿到的信息，并不比exec少。

2.8 使用構(gòu)造函數(shù)需要注意的問題

一般不推薦使用構(gòu)造函數(shù)生成正則，而應(yīng)該優(yōu)先使用字面量。因為用構(gòu)造函數(shù)會多寫很多\。

2.9 修飾符

ES5中修飾符，共3個：g全局匹配，即找到所有匹配的，單詞是globali 忽略字母大小寫，單詞ingoreCasem 多行匹配，只影響^和$，二者變成行的概念，即行開頭和行結(jié)尾。單詞是multiline當(dāng)然正則對象也有相應(yīng)的只讀屬性：

var regex = /\w/img; console.log( regex.global ); console.log( regex.ignoreCase ); console.log( regex.multiline ); // => true // => true // => true

2.10 source屬性

正則實例對象屬性，除了global、ingnoreCase、multiline、lastIndex屬性之外，還有一個source屬性。它什么時候有用呢？比如，在構(gòu)建動態(tài)的正則表達(dá)式時，可以通過查看該屬性，來確認(rèn)構(gòu)建出的正則到底是什么：

2.11 構(gòu)造函數(shù)屬性

構(gòu)造函數(shù)的靜態(tài)屬性基于所執(zhí)行的最近一次正則操作而變化。除了是$1,...,$9之外，還有幾個不太常用的屬性（有兼容性問題）：
RegExp.input 最近一次目標(biāo)字符串，簡寫成RegExp["$_"]RegExp.lastMatch
最近一次匹配的文本，簡寫成RegExp["$&"]RegExp.lastParen
最近一次捕獲的文本，簡寫成RegExp["$+"]RegExp.leftContext
目標(biāo)字符串中l(wèi)astMatch之前的文本，簡寫成RegExp["$'"]RegExp.rightContext
目標(biāo)字符串中l(wèi)astMatch之后的文本，簡寫成RegExp["$'"]

測試代碼如下：

var regex = /([abc])(\d)/g; var string = "a1b2c3d4e5"; string.match(regex);console.log( RegExp.input ); console.log( RegExp["$_"]); // => "a1b2c3d4e5"console.log( RegExp.lastMatch ); console.log( RegExp["$&"] ); // => "c3"console.log( RegExp.lastParen ); console.log( RegExp["$+"] ); // => "3"console.log( RegExp.leftContext ); console.log( RegExp["$`"] ); // => "a1b2"console.log( RegExp.rightContext ); console.log( RegExp["$'"] ); // => "d4e5"

3. 真實案例

3.1 使用構(gòu)造函數(shù)生成正則表達(dá)式

我們知道要優(yōu)先使用字面量來創(chuàng)建正則，但有時正則表達(dá)式的主體是不確定的，此時可以使用構(gòu)造函數(shù)來創(chuàng)建。模擬getElementsByClassName方法，就是很能說明該問題的一個例子。這里getElementsByClassName函數(shù)的實現(xiàn)思路是：比如要獲取className為"high"的dom元素；首先生成一個正則：/(^|\s)high(\s|$)/；然后再用其逐一驗證頁面上的所有dom元素的類名，拿到滿足匹配的元素即可。代碼如下(可以直接復(fù)制到本地查看運行效果)：

<p class="high">1111</p> <p class="high">2222</p> <p>3333</p> <script> function getElementsByClassName(className) {var elements = document.getElementsByTagName("*");var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");var result = [];for (var i = 0; i < elements.length; i++) {var element = elements[i];if (regex.test(element.className)) {result.push(element)}}return result; } var highs = getElementsByClassName('high'); highs.forEach(function(item) {item.style.color = 'red'; }); </script>

3.2 使用字符串保存數(shù)據(jù)

一般情況下，我們都愿意使用數(shù)組來保存數(shù)據(jù)。但我看到有的框架中，使用的卻是字符串。使用時，仍需要把字符串切分成數(shù)組。雖然不一定用到正則，但總感覺酷酷的，這里分享如下：

3.3 if語句中使用正則替代&&

比如，模擬ready函數(shù)，即加載完畢后再執(zhí)行回調(diào)（不兼容ie的）：

3.4 使用強(qiáng)大的replace

因為replace方法比較強(qiáng)大，有時用它根本不是為了替換，只是拿其匹配到的信息來做文章。這里以查詢字符串（querystring）壓縮技術(shù)為例，注意下面replace方法中，回調(diào)函數(shù)根本沒有返回任何東西。

3.5 綜合運用

最后這里再做個簡單實用的正則測試器。

<section><div id="err"></div><input id="regex" placeholder="請輸入正則表達(dá)式"><input id="text" placeholder="請輸入測試文本"><button id="run">測試一下</button><div id="result"></div> </section> <style> section{display:flex;flex-direction:column;justify-content:space-around;height:300px;padding:0 200px; } section *{min-height:30px; } #err {color:red; } #result{line-height:30px; } .info {background:#00c5ff;padding:2px;margin:2px;display:inline-block; } </style> <script> (function() {// 獲取相應(yīng)dom元素var regexInput = document.getElementById("regex");var textInput = document.getElementById("text");var runBtn = document.getElementById("run");var errBox = document.getElementById("err");var resultBox = document.getElementById("result");// 綁定點擊事件runBtn.onclick = function() {// 清除錯誤和結(jié)果errBox.innerHTML = "";resultBox.innerHTML = "";// 獲取正則和文本var text = textInput.value;var regex = regexInput.value;if (regex == "") {errBox.innerHTML = "請輸入正則表達(dá)式";} else if (text == "") {errBox.innerHTML = "請輸入測試文本";} else {regex = createRegex(regex);if (!regex) return;var result, results = [];// 沒有修飾符g的話，會死循環(huán)if (regex.global) {while(result = regex.exec(text)) {results.push(result);}} else {results.push(regex.exec(text));}if (results[0] == null) {resultBox.innerHTML = "匹配到0個結(jié)果";return;}// 倒序是有必要的for (var i = results.length - 1; i >= 0; i--) {var result = results[i];var match = result[0];var prefix = text.substr(0, result.index);var suffix = text.substr(result.index + match.length);text = prefix + '<span class="info">'+ match+ '</span>'+ suffix;}resultBox.innerHTML = "匹配到" + results.length + "個結(jié)果:<br>" + text;}};// 生成正則表達(dá)式，核心函數(shù)function createRegex(regex) {try {if (regex[0] == "/") {regex = regex.split("/");regex.shift();var flags = regex.pop();regex = regex.join("/");regex = new RegExp(regex, flags);} else {regex = new RegExp(regex, "g");}return regex;} catch(e) {errBox.innerHTML = "無效的正則表達(dá)式";return false;}} })(); </script>

總結(jié)

以上是生活随笔為你收集整理的正则表达式攻略的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java找不到返回值_java.lang
下一篇：题解 [CF1682D] Circula