JS正則表達(dá)式總結(jié)

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),沒有順序(即 giig 一樣)疙渣,請(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é)果包含2016adobe,注意返回結(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 匹配包含ab的字符串
'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):

  1. 一定要清楚期望的規(guī)則是什么,不然無從匹配
  2. 有些正則不只一種寫法袜蚕,要注意簡短干練糟把,復(fù)雜的正則表達(dá)式不僅難懂,而且容易出BUG牲剃,性能也不是很好
  3. 正則雖好遣疯,可要適度奧。有些字符串處理不一定適合用正則

1颠黎、手機(jī)號(hào)

規(guī)則:以1開頭第二位為3另锋、57狭归、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)注明出處狈网。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末宙搬,一起剝皮案震驚了整個(gè)濱河市笨腥,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌勇垛,老刑警劉巖脖母,帶你破解...
    沈念sama閱讀 211,123評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異闲孤,居然都是意外死亡谆级,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門崭放,熙熙樓的掌柜王于貴愁眉苦臉地迎上來哨苛,“玉大人,你說我怎么就攤上這事币砂。” “怎么了玻侥?”我有些...
    開封第一講書人閱讀 156,723評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵决摧,是天一觀的道長。 經(jīng)常有香客問我凑兰,道長掌桩,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評(píng)論 1 283
  • 正文 為了忘掉前任姑食,我火速辦了婚禮波岛,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘音半。我一直安慰自己则拷,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,412評(píng)論 5 384
  • 文/花漫 我一把揭開白布曹鸠。 她就那樣靜靜地躺著煌茬,像睡著了一般。 火紅的嫁衣襯著肌膚如雪彻桃。 梳的紋絲不亂的頭發(fā)上坛善,一...
    開封第一講書人閱讀 49,760評(píng)論 1 289
  • 那天,我揣著相機(jī)與錄音邻眷,去河邊找鬼眠屎。 笑死,一個(gè)胖子當(dāng)著我的面吹牛肆饶,可吹牛的內(nèi)容都是我干的改衩。 我是一名探鬼主播,決...
    沈念sama閱讀 38,904評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼抖拴,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼燎字!你這毒婦竟也來了腥椒?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤候衍,失蹤者是張志新(化名)和其女友劉穎笼蛛,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蛉鹿,經(jīng)...
    沈念sama閱讀 44,118評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡滨砍,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,456評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了妖异。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片惋戏。...
    茶點(diǎn)故事閱讀 38,599評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖他膳,靈堂內(nèi)的尸體忽然破棺而出响逢,到底是詐尸還是另有隱情,我是刑警寧澤棕孙,帶...
    沈念sama閱讀 34,264評(píng)論 4 328
  • 正文 年R本政府宣布舔亭,位于F島的核電站,受9級(jí)特大地震影響蟀俊,放射性物質(zhì)發(fā)生泄漏钦铺。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,857評(píng)論 3 312
  • 文/蒙蒙 一肢预、第九天 我趴在偏房一處隱蔽的房頂上張望矛洞。 院中可真熱鬧,春花似錦烫映、人聲如沸沼本。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽擅威。三九已至,卻和暖如春冈钦,著一層夾襖步出監(jiān)牢的瞬間郊丛,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評(píng)論 1 264
  • 我被黑心中介騙來泰國打工瞧筛, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留厉熟,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 46,286評(píng)論 2 360
  • 正文 我出身青樓较幌,卻偏偏與公主長得像揍瑟,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子乍炉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,465評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 第一部分 基礎(chǔ)知識(shí) 一绢片、正則申明方式 1滤馍、構(gòu)造函數(shù)方式 ● 通過 new 構(gòu)造一個(gè)正則表達(dá)式對(duì)象,其中第一個(gè)參數(shù) ...
    _雙眸閱讀 26,784評(píng)論 2 15
  • 作為一名攻城獅底循,對(duì)正則表達(dá)式一定不會(huì)很陌生巢株,但在平時(shí)開發(fā)中有時(shí)依然會(huì)遇到這樣或那樣的問題。本文從基礎(chǔ)出發(fā)熙涤,本著讓初...
    艾特TT閱讀 2,014評(píng)論 3 12
  • 創(chuàng)建正則表達(dá)式 1.使用RegExp()構(gòu)造函數(shù)來創(chuàng)建 RegExp()構(gòu)造函數(shù)非常有用阁苞,特別是在需要?jiǎng)討B(tài)創(chuàng)建正則...
    振禮碩晨閱讀 665評(píng)論 0 0
  • 0、前言 ??作為一名前端開發(fā)者祠挫,在做表單驗(yàn)證或者寫一些gulp任務(wù)或webpack配置時(shí)都不可避免的會(huì)用到正則那槽,...
    風(fēng)之化身呀閱讀 479評(píng)論 0 0
  • 正則表達(dá)式到底是什么東西骚灸?字符是計(jì)算機(jī)軟件處理文字時(shí)最基本的單位软瞎,可能是字母逢唤,數(shù)字,標(biāo)點(diǎn)符號(hào)涤浇,空格魔慷,換行符,漢字等...
    獅子挽歌閱讀 2,141評(píng)論 0 9