第一部分 基礎(chǔ)知識(shí)

一髓介、正則申明方式

1、構(gòu)造函數(shù)方式

var reg = new RegExp('\d', 'gi');

● 通過(guò) new 構(gòu)造一個(gè)正則表達(dá)式對(duì)象，其中第一個(gè)參數(shù) '\d' 是正則內(nèi)容剃法，第二個(gè)參數(shù) 'gi' 是修飾符。兩個(gè)參數(shù)皆為字符串類型

● 修飾符的作用是對(duì)匹配過(guò)程進(jìn)行限定

● 修飾符有三種：i, g, m路鹰，可以同時(shí)出現(xiàn)贷洲，沒(méi)有順序（即 gi 與 ig 一樣），請(qǐng)參考下方說(shuō)明

說(shuō)明：
● [a-z] 表示從小寫(xiě)字母a到小寫(xiě)字母z之間的任意字符(含a和z)钦椭，下文會(huì)有詳細(xì)說(shuō)明
● + 表示至少出現(xiàn)一次
● \n 在js中表示換行
● ^[a-z] 表示以任意小寫(xiě)字母開(kāi)頭的行

'aBcd efg'.match(/[a-z]+/);
// ["a"]

'aBcd efg'.match(/[a-z]+/i);
// ["aBcd"]

'aBcd efg'.match(/[a-z]+/g);
// ["a", "cd", "efg"]

'aBcd efg'.match(/[a-z]+/gi);
// ["aBcd", "efg"]

'aB\ncd\n efg'.match(/^[a-z]+/m);
// ["a"]

'aB\ncd\n efg'.match(/^[a-z]+/g);
// ["a"]

'aB\ncd\n efg'.match(/^[a-z]+/gm);
// ["a", "cd"]
// 注意不是 ["a", "cd", "efg"]

2、字面量方式

相比較上一種方式碑诉，這一種更為常見(jiàn)彪腔，上面示例也都使用了這種方式

var reg = /\d/gi;

兩個(gè)斜線內(nèi)為正則的內(nèi)容，后面可以跟修飾符联贩，與第一種構(gòu)造函數(shù)方式相比更簡(jiǎn)潔漫仆，缺點(diǎn)是正則內(nèi)容不能拼接，對(duì)于大多數(shù)場(chǎng)景倆說(shuō)足夠了

二泪幌、正則相關(guān)符號(hào)

1盲厌、方括號(hào) [] 用法

用于查找方括號(hào)內(nèi)的任意字符：

在這里插入圖片描述

● // 正則開(kāi)頭位置表示以某某開(kāi)頭的字符串祸泪，如下表示以大寫(xiě)或小寫(xiě)字母開(kāi)頭的且連續(xù)為字母的字符串：

'adobe 2016'.match(/^[a-zA-Z]+/);
// ["adobe"]

● 在正則 或 匹配中(即 | 匹配)吗浩，表示 或者以某某字符開(kāi)始的字符串，如下表示匹配 連續(xù)數(shù)字 或 以小寫(xiě)字母開(kāi)頭且連續(xù)為小寫(xiě)字母的字符串没隘，所以返回結(jié)果包含2016 和 adobe懂扼，注意返回結(jié)果不是 ["2016", "adobe"]

'adobe2016ps'.match(/\d+|^[a-z]+/g);
// ["adobe", "2016"]

● 在 [] 內(nèi)開(kāi)始位置時(shí)，表示不匹配 [] 內(nèi)除 ^ 以外的所有字符：

'adobe'.match(/[^abc]/g);
// ["d", "o", "e"]

注： $ 與 ^ 的前兩個(gè)用法相似，只不過(guò)匹配的是以某某字符結(jié)尾的字符串阀湿，舉例：

'adobe 2016'.match(/\d+|[a-z]+$/g);
// ["2016"]
'adobe'.match(/\d+|[a-z]+$/g);
// ["adobe"]

2）- (連字符)表示左邊字符的 ASCII 值到右邊字符 ASCII 編碼值之間及左右字符自身的所有字符

'adobe PS 2016'.match(/[a-g]/g);
// ["a", "d", "b", "e"]

3）- 連字符左側(cè)的字符對(duì)應(yīng)的 ASCII 值一定要小于或等于右側(cè)的字符赶熟，否則會(huì)報(bào)語(yǔ)法錯(cuò)誤

'adobe'.match(/[z-a]/);
// Uncaught SyntaxError: Invalid regular expression: /[z-a]/: Range out of order in character class...

4）如果希望對(duì)連字符 - 本身進(jìn)行匹配，需要用反斜線轉(zhuǎn)義

'adobe-2016'.match(/[a-g\-]/g);
// ["a", "d", "b", "e", "-"]

5）查看 ASCII 表就會(huì)發(fā)現(xiàn)陷嘴，大寫(xiě)字母的 ASCII 值是小于小寫(xiě)字母的映砖，因此下面用法會(huì)報(bào)語(yǔ)法錯(cuò)誤

'adobe-2016'.match(/[a-Z]/g);
// Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character ...

那么問(wèn)題來(lái)了，如果要表示所有字母灾挨，不區(qū)分大小寫(xiě)怎么辦呢邑退？其實(shí)有兩種方式：
A、第一種是使用修飾符 i劳澄，前面提到過(guò)地技。舉例：

'adobe-PS'.match(/[a-z]/gi);
// ["a", "d", "o", "b", "e", "P", "S"]

B、第二種是在正則中明確指明大小寫(xiě)字母秒拔，舉例：

'adobe-PS'.match(/[a-zA-Z]/g);
// ["a", "d", "o", "b", "e", "P", "S"]

返回結(jié)果跟第一種一樣莫矗。當(dāng)然這個(gè)例子有些特殊：匹配了所有大小寫(xiě)字母。當(dāng)只匹配部分大小寫(xiě)字母的時(shí)候只能使用第二種方式溯警，在此就不做示例了趣苏，讀者可以自己測(cè)試

6）匹配大小字母不能寫(xiě)成 [A-z]，雖然不會(huì)報(bào)語(yǔ)法錯(cuò)誤梯轻，但隱式的放大了匹配范圍，查看 ASCII 會(huì)發(fā)現(xiàn)尽棕，在大寫(xiě)字母 Z 到小寫(xiě)字母 a 之間還有 [喳挑、 \、 ]滔悉、 ^伊诵、 _、 ` 這6個(gè)字符回官，因此不能這么寫(xiě)曹宴。

7）想必有同學(xué)會(huì)問(wèn)， \w 不也可以匹配字母么歉提？是的笛坦，\w 確實(shí)可以匹配字母，但跟上面說(shuō)的一樣,也隱式的放大了匹配范圍苔巨，\w 除了匹配大小字母外還匹配了數(shù)字和下劃線版扩，即 \w 與 [A-Za-z0-9_] 等價(jià)，當(dāng)然 A-Z侄泽、a-z礁芦、0-9(等價(jià)于\d)、_這四組沒(méi)順序之分

2、特殊含義字符

● . 匹配任意單個(gè)字符柿扣，除換行和結(jié)束符

'1+0.2*2=1.4'.match(/.{2}/g);
// ["1+", "0.", "2*", "2=", "1."]

● \w 匹配任意單詞字符（數(shù)字肖方、字母、下劃線）未状，等價(jià)于[A-Za-z0-9_]

'ad34~!@$ps'.match(/\w/g);
// ["a", "d", "3", "4", "p", "s"]

● \W 匹配任意單詞字符俯画，與\w相反，等價(jià)于[^A-Za-z0-9_]

'ad34~!@$ps'.match(/\W/g);
// ["~", "!", "@", "$"]

● \d 匹配數(shù)字娩践，等價(jià)于 [0-9]

'ps6'.match(/\d/g);
// ["6"]

● \D 匹配非數(shù)字活翩，等價(jià)于 [0-9]

'ps6'.match(/\D/g);
// ["p", "s"]

● \s 匹配空白字符，主要有(\n翻伺、\f材泄、\r、\t吨岭、\v)拉宗，注意'a\sb'中的\s依然是字符s，所以'a\sb'.match(/\s/g)返回 null

'adobe ps'.match(/\s/g);
// [" "]

● \S 匹配非空白字符辣辫，與\s相反

'adobe ps'.match(/\S/g);
// ["a", "d", "o", "b", "e", "p", "s"]

● \b 匹配單詞邊界旦事，注意連續(xù)的數(shù)字、字母或下劃線組成的字符串會(huì)認(rèn)為一個(gè)單詞

'adobe(2016) ps6.4'.match(/\b(\w+)/g);
// ["adobe", "2016", "ps6", "4"]

● \B 匹配非單詞邊界急灭，仔細(xì)體會(huì)下面的示例與\b的結(jié)果

'adobe(2016) ps6.4'.match(/\B(\w+)/g);
// ["dobe", "016", "s6"]

● \0 匹配N(xiāo)UL字符

'\0'.match(/\0/);
// ["NUL"]

● \n 匹配換行符（編碼：10姐浮，newline）

'adobe\nps'.match(/\n/).index;
// 5

● \f 匹配換頁(yè)符

'adobe\fps'.match(/\f/).index;
// 5

● \r 匹配回車(chē)符（編碼：13，return）

'adobe\rps'.match(/\r/).index;
// 5

● \t 匹配制表符葬馋，鍵盤(pán)tab對(duì)應(yīng)的字符

'adobe\tps'.match(/\t/).index;
// 5

● \v 匹配垂直制表符

'adobe\vps'.match(/\v/).index;
// 5

● \xxx 匹配以八進(jìn)制數(shù)xxx規(guī)定的字符

'a'.charCodeAt(0).toString(8);
// "141"
'adobe ps'.match(/\141/g);
// ["a"]

● \xdd 匹配以十六進(jìn)制數(shù)dd規(guī)定的字符

'a'.charCodeAt(0).toString(16);
// "61"
'adobe ps'.match(/\x61/g);
// ["a"]

● \uxxxx 匹配以十六進(jìn)制數(shù)xxxx規(guī)定的 Unicode字符卖鲤，注意位數(shù)不夠需要補(bǔ)0

'a'.charCodeAt(0).toString(16);
// "61"
'adobe ps'.match(/\u0061/g);
// ["a"]

注意：
window系統(tǒng)回車(chē)換行符為\r\n，linux系統(tǒng)下沒(méi)有\(zhòng)r畴嘶，linux系統(tǒng)通過(guò)vi編輯器打開(kāi)window系統(tǒng)的文本文件時(shí)候蛋逾，經(jīng)常在行尾出現(xiàn)^M符號(hào)，也就是\r的原因窗悯，解析文本的時(shí)候需要注意相關(guān)判斷区匣。

3、量詞說(shuō)明

● n+ 匹配包含至少一個(gè)n的字符串

'adobe paas'.match(/a+\w+/g);
// ["adobe", "aas"]

● n* 匹配包含零個(gè)或多個(gè)n的字符串

'ab3 aa12bb'.match(/a*\d+/g);
// ["3", "aa12"]

● n? 匹配包含零個(gè)或一個(gè)n的字符串

'ab3 aa12bb'.match(/a?\d+/g);
// ["3", "a12"]

● n{x} 匹配包含連續(xù)x個(gè)n的字符串

'ab3 aa12bb aaa34'.match(/a{2}\d+/g);
// ["aa12", "aa34"]

● n{x,y} 匹配包含至少連續(xù)x個(gè)且最多連續(xù)y個(gè)n的字符串

'a3 aaa12bb aaaaaaa34'.match(/a{2,4}\d+/g);
// ["aaa12", "aaaa34"]

● n{x,} 匹配包含至少連續(xù)x個(gè)n的字符串

'a3 aaa12bbaa4'.match(/a{2,}\d+/g);
// ["aaa12", "aa4"]

由上可知蒋院，以下 表達(dá)式1 與 表達(dá)式2 等價(jià)

4、符號(hào)說(shuō)明

符號(hào) {}悦污、^{铸屉、$、*切端、+彻坛、?、[]、[}]昌屉、- 已經(jīng)在前面介紹過(guò)钙蒙，接下來(lái)看下其他特殊字符
● a|b 匹配包含a或b的字符串

'adobe ps13'.match(/([a-g]+l\d+)/g);
// ["ad", "be", "13"]

● / 字面量方式申明正則時(shí)的界定符

'adobe'.match(/\w+/);
// ["adobe"]

● \ 普通反斜線字符

'a\\dobe'.match(/\\/);
// ["\"]

5、小括號(hào) () 用法

正則在非全局(g)模式下间驮，通過(guò)match方式躬厌，返回的數(shù)組第一個(gè)值整體匹配的字符串，其他值為通過(guò)括號(hào)分組匹配到的
1）捕獲用法
● 表示對(duì)匹配的字符串進(jìn)行分組

'adobe cs9cs10, adobe cs11'.match(/([a-z]+\d+)+/);
// ["cs9cs10", "cs10"]
// 注意{2,}是對(duì) 括弧內(nèi)的匹配 的描述

● 與|一起使用表示選擇性

"he is 12. she is 13. it's box".match(/(it|she|he)\s+is/g);
// ["he is", "she is"]

● 表示對(duì)匹配的字符串捕獲

'adobe cs9'.match(/[a-z]+\d+/);
// ["cs9"]
'adobe cs9'.match(/[a-z]+(\d+)/);
// ["cs9", "9"]

● 表示對(duì)匹配的字符串反向引用竞帽，引用從 \1 開(kāi)始扛施，從正則左側(cè)第一個(gè)左括號(hào)（當(dāng)然要是閉合的括號(hào)才行）開(kāi)始計(jì)算，每多一對(duì)括號(hào)屹篓，引用數(shù)加一驱富，在非捕獲情況下不會(huì)加一马澈。但正則比較復(fù)雜時(shí)，減少引用可以提升匹配性能颖御，關(guān)于 非捕獲 下方會(huì)詳細(xì)介紹
引用的結(jié)果可以通過(guò) 構(gòu)造函數(shù) RegExp 獲取寓落，即 RegExp.9

'Can you can a can as a canner can can a can?'.match(/([cC]an+)\s+\1/g);
// ["can can"]
// 注意 `\1` 等價(jià)于正則里的 `([a-z]+)`震叮，即與下面示例相同
'Can you can a can as a canner can can a can?'.match(/[cC]an+\s+[cC]an+/g);
// ["can can"]

// 如果把括弧去掉可以看下結(jié)果
'Can you can a can as a canner can can a can?'.match(/[cC]an+\s+\1/g);
// null

2）非捕獲用法然痊，以(?)形式出現(xiàn)
● (?:n ) 表示非捕獲組

// 不使用括號(hào)時(shí)
'adobe12ps15test'.match(/[a-z]+\d+[a-z]+/);
// ["adobe12ps"]

// 使用括號(hào)分組

'adobe12ps15test'.match(/[a-z]+(\d+)([a-z]+)/);
// ["adobe12ps", "12", "ps"]

'adobe12ps15test'.match(/[a-z]+(?:\d+)([a-z]+)/);
// ["adobe12ps", "ps"]

// 看起來(lái)上面語(yǔ)句不用(?:)也可以得到相同結(jié)果煮岁，即：

'adobe12ps15test'.match(/[a-z]+\d+([a-z]+)/);
// ["adobe12ps", "ps"]

// 注意，但需求希望匹配字母之間的規(guī)則復(fù)雜時(shí)荒揣，如希望匹配字母篷角，且字母之間可以為1或3時(shí)，但不需要1和3

'adobe11ps15test'.match(/[a-z]+(1|3)+([a-z]+)/);
// ["adobe11ps", "1", "ps"]

// 返回中不希望包含數(shù)字怎么辦系任，可以使用非捕獲

'adobe11ps15test'.match(/[a-z]+(?:1|3)+([a-z]+)/);
// ["adobe11ps", "ps"]

● (?=n ) 匹配任何其后緊跟字符n的字符串内地，但返回中不包含n

'adobe12ps15test'.match(/[a-z]+(?=\d)/g);
// ["adobe", "ps"]

● (?!n ) 匹配任何其后沒(méi)有緊跟字符n的字符串，返回中不包含n

'adobe12ps15test'.match(/[a-z]+(?!\d)/g);
// ["adob", "p", "test"]

● (?<=n ) 匹配任何其前緊跟字符n的字符串赋除，返回中不包含n

'adobe12ps15test'.match(/(?<=\d)[a-z]+/g);
// ["ps", "test"]

● (?<!n ) 匹配任何其前緊跟字符n的字符串，返回中不包含n

'adobe12ps15test'.match(/(?<!\d)[a-z]+/g);
// ["adobe", "s", "est"]

3）注意
● A非凌、如果希望對(duì)上面特殊字符本身進(jìn)行匹配举农，需要在其前面添加\進(jìn)行轉(zhuǎn)移

'11+2=13'.match(/\d+\+/g); 
// ["11+"]
'(11+2)*2=26'.match(/\(\d+\+\d+\)/g); 
// ["(11+2)"]

● B、\舉例

// 注意下面兩個(gè)表達(dá)式返回的結(jié)果
'path C:\Windows\System32'.match(/([a-zA-Z]:\\\w+)/g); 
// null
'path C:\\Windows\\System32'.match(/([a-zA-Z]:\\\w+)/g); 
// ["C:\Windows"]

說(shuō)明: 在申明字符串 'path C:\Windows\System32' 時(shí)敞嗡，其中的 '' 就已經(jīng)被當(dāng)做轉(zhuǎn)移符颁糟，既是 '\W' ===
'W',所以如果希望申明的字符串中包含反斜線，需要在加一個(gè)反斜線轉(zhuǎn)義喉悴，即 \

6棱貌、正則相關(guān)方法

1） RegExp對(duì)象相關(guān)方法

在這里插入圖片描述

2）String對(duì)象相關(guān)方法

在這里插入圖片描述

3）replace 具體用法
顧名思義，是字符串替換方法箕肃，但用法比較廣泛婚脱，相信讀者已經(jīng)非常熟悉了。在此就當(dāng)復(fù)習(xí)了
A、 基本用法
直接傳入字符串進(jìn)行替換障贸，找到子串后只替換一次错森，舉例：

'adobe abc'.replace('b', '_')
// "ado_e abc"
// 注意 第二個(gè) b 沒(méi)有被替換

如果希望全部替換，可以使用正則表達(dá)式并用全局修飾符 g 方式篮洁，舉例：

'adobe abc'.replace(/b/g, '_')
// "ado_e a_c"

B涩维、 高級(jí)用法
第二個(gè)參數(shù)可以使用 function，其中有三個(gè)參數(shù)袁波，分別為 匹配的字符串瓦阐、當(dāng)前匹配的字符串index值、匹配的源字符串篷牌，最終結(jié)果根據(jù)每次匹配結(jié)果進(jìn)行相應(yīng)的替換
舉例：

'adobe aacc bbaa'.replace(/a+/g, function(str, index, source){
    if(index > 0){
        return str.toUpperCase();
    } else {
        return str;
    }
});
// "adobe AAcc bbAA"

第二部分 案例分析

一睡蟋、常見(jiàn)匹配

在寫(xiě)正則之前，需要注意以下幾點(diǎn)：

1. 一定要清楚期望的規(guī)則是什么娃磺，不然無(wú)從匹配
2. 有些正則不只一種寫(xiě)法薄湿，要注意簡(jiǎn)短干練，復(fù)雜的正則表達(dá)式不僅難懂偷卧，而且容易出BUG豺瘤，性能也不是很好
3. 正則雖好，可要適度奧听诸。有些字符串處理不一定適合用正則

1坐求、手機(jī)號(hào)

規(guī)則：以1開(kāi)頭第二位為3、5晌梨、7桥嗤、8且長(zhǎng)度為11位的數(shù)字組合

/^1[3578]\d{9}$/.test(13600001111);
// true

2、 字符串提取

舉例：提取字符串中的數(shù)字
分析：
根據(jù)對(duì)數(shù)字的理解仔蝌，可能為負(fù)數(shù)泛领，即-?，如果是負(fù)數(shù)敛惊，其后需要是數(shù)字且至少一位渊鞋，即 -?\d+，小數(shù)部分可能有也可能沒(méi)有瞧挤，所以需要對(duì)小數(shù)部分括弧起來(lái)用 ? 或 {0, 1}限定锡宋，因?yàn)?是特殊字符需要轉(zhuǎn)義，于是表達(dá)式為：-?\d+(.\d+)?

'(12.3 - 32.3)*2 = -40'.match(/-?\d+(\.\d+)?/g);
// ["12.3", "32.3", "2", "-40"]

二特恬、jQuery中的正則片段

1执俩、表達(dá)式
在jQuery 3.1.2-pre中找到一個(gè)解析單標(biāo)簽的正則，如下：

/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i

2癌刽、分解
乍一看有點(diǎn)懵役首，其實(shí)拆解之后就容易理解了尝丐，注意拆解的步驟，通常來(lái)說(shuō)：
1） 第一步可以先看括號(hào) () 宋税，可以將各個(gè)小括號(hào)及非括號(hào)的分成不同部分摊崭，如

/^<  ([a-z][^\/\0>:\x20\t\r\n\f]*)  [\x20\t\r\n\f]*\/?>  (?:<\/\1>|)  $/i

2） 第二步可以將中括號(hào)分開(kāi)

/^<  (  [a-z]  [^\/\0>:\x20\t\r\n\f]*  )  [\x20\t\r\n\f]*  \/?>  (?:<\/\1>|)  $/i

現(xiàn)在是不是已經(jīng)很清楚了，接下來(lái)分解下杰赛，就很容易理解了
3呢簸、詳解
● 1）^< 很明顯在匹配標(biāo)簽左尖括號(hào)括號(hào)，且以其開(kāi)始

● 2）( [a-z] [^\/\0>:\x20\t\r\n\f]* ) 這個(gè)括號(hào)有兩部分乏屯，第一個(gè) [a-z] 沒(méi)什么好解釋根时，即標(biāo)簽<緊跟的必須為字母，因?yàn)槿旨恿?i(忽略大小寫(xiě)) 修飾符辰晕，所以大小寫(xiě)字母都可以蛤迎；[^\/\0>:\x20\t\r\n\f]*，及限制標(biāo)簽名必須以字母開(kāi)始含友，且第二個(gè)字母不能為/ \0 > : \20 t \r \n \f的任意多個(gè)字符（思考為什么）替裆，() 表示對(duì)標(biāo)簽的分組，方便取到標(biāo)簽名

● 3）[\x20\t\r\n\f]* 表示可能含有 [\x20\t\r\n\f] 這些特殊字符窘问，與前面的 [^\/\0>:\x20\t\r\n\f]* 相似卻不一樣辆童，通過(guò)這里可以看出<br之后進(jìn)行回車(chē)也能匹配到
● 4）/?> 能匹配
或

● 5）(?:<\/\1>|) 這里不捕獲，并用\1去反向引用第一個(gè)括號(hào)的表達(dá)式 ([a-z][^\/\0>:\x20\t\r\n\f]*)惠赫。這里的|表示 </\1> 可有可無(wú)把鉴，即：(?:<\/\1>|) 與 (?:<\/\1>)?匹配結(jié)果一樣