在線js代碼編寫網(wǎng)址：https://jsbin.com/yalasugire/edit?js,console
1、REGEXP對象
1.1 JavaScript通過內(nèi)置對象RegExp支持正則表達(dá)式
1.2 有兩種方法實(shí)例化RegExp對象
- 字面量
var reg = /\bis\b/g;
- 構(gòu)造函數(shù)
// 在js中 \ 是特殊字符，要使用的話必須使用轉(zhuǎn)義字符進(jìn)行轉(zhuǎn)義
var reg = new RegExp('\\bis\\b', 'g');
2、修飾符
-
g:global全文搜索，不添加，搜索到第一個匹配停止 -
i:ignore case 忽略大小寫，默認(rèn)大小寫敏感
// 全局搜索
'He is a boy. Is he?It is a dog.'.replace(/\bis\b/g, '0'); // "He 0 a boy. Is he?It 0 a dog."
// 全局搜索并忽略大小寫
'He is a boy. Is he?It is a dog.'.replace(/\bis\b/gi, '0'); // "He 0 a boy. 0 he?It 0 a dog."
-
m:multiple lines 多行搜索
3、元字符
3.1 原義文本字符
代表它本來含義的字符，例如字母a,b,c...,1,2,3...
3.2 元字符
元字符是在正則表達(dá)式中有特殊含義的非字母字符，元字符的含義并不是唯一的，在不同的場景下有不同的含義。
3.3 有特殊含義的一些字符
-
*、+、?、$、^、.、|、\、()、{}、[] -
\t:水平制表符（鍵盤tab鍵） -
\v:垂直制表符 -
\n:換行符 -
\r:回車符 -
\0:空字符 -
\f:換頁符 -
\cX:與X對應(yīng)的控制字符（Ctrl + X），例如：\cZ就相當(dāng)于Ctrl + Z
4、字符類
4.1 一般情況下正則表達(dá)式一個字符對應(yīng)字符串的一個字符，例如表達(dá)式ab\t
4.2 當(dāng)我們需要匹配某一類字符的時候，我們可以使用元字符[]來構(gòu)建一個簡單的類
- 所謂類是指符合某些特性的對象，一個泛指，而不是某個字符
- 表達(dá)式
[abc]把字符a或b或c歸為一類，表達(dá)式可以匹配這類的字符
'a1b2c3d4'.replace(/[abc]/g, 'X'); // "X1X2X3d4"
4.3 字符類取反
- 使用元字符
^創(chuàng)建 反向類/負(fù)向類 - 反向類的意思是不屬于某類的內(nèi)容
- 表達(dá)式
[^abc]表示 不是字符a或b或c的內(nèi)容
'a1b2c3d4'.replace(/[^abc]/g, 'X'); // "aXbXcXXX"
5、范圍類
- 我們可以使用
[a-z]來連接兩個字符表示 從a到z的任意字符 - 這是個閉區(qū)間，也就是包含
a和z本身
'a1b2d3x4g7'.replace(/[a-z]/g, 'Q'); // "Q1Q2Q3Q4Q7"
- 在
[]組成的類內(nèi)部是可以連寫的[a-zA-Z]
'a1b2d3x4g7DFGHFHGF'.replace(/[a-zA-Z]/g, 'Q'); // "Q1Q2Q3Q4Q7QQQQQQQQ"
注意，在范圍類里面匹配-，只用在范圍類內(nèi)部加一個-就可以了。
'2020-11-20'.replace(/[0-9-]/g, 'A'); // "AAAAAAAAAA"
6、預(yù)定義類與邊界
6.1 預(yù)定義類 —— 用來匹配常見的字符類，使其書寫更方便
-
.：等價類[^\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：等價類[^a-zA-Z_0-9]，非單詞字符
例子：匹配一個 ab+數(shù)字+任意字符 的字符串
ab\d.
6.2 邊界
-
^：以xxx開始（注意：寫在開頭）
// 在不使用 ^ 時
'@123@abc@'.replace(/@./g, 'Q'); // "Q23Qbc@"
// 只想替換開頭的 @ 字符時
'@123@abc@'.replace(/^@./g, 'Q'); // "Q23@abc@"
-
$：以xxx結(jié)束（注意：寫在結(jié)尾）
// 在不使用 $ 時
'@123@abc@'.replace(/.@/g, 'Q'); // "@12QabQ"
// 只想替換結(jié)尾的 @ 字符時
'@123@abc@'.replace(/.@$/g, 'Q'); // "@123@abQ"
-
\b：單詞邊界 -
\B：非單詞邊界
// 在不使用 \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"
7、量詞
-
?：出現(xiàn)零次或一次（最多出現(xiàn)一次） -
+：出現(xiàn)一次或多次（至少出現(xiàn)一次） -
*：出現(xiàn)零次或多次（任意次） -
{n}：出現(xiàn)n次 -
{n,m}：出現(xiàn)n到m次 -
{n,}：至少出現(xiàn)n次
// 匹配數(shù)字連續(xù)出現(xiàn)20次的場景
\d{20}
// 一個復(fù)雜點(diǎn)的例子
\d{20}\w\d?\w+\d*\d{3}\w{3,5}\d{3,}
8、JS正則貪婪模式與非貪婪模式
8.1 貪婪模式（JS正則默認(rèn)匹配模式）
正則表達(dá)式在處理的時候，會盡可能多的匹配，直到匹配失敗
// 匹配6次
'12345678'.replace(/\d{3,6}/g, 'X'); // "X78"
// 匹配8次
'12345678'.replace(/\d{3,9}/g, 'X'); // "X"
8.2 非貪婪模式
- 讓正則表達(dá)式盡可能少的匹配，也就是說一旦匹配成功就不再繼續(xù)嘗試，就是非貪婪模式
- 做法很簡單，在量詞后加上
?就可以了
'12345678'.replace(/\d{3,6}?/g, 'X'); // "XX78"
9、分組
9.1 分組
假如我們想要匹配字符串Byron連續(xù)出現(xiàn)3次的場景，我們可能會這樣寫Byron{3}，但實(shí)際情況卻是匹配了字符Byro以及3個n的組合
'ByronByronByron'.replace(/Byron{3}/g, 'X'); // "ByronByronByron"
因此上述的正則并不會匹配成功，從而還是返回原字符。所以量詞是作用于緊挨著它的這個字符的，而不是整個單詞。
使用()可以達(dá)到分組的功能，使量詞作用于分組。
因此上述的需求可以這樣寫(Byron){3}
'ByronByronByron'.replace(/(Byron){3}/g, 'X'); // "X"
9.2 或
- 使用
|達(dá)到或的效果 - 注意：使用或過后，是把正則表達(dá)式前后分成了兩部分
'ByronCasper'.replace(/Byron|Casper/g, 'X'); // "XX"
如果我們不想作用于整個單詞，只想匹配on或者Ca，可以使用分組實(shí)現(xiàn)Byr(on|Ca)sper，這時匹配的就是Byronsper或者ByrCasper。
'ByronsperByrCasper'.replace(/Byr(on|Ca)sper/g, 'X'); // "XX"
9.3 反向引用
需求：
2015-12-25 => 12/25/2015
'2015-12-25'.replace(/(\d{4})-(\d{2})-(\d{2})/g, '$2/$3/$1'); // "12/25/2015"
上面的$1，$2，$3就是捕獲的分組里面的內(nèi)容
9.4 忽略分組
不希望捕獲某些分組，只需要在分組內(nèi)加上?:就可以了
'2015-12-25'.replace(/(?:\d{4})-(\d{2})-(\d{2})/g, '$1/$2/$3'); // "12/25/$3"
10、前瞻 —— 只是作為斷言，并不會包含在匹配規(guī)則里面
- 正則表達(dá)式從文本頭部向尾部開始解析，文本尾部方向，稱為“前”
-
前瞻就是在正則表達(dá)式匹配到規(guī)則的時候，向前檢查是否符合斷言，后顧/后瞻方向相反 - JavaScript不支持后顧
- 符合特定斷言稱為
肯定/正向匹配，不符合特定斷言稱為否定/負(fù)向匹配 - 語法：
a. 正向前瞻：exp(?=assert)
'a2*344v'.replace(/\w(?=\d)/g, 'X'); // "X2*XX4v"
b. 負(fù)向前瞻：exp(?!assert)
'a2*344v'.replace(/\w(?!\d)/g, 'X'); // "aX*34XX"
c. 正向后顧：exp(?<=assert) —— js不支持
d. 負(fù)向后顧：exp(?<!assert) —— js不支持
11、JS對象屬性
-
global：是否支持全文搜索，默認(rèn)false -
ignore case：是否大小寫敏感，默認(rèn)是false -
multiline：多行搜索，默認(rèn)值是false -
lastIndex：是當(dāng)前表達(dá)式匹配內(nèi)容的最后一個字符的下一個位置，即下一次開始匹配的位置 -
source：正則表達(dá)式的文本字符串
var reg1 = /\w/;
reg1.global; // false
reg1.ignoreCase; // false
reg1.multiline; // false
reg1.source; // "\w"
var reg2 = /\w/gim;
reg2.global; // true
reg2.ignoreCase; // true
reg2.multiline; // true
reg2.source; // "\w"
注意：上述的屬性都是只讀的
12、正則表達(dá)式原生的 test 和 exec方法
12.1 test方法
RegExp.prototype.test(str)
- 用于測試字符串參數(shù)中是否存在匹配正則表達(dá)式模式的字符串
- 如果存在則返回
true，否則返回false
var reg1 = /\w/;
reg1.test('a'); // true
reg1.test('$'); // false
設(shè)置了g屬性后，注意：
var reg2 = /\w/g;
reg2.test('ab'); // true lastIndex為1
reg2.test('ab'); // true lastIndex為2
reg2.test('ab'); // false lastIndex被重置為0
// 往復(fù)循環(huán)
reg2.test('ab'); // true
reg2.test('ab'); // true
reg2.test('ab'); // false
這是因?yàn)?code>lastIndex屬性的影響：
while(reg2.test('ab')) {
console.log(reg2.lastIndex); // 分別打印 1 2
}
12.2 exec方法
RegExp.prototype.exec(str)
使用正則表達(dá)式模式對字符串執(zhí)行搜索，并將更新全局RegExp對象的屬性(這里就指
lastIndex屬性)以反映匹配結(jié)果（注意：只有在全局調(diào)用下才會更新lastIndex屬性）如果沒有匹配的文本則返回
null，否則返回一個結(jié)果數(shù)組，其中數(shù)組有兩個額外的屬性：
a.index屬性聲明匹配文本的第一個字符的位置
b.input屬性存放被檢索的字符串string返回的數(shù)組第一個元素是與正則表達(dá)式相匹配的文本
返回的數(shù)組第二個元素是與RegExp對象的第一個子表達(dá)式(第一個分組)相匹配的文本（如果有的話）
返回的數(shù)組第三個元素是與RegExp對象的第二個子表達(dá)式(第二個分組)相匹配的文本（如果有的話），以此類推
1）、非全局調(diào)用
var reg3 = /\d(\w)(\w)\d/;
var ts = '$1az2b3cy4d5e';
var ret = reg3.exec(ts);
// "0 1 $1az2b3cy4d5e 1az2,a,z"
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.input + '\t' + ret.toString());
// "0 1 $1az2b3cy4d5e 1az2,a,z"
console.log(reg3.lastIndex + '\t' + ret.index + '\t' + ret.input + '\t' + ret.toString());
可以看到，多次執(zhí)行時，lastIndex始終為0。因此在非全局調(diào)用下，lastIndex是不起作用的。
2）、全局調(diào)用
var reg4 = /\d(\w)(\w)\d/g;
var ts = '$1az2b3cy4d5e';
var ret = null;
while(ret = reg4.exec(ts)) {
// 第一次打印："5 1 $1az2b3cy4d5e 1az2,a,z"
// 第二次打印："10 6 $1az2b3cy4d5e 3cy4,c,y"
console.log(reg4.lastIndex + '\t' + ret.index +
'\t' + ret.input + '\t' + ret.toString());
}
可以看到，多次執(zhí)行，lastIndex會跟著變化。因此在全局調(diào)用下，lastIndex會隨著正則表達(dá)式的匹配結(jié)果進(jìn)行更新。
13、字符串對象方法
13.1 search方法
String.prototype.search(reg)
-
search()方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串 - 方法返回第一個匹配結(jié)果的
index，查找不到返回-1 -
search()方法不執(zhí)行全局匹配，它將忽略g標(biāo)志，并且總是從字符串的開始進(jìn)行檢索
'a1b2c3d1'.search('1'); // 1
'a1b2c3d1'.search('10'); // -1
/*
* 問：為什么傳入數(shù)字 1 也能匹配，明明應(yīng)該是字符串格式的 '1'
* 答：因?yàn)楫?dāng)我們傳入的第一個參數(shù)不是正則的時候，方法就會嘗試幫我們把它轉(zhuǎn)成正則
*/
'a1b2c3d1'.search(1); // 1
// 上面的語句，實(shí)際上等同于下面這句
'a1b2c3d1'.search(/1/); // 1
// 傳入g標(biāo)志，執(zhí)行多次，返回結(jié)果還是1，即g標(biāo)志不起作用
'a1b2c3d1'.search(/1/g); // 1
'a1b2c3d1'.search(/1/g); // 1
13.2 match方法
String.prototype.match(reg)
-
match()方法將檢索字符串，以找到一個或多個與正則表達(dá)式相匹配的文本 -
regexp是否具有g標(biāo)志，對結(jié)果影響很大
1）、非全局調(diào)用 —— 跟exec方法在非全局調(diào)用下的返回值是一樣的
- 如果
regexp沒有g標(biāo)志，那么match()方法就只能在字符串中執(zhí)行一次匹配 - 如果沒有找到任何匹配的文本，將返回
null - 否則它將返回一個數(shù)組，其中存放了與它找到的匹配文本有關(guān)的信息
- 返回的數(shù)組的第一個元素存放的是匹配文本，而其余的元素存放的是與正則表達(dá)式的子表達(dá)式相匹配的文本
- 除了常規(guī)的數(shù)組元素之外，返回的數(shù)組還包含有2個對象屬性
a.index屬性聲明匹配文本的第一個字符的位置
b.input屬性存放被檢索的字符串string
var reg3 = /\d(\w)\d/;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg3);
console.log(ret); // ["1a2", "a"]
console.log(ret.index + '\t' + reg3.lastIndex); // "1 0"
2）、全局調(diào)用
- 如果
regexp具有g標(biāo)志，則match()方法將執(zhí)行全局檢索，并找到字符串中所有相匹配的子字符串 - 沒有找到任何匹配的子串，則返回
null - 如果找到了一個或多個相匹配的子字符串，則返回一個數(shù)組
- 數(shù)組元素中存放的是字符串中所有相匹配的子字符串(注意：沒有存放分組信息了)，而且也沒有
index屬性或input屬性
var reg4 = /\d(\w)\d/g;
var ts = '$1a2b3c4d5e';
var ret = ts.match(reg4);
console.log(ret); // ["1a2", "3c4"]
// lastIndex信息也沒有了
console.log(ret.index + '\t' + ret.input + '\t' + reg4.lastIndex); // "undefined undefined 0"
13.3 split方法
String.prototype.split(reg)
- 我們經(jīng)常使用
split()方法把字符串分割為字符數(shù)組 —— 其實(shí)當(dāng)我們傳入的參數(shù)不是正則時，會默認(rèn)給我們轉(zhuǎn)換為正則表達(dá)式進(jìn)行匹配
'a,b,c,d'.split(','); // ["a", "b", "c", "d"]
// 等價于
'a,b,c,d'.split(/,/); // ["a", "b", "c", "d"]
- 在一些復(fù)雜的分割情況下，我們可以使用正則表達(dá)式解決
'a1b2c3d'.split(/\d/); // ["a", "b", "c", "d"]
13.4 replace方法
String.prototype.replace
1）、 String.prototype.replace(str, replaceStr)
'a1b1c1'.replace(1, 2); // "a2b1c1"
// 上述被隱式的轉(zhuǎn)為了正則表達(dá)式
'a1b1c1'.replace(/1/, 2); // "a2b1c1"
2）、String.prototype.replace(reg, replaceStr)
'a1b1c1'.replace(/1/g, 2); // "a2b2c2"
3）、String.prototype.replace(reg, function) —— 替換的內(nèi)容是函數(shù)的返回值
function會在每次有匹配結(jié)果的時候調(diào)用，有四個參數(shù)(其實(shí)參數(shù)個數(shù)是不固定的，會根據(jù)正則表達(dá)式有無分組而發(fā)生變化)：
- 匹配字符串
- 正則表達(dá)式分組內(nèi)容，沒有分組則沒有該參數(shù)，即第三個參數(shù)就變成第二個了(因此，需要我們根據(jù)不同的正則表達(dá)式寫不同的參數(shù)個數(shù))
- 匹配項(xiàng)在字符串中的
index - 原字符串
沒有分組時：
var result = 'a1b2c3d4e5'.replace(/\d/g, function(match, index, origin) {
console.log(index); // 分別打印 1 3 5 7 9
return parseInt(match) + 1;
});
console.log(result); // "a2b3c4d5e6"
有分組時：
var result = 'a1b2c3d4e5'.replace(/(\d)(\w)(\d)/g, function(match, group1, group2, group3, index, origin) {
console.log(match); // 分別打印 "1b2" "3d4"
return group1 + group3;
});
console.log(result); // "a12c34e5"
