第一部分 基礎(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ō)明 |
---|---|
i | 忽略大小寫(xiě)匹配 |
g | 全局匹配晋柱,即是匹配一個(gè)后繼續(xù)匹配优构,直到結(jié)束 |
m | 多行匹配,即是遇到換行后不停止匹配雁竞,直到結(jié)束 |
說(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)的任意字符:
注意:
1)^ 在 [] 內(nèi)開(kāi)始位置及正則雙斜線開(kā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à)
表達(dá)式1 | 表達(dá)式2 |
---|---|
n+ | n{1,} |
n* | n{0,} |
n亏钩? | n{0,1} |
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):
- 一定要清楚期望的規(guī)則是什么娃磺,不然無(wú)從匹配
- 有些正則不只一種寫(xiě)法薄湿,要注意簡(jiǎn)短干練,復(fù)雜的正則表達(dá)式不僅難懂偷卧,而且容易出BUG豺瘤,性能也不是很好
- 正則雖好,可要適度奧听诸。有些字符串處理不一定適合用正則
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é)果一樣