正則表示式在線測(cè)試工具網(wǎng)站动遭，并以圖例的方式呈現(xiàn)正則表達(dá)式：regexper.com
本文章內(nèi)容通過(guò)學(xué)習(xí)Samaritan89老師的網(wǎng)課而總結(jié)的知識(shí)點(diǎn)
- RegExp對(duì)象
- 元字符
- 字符類
- 范圍類
- 預(yù)定義類及邊界
- 量詞
- 正則貪婪模式與非貪婪模式
- 分組
- 前瞻
- 正則表達(dá)式的對(duì)象屬性
- 正則表達(dá)式對(duì)象方法
- 跟正則表達(dá)式非常相關(guān)的字符串對(duì)象方法
1. RegExp對(duì)象
實(shí)例化RegExp對(duì)象有一下兩種方法
- 使用字面量實(shí)例化
var reg = /\bis\b/ 'He is a boy. This is a dogis.'.replace(reg,'IS') //He IS a boy. This is a dogis. var reg = /\bis\b/g 'He is a boy. This is a dogis.'.replace(reg,'IS') //He IS a boy. This IS a dogis. - 使用構(gòu)造函數(shù)實(shí)例化
//使用構(gòu)造函數(shù)實(shí)例化 var reg = new RegExp('\\bis\\b','g') 'He is a boy. This is a dogis.'.replace(reg,'IS') //He IS a boy. This IS a dogis. var reg = /\bis\b/gi 'He Is a boy. This Is a dogis.'.replace(reg,'0') //He 0 a boy. This 0 a dogis.
正則的修飾符有以下幾種：
| 符號(hào) | 解釋 | 默認(rèn)值 |
|---|---|---|
| g | global 全文搜索 | fasle,默認(rèn)搜索到第一個(gè)匹配停止 |
| i | ignore case 忽略大小寫(xiě) | false牵现，默認(rèn)大小寫(xiě)敏感 |
| m | multiple lines 多行搜索 | false窗价，默認(rèn)不匹配多行 |
2. 元字符
正則表達(dá)式由兩種基本字符類型組成：
- 原義wenbenzifu
- 元字符
元字符是在正則表達(dá)式中有特殊含義的非子母字符
常用的有：* + ? $ ^ . \ () {} [] 岛请，這些在下文篇幅中一一講述杨蛋，以及以下常用字符：
| 字符 | 含義 |
|---|---|
| \t | 水平制表符 |
| \v | 垂直制表符 |
| \n | 換行符 |
| \r | 回車符 |
| \0 | 空字符 |
| \f | 換頁(yè)符 |
3. 字符類
類：指符合某些特性的對(duì)象，是個(gè)泛指
用 元字符[ ] 匹配某類字符
例子：
'a1b2c3d4'.replace(/[abc]/g,'X')
//X1X2X3d4
在類[]中珍德，使用元字符^創(chuàng)建反向類/負(fù)向類,如下：
//表達(dá)式[^abc]表示不是字符a或b或c的內(nèi)容
'a1b2c3d4'.replace(/[^abc]/g,'X')
//aXbXcXXX
4. 范圍類
正則表達(dá)式提供的范圍類旦棉，如
[a-z]來(lái)連接兩個(gè)字符，表示從a到z的任意字符禾蚕，此表達(dá)的是閉區(qū)間您朽，包括a和z
例子：
'a1b2c3x4z9'.replace(/[a-z]/g,'P')
// P1P2P3P4P9
在[ ] 組成的類內(nèi)部是可以連寫(xiě)的[a-zA-Z]
'Aa1Bb2c3x4z9ASDFQW'.replace(/[a-zA-Z]/g,'P')
//"PP1PP2P3P4P9PPPPPP"
匹配數(shù)字和橫線,即再單加一個(gè)-
'2019-03-09'.replace(/[0-9-]/g,'P')
//PPPPPPPPPP
5. 預(yù)定義類及邊界
5.1 預(yù)定義類
預(yù)定義類是為了匹配常見(jiàn)的的字符類
| 字符 | 等價(jià)類 | 含義 |
|---|---|---|
| . | [^\r\n] | 除了回車符、換行符之外的所有字符 |
| \d | [0-9] | 數(shù)字字符 |
| \D | [^0-9] | 非數(shù)字字符 |
| \s | [\t\n\x0B\f\r] | 空白符 |
| \S | [^\t\n\x0B\f\r] | 非空白字符 |
| \w | [a-zA-Z_0-9] | 單詞字符（子母换淆、數(shù)字哗总、下劃線） |
| \W | [^-zA-Z_0-9] | 非單詞字符 |
例子：匹配 ab+數(shù)字+任意字符 的字符串
/ab\d./等價(jià)于 /ab[0-9][^\r\n]/
5.2邊界匹配字符####
| 字符 | 含義 |
|---|---|
| ^ | 以xxx開(kāi)始 |
| $ | 以xxx結(jié)束 |
| \b | 單詞邊界 |
| \B | 非單詞邊界 |
單詞邊界和非單詞邊界例子：
'This is a boy'.replace(/is/g,'0')
//Th0 0 a boy
'This is a boy'.replace(/\bis\b/g,'0')
//This 0 a boy
'This is a boy'.replace(/\Bis\b/g,'0')
//Th0 is a boy
字符串的首尾匹配例子：
'@123@abc@'.replace(/@./g,'Q')
//Q23Qbc@
'@123@abc@'.replace(/^@./g,'Q')
// Q3@abc@
'@123@abc@'.replace(/.@/g,'Q')
// @12QabQ
'@123@abc@'.replace(/.@$/g,'Q')
//@123@abQ
多行字符串的每行首尾匹配例子
'@123\n@456\n@789'.replace(/^@\d/g,'X')
//X23\n@456\n@789
'@123\n@456\n@789'.replace(/^@\d/gm,'X')
//X23\nX56\nX89
6. 量詞
例子：匹配一個(gè)連續(xù)出現(xiàn)5次數(shù)字的字符串
/\d\d\d\d\d/等價(jià)于/\d{20}/
量詞字符如下
| 字符 | 含義 |
|---|---|
| ? | 出現(xiàn)零次或一次（最多一次） |
| + | 出現(xiàn)一次或多次（最少一次） |
| * | 出現(xiàn)零次或多次（任意次） |
| {n} | 出現(xiàn)n次 |
| {n,m} | 出現(xiàn)n到m次 |
| {n,} | 最少出現(xiàn)n次 |
例子：
'12343432'.replace(/\d?/,'z')
// "z2343432"
'12343432'.replace(/\d+/,'z')
// "z" 為什么匹配所有的數(shù)組，而不是匹配一個(gè)倍试？看下一篇幅講述
'12343432'.replace(/\d*/,'z')
// "z"
'12343432'.replace(/\d{4}/,'z')
// "43432"
'12343432'.replace(/\d{4,7}/,'z')
// "z2"
'12343432'.replace(/\d{4,}/,'z')
// "z"
7. 正則貪婪模式與非貪婪模式
一般情況下讯屈，正則是默認(rèn)盡可能的匹配，即貪婪模式县习，如下例子
'12345678'.replace(/\d{3,6}/,'z')
//z78
開(kāi)啟非貪婪模式的方法：在量詞后面添加問(wèn)號(hào)
'12345678'.replace(/\d{3,6}?/,'z')
//z45678
'12345678'.replace(/\d{3,6}?/g,'z')
//zz78
8. 分組
8.1分組 ()
使用場(chǎng)景：匹配字符串連續(xù)出現(xiàn)三次的場(chǎng)景
例如：/Byron{3}/只能匹配連續(xù)3次的n涮母，單詞不重復(fù)
所以可以使用 元字符() 達(dá)到分組的功能，使量詞作用域分組
var reg = /(Byron){3}/
'a1b2c3d4'.replace(/[a-z]\d{3}/g,'X')
// "a1b2c3d4"
'a1b2c3d4'.replace(/([a-z]\d){3}/g,'X')
// "Xd4"
8.2 或 |
使用 元字符| 達(dá)到或的效果躁愿，而不需要分組
'ByronCasper'.replace(/Byron|Casper/g,'X')
// "XX"
也可以在分組中使用
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g,'X')
// "XX"
8.3 反向引用
反向引用可以捕獲分組內(nèi)容叛本，用$n（n表示第n個(gè)分組）表示，同時(shí)$&表示整個(gè)正則表達(dá)式匹配的內(nèi)容.例子如下：
'2019-03-10'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'$2/$3/$1')
// "03/10/2019"
'2019-03-10'.replace(/(\d{4})-(\d{2})-(\d{2})/g,'時(shí)間：$&')
//"時(shí)間：2019-03-10"
8.4 忽略分組
如不希望捕獲某些分組彤钟，需在分組的前面加上?:来候，例子：
'Byron1ok'.replace(/(?:Byron).(ok)/,'$1')
// "ok"
9. 前瞻
而前瞻就是在正則表達(dá)式匹配到規(guī)則的時(shí)候，向前檢查是否符合斷言逸雹。
對(duì)前的解釋：從文本頭部向尾部開(kāi)始解析营搅，文本尾部方向，稱為‘前’梆砸。
后顧/后瞻方向與之方向相反转质，但是javascript不支持后顧
前瞻中的正則表達(dá)式稱為斷言，又分為肯定/正向匹配和否定/負(fù)向匹配
| 名稱 | 正則 | 含義 |
|---|---|---|
| 正向前瞻 | exp(?=assert) | 匹配到exp后帖世，其后面字符是否能匹配assert的正則 |
| 負(fù)向前瞻 | exp(?!assert) | 匹配到exp后峭拘，其后面字符是否不能匹配assert的正則 |
例子：
'a2*34vv'.replace(/\w(?=\d)/g, 'X')
//X2*X4vv
'a2*34vv'.replace(/\w(?!\d)/g, 'X')
//aX*3XXX
10. 正則表達(dá)式的對(duì)象屬性
- global:是否全文搜索，默認(rèn)為false
- ignore case：是否大小寫(xiě)敏感狮暑，默認(rèn)是fasle
- multiline：多行搜索，默認(rèn)值是false
- lastIndex：是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個(gè)字符的下一個(gè)開(kāi)始搜索的位置
- source：正則表達(dá)式的文本字符串
var reg1 = /\w/;
var reg2 = /\w/gim;
reg1.global //false
reg2.multiline //true
11. 正則表達(dá)式對(duì)象方法
11.1 RegExp.prototype.test(str)
用于測(cè)試字符串參數(shù)重是否存在匹配正則表達(dá)式模式的字符串辉饱，如果存在則返回true搬男，否則返回false
但此方法，會(huì)有以下bug
var reg1 = /\w/
var reg2 = /\w/g
reg1.test('a')//true
reg2.test('ab')//true
reg2.test('ab')//true
reg2.test('ab')//false
reg2.test('ab')//true
reg2.test('ab')//true
reg2.test('ab')//false
會(huì)有以上原因主要是因?yàn)閘astIndex此屬性
正則對(duì)象的test()執(zhí)行后彭沼，其自身的lastIndex屬性值+1缔逛，循環(huán)著
解決方法：
- 每次都實(shí)例化一個(gè) (/\w/g).test('ab')，然而每次實(shí)例化一個(gè)對(duì)象需要內(nèi)存開(kāi)銷的
- 使用exec方法
11.2 RegExp.prototype.exec(str)
用途：使用正則表達(dá)式模塊對(duì)字符串執(zhí)行搜索，并將更新全局RegExp對(duì)象的屬性以反映匹配結(jié)果
如果沒(méi)有匹配的文本則返回null褐奴，否則返回一個(gè)結(jié)果數(shù)組按脚，數(shù)組有兩個(gè)額外的屬性
- index：生命匹配文本的第一個(gè)字符的位置
- input：存放被檢索的字符串string
非全局調(diào)用（即沒(méi)有修飾符g）
- 返回?cái)?shù)組
- 第一個(gè)元素是與正則表示相匹配的文本
- 第二個(gè)元素是與RegExpObject的第一個(gè)子表達(dá)式相匹配的文本（如果有的話）
- 第三個(gè)元素是與RegExp對(duì)象的第二個(gè)子表達(dá)式相匹配的文本（如果有的話),以此類推
- 子表達(dá)式就是分組的內(nèi)容
var ts = '1a2b3c4d5e'
var reg3 = /\d(\w)\d/
var ret = reg3.exec(ts)
console.log(reg3.lastIndex+' '+ret.index+' '+ret.toString())
//0 0 1a2,a
console.log(reg3.lastIndex+' '+ret.index+' '+ret.toString())
//0 0 1a2,a
對(duì)整個(gè)字符串進(jìn)行搜索，能獲得到具體的值:
var ts = '1a2b3c4d5e'
var reg4 = /\d(\w)\d/g, ret
while(ret = reg4.exec(ts)){
console.log(reg4.lastIndex+' '+ret.index+' '+ret.toString())
}
//2 3 0 1a2,a
//2 7 4 3c4,c
12. 跟正則表達(dá)式非常相關(guān)的字符串對(duì)象方法
12.1 String.prototype.search(reg)
用途：檢索與正則表達(dá)式相匹配的子字符串
- 方法返回第一個(gè)匹配結(jié)果的index敦冬，搜索不到返回-1
- search()方法不執(zhí)行全局匹配辅搬，忽略標(biāo)志g，并且總是從字符串的開(kāi)始進(jìn)行
- search參數(shù)不是正則的都會(huì)嘗試轉(zhuǎn)換成正則
'a1b2c3d1'.search('1')
//1
'a1b2c3d1'.search(/1/)
//1
'a1b2c3d1'.search(1)
//1
12.2 String.prototype.match(reg)
用途：match()檢索字符串脖旱，返回匹配的結(jié)果數(shù)組堪遂，沒(méi)有則null
有兩個(gè)對(duì)象屬性
- index：聲明匹配文本的起始字符在字符串的位置
- input：聲明對(duì)stringObject的引用
- 若是非全局調(diào)用的話（無(wú)g），是和正則表達(dá)式方法的exec用途相反
- 若是全局調(diào)用萌庆，match只是返回?cái)?shù)組溶褪，不會(huì)有index什么的
例子：
String.prototype.split(reg)
'a,b,c,d'.split(',')
'a1b2c3d4e'.split(/\d/g)
// ["a", "b", "c", "d", "e"]
12.3 String.prototype.replace
三個(gè)用法:
- String.prototype.replace(str, replaceStr)
- String.prototype.replace(reg, replaceStr)
- String.prototype.replace(reg, function(){})
上面的回調(diào)函數(shù)在每次匹配替換的時(shí)候調(diào)用，有四個(gè)參數(shù)
- 匹配字符串
- 正則表達(dá)式分組內(nèi)容践险，沒(méi)有分組則沒(méi)有該參數(shù)
- 匹配項(xiàng)在字符串中的index
- 原字符串
'a1b1c1'.replace('1',2)
//a2b1c1
'a1b1c1'.replace(/1/g,2)
//a2b2c2
// 需要實(shí)現(xiàn)的目標(biāo)：'a1b2c3d4' => 'a2b3c4d5'
'a1b2c3d4'.replace(/\d/g,function(match, index, origin){
console.log(index)
return parseInt(match)+1
})
// 1
// 3
// 5
// 7
// "a2b3c4d5"
'a1b2c3d4'.replace(/(\d)(\w)(\d)/g,function(match, group1, group2,group3, index, origin){
console.log(match)
return group1+group3
})
//1b2
//3d4
//"a12c34"
