js正則表達(dá)式比較繁瑣甩恼,因此在學(xué)習(xí)上遇到了很多問題,下面這篇文章是我看到整理的比較好的文章沉颂,但是文中有一些小小的書寫錯(cuò)誤条摸,我進(jìn)行了改正并且在文中加入了自己學(xué)習(xí)的想法,大家可以根據(jù)原文對(duì)比學(xué)習(xí)(如有侵權(quán)請(qǐng)聯(lián)系刪除)
原文地址:http://www.reibang.com/p/59bc62880039
本文僅介紹 javascript
語言中的正則铸屉,其他語言雖有不同钉蒲,但很類似,感興趣的自行g(shù)oogle吧彻坛。另外本文針對(duì)所有示例都給了輸出結(jié)果顷啼,希望讀者思考為什么返回這樣的結(jié)果踏枣,和自己期望的有什么不一樣,建議自己也動(dòng)手輸入一下钙蒙,加深記憶茵瀑。
本文總體分兩部分:基礎(chǔ)知識(shí) 和 案例分析
第一部分 基礎(chǔ)知識(shí)
一、正則申明方式
1躬厌、構(gòu)造函數(shù)方式
var reg = new RegExp('\d', 'gi');
- 通過
new
構(gòu)造一個(gè)正則表達(dá)式對(duì)象马昨,其中第一個(gè)參數(shù)'\d'
是正則內(nèi)容,第二個(gè)參數(shù)'gi'
是修飾符扛施。兩個(gè)參數(shù)皆為字符串類型 - 修飾符的作用是對(duì)匹配過程進(jìn)行限定
- 修飾符有三種:i, g, m鸿捧,可以同時(shí)出現(xiàn),沒有順序(即
gi
與ig
一樣)疙渣,請(qǐng)參考下方說明
修飾符 | 說明 |
---|---|
i | 忽略大小寫匹配 |
g | 全局匹配匙奴,即是匹配一個(gè)后繼續(xù)匹配,直到結(jié)束 |
m | 多行匹配妄荔,即是遇到換行后不停止匹配饥脑,直到結(jié)束 |
說明:
-
[a-z]
表示從小寫字母a到小寫字母z之間的任意字符(含a和z),下文會(huì)有詳細(xì)說明 -
+
表示至少出現(xiàn)一次 -
\n
在js中表示換行 -
^[a-z]
表示以任意小寫字母開頭的行
'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"]
具體用法請(qǐng)看下文相關(guān)的示例
2懦冰、字面量方式
相比較上一種方式灶轰,這一種更為常見,上面示例也都使用了這種方式
var reg = /\d/gi;
兩個(gè)斜線內(nèi)為正則的內(nèi)容刷钢,后面可以跟修飾符笋颤,與第一種構(gòu)造函數(shù)方式相比更簡潔,缺點(diǎn)是正則內(nèi)容不能拼接内地,對(duì)于大多數(shù)場景來說足夠了
二伴澄、正則相關(guān)符號(hào)
1、方括號(hào) []
用法
用于查找方括號(hào)內(nèi)的任意字符:
表達(dá)式 | 說明 | 示例 | 返回結(jié)果 |
---|---|---|---|
[abc] | 匹配方括號(hào)內(nèi)的任意字符 | 'adobe'.match(/[abc]/g) |
["a", "b"] |
[^abc] | 匹配不在方括號(hào)內(nèi)的任意字符 | 'adobe'.match(/[^abc]/g) |
["d", "o", "e"] |
[0-9] | 匹配任何從 0 至 9 的數(shù)字 | '2016s'.match(/[0-9]/g) |
["2", "0", "1", "6"] |
[a-z] | 匹配任何從小寫 a 至 z 的字符 | 'adobe 2016'.match(/[a-z]/g) |
["a", "d", "o", "b", "e"] |
[A-Z] | 匹配任何從大寫 A 至 Z 的字符 | 'adobe PS 2016'.match(/[A-Z]/g) |
["P", "S"] |
注意:
1)^
在 []
內(nèi)開始位置或在正則雙斜線開始位置有特殊含義阱缓,其他位置表示 ^
字符本身
-
^
在正則開頭位置表示以某某開頭的字符串/^ /
非凌,如下表示以大寫或小寫字母開頭的且連續(xù)為字母的字符串:
'adobe 2016'.match(/^[a-zA-Z]+/);
// ["adobe"]
- 在正則的 或 匹配中(即
|
匹配),表示 或者以某某字符開始的字符串荆针,如下表示匹配 連續(xù)數(shù)字 或 以小寫字母開頭且連續(xù)為小寫字母的字符串敞嗡,所以返回結(jié)果包含2016
和adobe
,注意返回結(jié)果不是["2016", "adobe"]
'adobe2016ps'.match(/\d+|^[a-z]+/g);
// ["adobe", "2016"]
- 在
[]
內(nèi)開始位置時(shí)航背,表示不匹配[]
內(nèi)除^
以外的所有字符:
'adobe'.match(/[^abc]/g);
// ["d", "o", "e"]
注: $
與 ^
的前兩個(gè)用法相似喉悴,只不過匹配的是以某某字符結(jié)尾的字符串(這個(gè)結(jié)尾指的是整個(gè)字符串的結(jié)尾,而不是其中一段字符串的結(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)語法錯(cuò)誤(a的ASCII值為97,A為65今魔,其余字母依次遞增)
'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)障贸,大寫字母的 ASCII 值是小于小寫字母的,因此下面用法會(huì)報(bào)語法錯(cuò)誤
'adobe-2016'.match(/[a-Z]/g);
// Uncaught SyntaxError: Invalid regular expression: /[a-Z]/: Range out of order in character ...
那么問題來了吟宦,如果要表示所有字母篮洁,不區(qū)分大小寫怎么辦呢?其實(shí)有兩種方式:
A督函、第一種是使用修飾符 i
嘀粱,前面提到過。舉例:
'adobe-PS'.match(/[a-z]/gi);
// ["a", "d", "o", "b", "e", "P", "S"]
B辰狡、第二種是在正則中明確指明大小寫字母锋叨,舉例:
'adobe-PS'.match(/[a-zA-Z]/g);
// ["a", "d", "o", "b", "e", "P", "S"]
返回結(jié)果跟第一種一樣。當(dāng)然這個(gè)例子有些特殊:匹配了所有大小寫字母宛篇。當(dāng)只匹配部分大小寫字母的時(shí)候只能使用第二種方式娃磺,在此就不做示例了,讀者可以自己測(cè)試
6)匹配大小字母不能寫成 [A-z]叫倍,雖然不會(huì)報(bào)語法錯(cuò)誤偷卧,但隱式的放大了匹配范圍,查看 ASCII 會(huì)發(fā)現(xiàn)吆倦,在大寫字母 Z
到小寫字母 a
之間還有 [
听诸、 \
、 ]
蚕泽、 ^
晌梨、 _
、 ` 這6個(gè)字符须妻,因此不能這么寫仔蝌。
7)想必有同學(xué)會(huì)問, \w
不也可以匹配字母么荒吏?是的敛惊,\w
確實(shí)可以匹配字母,但跟上面說的一樣,也隱式的放大了匹配范圍绰更,\w
除了匹配大小字母外還匹配了數(shù)字和下劃線瞧挤,即 \w
與 [A-Za-z0-9_]
等價(jià),當(dāng)然 A-Z
动知、a-z
皿伺、0-9
(等價(jià)于\d
)、_
這四組沒順序之分
2盒粮、特殊含義字符
.
匹配任意單個(gè)字符,除換行和結(jié)束符
'1+0.2*2=1.4'.match(/.{2}/g);
// ["1+", "0.", "2*", "2=", "1."]
\w
匹配任意單個(gè)(數(shù)字奠滑、字母丹皱、下劃線)字符妒穴,等價(jià)于[A-Za-z0-9_]
'ad34~!@$ps'.match(/\w/g);
// ["a", "d", "3", "4", "p", "s"]
\W
匹配除了(數(shù)字、字母摊崭、下劃線)以外的任意單個(gè)字符讼油,與\w
相反,等價(jià)于[^A-Za-z0-9_]
'ad34~!@$ps'.match(/\W/g);
// ["~", "!", "@", "$"]
\d
匹配單個(gè)數(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
(這里面還有一個(gè)引申的問題是如何用正則表達(dá)式匹配反斜杠\
)
'adobe ps'.match(/\s/g);
// [" "]
\S
匹配非空白字符替裆,與\s
相反
'adobe ps'.match(/\S/g);
// ["a", "d", "o", "b", "e", "p", "s"]
可以用\S
匹配出反斜杠\
校辩,因?yàn)樵谧址袃蓚€(gè)\\
表示一個(gè)反斜杠,因此如下就可以匹配出反斜杠辆童,但是如果字符串中只有一個(gè)\
是匹配不出來的
'A\\ i'.match(/\\/g);
// ["\"]
'A\\ i'.match(/\S/g);
// ["A", "\", "i"]
'A\ i'.match(/\S/g);
// ["A", "i"]
\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
匹配NUL字符
'\0'.match(/\0/);
// ["NUL"]
// 或者會(huì)輸出
// ["", index: 0, input: "", groups: undefined]
-
\n
匹配換行符(編碼:10故黑,newline
)(接下來幾個(gè)匹配的返回值都是所在位置的index)
'adobe\nps'.match(/\n/).index;
// 5
\f
匹配換頁符
'adobe\fps'.match(/\f/).index;
// 5
\r
匹配回車符(編碼:13,return
)
'adobe\rps'.match(/\r/).index;
// 5
\t
匹配制表符纸镊,鍵盤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)回車換行符為
\r\n
,linux系統(tǒng)下沒有\r
逗威,linux系統(tǒng)通過vi
編輯器打開window系統(tǒng)的文本文件時(shí)候峰搪,經(jīng)常在行尾出現(xiàn)^M
符號(hào),也就是\r
的原因凯旭,解析文本的時(shí)候需要注意相關(guān)判斷概耻。
3、量詞說明
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)說明
符號(hào) {}
嫉柴、^
厌杜、$
、*
、+
夯尽、?
瞧壮、[]
、[^]
匙握、-
已經(jīng)在前面介紹過咆槽,接下來看下其他特殊字符
a|b
匹配包含a
或b
的字符串
'adobe ps13'.match(/([a-g]+|\d+)/g);
// ["ad", "be", "13"]
/
字面量方式申明正則時(shí)的界定符
'adobe'.match(/\w+/);
// ["adobe"]
\
普通反斜線字符
'a\\dobe'.match(/\\/);
// ["\"]
5、小括號(hào) ()
用法
正則在非全局(g
)模式下圈纺,通過match方式秦忿,返回的數(shù)組第一個(gè)值整體匹配的字符串,其他值為通過括號(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
開始灯谣,從正則左側(cè)第一個(gè)左括號(hào)(當(dāng)然要是閉合的括號(hào)才行)開始計(jì)算,每多一對(duì)括號(hào)茫叭,引用數(shù)加一酬屉,在非捕獲情況下不會(huì)加一。但正則比較復(fù)雜時(shí)揍愁,減少引用可以提升匹配性能呐萨,關(guān)于 非捕獲 下方會(huì)詳細(xì)介紹
引用的結(jié)果可以通過 構(gòu)造函數(shù) RegExp
獲取,即 RegExp.$1
一直到 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"]
// 看起來上面語句不用(?:)也可以得到相同結(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 )
匹配任何其后沒有緊跟字符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"]
說明:
在申明字符串 'path C:\Windows\System32' 時(shí)邢锯,其中的
'\'
就已經(jīng)被當(dāng)做轉(zhuǎn)義符扬蕊,既是'\W' === 'W'
('\Windows' === 'Windows'),所以如果希望申明的字符串中包含反斜線,需要在加一個(gè)反斜線轉(zhuǎn)義丹擎,即\\
6尾抑、正則相關(guān)方法
1) RegExp對(duì)象相關(guān)方法
方法名 | 使用場景 | 返回值 | 示例 |
---|---|---|---|
test | 判斷是否匹配 | true/false | /\d/.test('2016s') |
exec | 返回匹配的結(jié)果,與match類似 | 數(shù)組或null | /\d/.exec('2016s') |
2)String對(duì)象相關(guān)方法
方法名 | 使用場景 | 返回值 | 示例 |
---|---|---|---|
match | 返回匹配的結(jié)果,非全局條件下與exec返回結(jié)果一致蛮穿,并擁有指向匹配字符串的信息庶骄,全局條件下一次性返回所有匹配的結(jié)果 | 數(shù)組或null | '2016s'.match(/\d+/) |
replace | 將字符串替換成另外的字符串或?qū)⒄齽t的匹配字符串替換成其他子串 | 字符串 | '2016s'.replace(/\d+/, '123') |
search | 查找第一次匹配子串的位置毁渗,返回index值践磅,否則返回-1 | index | '2016s'.search(/s/) |
split | 按約定字符串或字符串規(guī)則拆分成數(shù)組,接受一個(gè)字符串或正則 | 數(shù)組 | '20,1,6s'.split(/,/) |
3)replace
具體用法
顧名思義灸异,是字符串替換方法府适,但用法比較廣泛,相信讀者已經(jīng)非常熟悉了肺樟。在此就當(dāng)復(fù)習(xí)了
A檐春、 基本用法
直接傳入字符串進(jìn)行替換,找到子串后只替換一次么伯,舉例:
'adobe abc'.replace('b', '_')
// "ado_e abc"
// 注意 第二個(gè) b 沒有被替換
如果希望全部替換疟暖,可以使用正則表達(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"
第二部分 案例分析
一缀磕、常見匹配
在寫正則之前缘圈,需要注意以下幾點(diǎn):
- 一定要清楚期望的規(guī)則是什么,不然無從匹配
- 有些正則不只一種寫法袜蚕,要注意簡短干練糟把,復(fù)雜的正則表達(dá)式不僅難懂,而且容易出BUG牲剃,性能也不是很好
- 正則雖好遣疯,可要適度奧。有些字符串處理不一定適合用正則
1颠黎、手機(jī)號(hào)
規(guī)則:以1開頭第二位為3
另锋、5
、7
狭归、8
且長度為11位的數(shù)字組合
/^1[3578]\d{9}$/.test(13600001111);
// true
2夭坪、 字符串提取
舉例:提取字符串中的數(shù)字
分析:
根據(jù)對(duì)數(shù)字的理解,可能為負(fù)數(shù)过椎,即
-?
室梅,如果是負(fù)數(shù),其后需要是數(shù)字且至少一位,即-?\d+
亡鼠,小數(shù)部分可能有也可能沒有赏殃,所以需要對(duì)小數(shù)部分括弧起來用?
或{0, 1}
限定,因?yàn)?code>.是特殊字符需要轉(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í)拆解之后就容易理解了思劳,注意拆解的步驟迅矛,通常來說:
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)分開
/^< ( [a-z] [^\/\0>:\x20\t\r\n\f]* ) [\x20\t\r\n\f]* \/?> (?:<\/\1>|) $/i
現(xiàn)在是不是已經(jīng)很清楚了秽褒,接下來分解下,就很容易理解了
3威兜、詳解
1)
^<
很明顯在匹配標(biāo)簽左尖括號(hào)括號(hào)销斟,且以其開始2)
( [a-z] [^\/\0>:\x20\t\r\n\f]* )
這個(gè)括號(hào)有兩部分,第一個(gè)[a-z]
沒什么好解釋牡属,即標(biāo)簽<
緊跟的必須為字母票堵,因?yàn)槿旨恿?i
(忽略大小寫) 修飾符,所以大小寫字母都可以逮栅;[^\/\0>:\x20\t\r\n\f]*
悴势,即限制標(biāo)簽名必須以字母開始,且第二個(gè)字母不能為/
\0
>
:
20(16進(jìn)制的20措伐,也就是10進(jìn)制的32特纤,也就是ASCII值為32,其實(shí)就是空格)
\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]*
相似卻不一樣担败,通過這里可以看出<br
之后進(jìn)行回車也能匹配到4)
\/?>
能匹配<br>
或<br/>
5)
(?:<\/\1>|)
這里不捕獲昔穴,并用\1
去反向引用第一個(gè)括號(hào)的表達(dá)式([a-z][^\/\0>:\x20\t\r\n\f]*)
。這里的|
表示<\/\1>
可有可無提前,即:(?:<\/\1>|)
與(?:<\/\1>)?
匹配結(jié)果一樣
參考資料
[1] https://en.wikipedia.org/wiki/Regular_expression
[2] 解惑正則表達(dá)式中的捕獲
原作者:艾特TT
鏈接:http://www.reibang.com/p/59bc62880039
來源:簡書
著作權(quán)歸作者所有吗货。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處狈网。