摘要：是否有標(biāo)志對(duì)返回值有很大影響。參數(shù)限制返回值中分割元素?cái)?shù)量方法返回一個(gè)由替換值替換一些或所有匹配的模式后的新字符串。

文章同步到github

正則在平時(shí)工作中用的非常多, 最開始接觸正則的時(shí)候感覺這個(gè)東東好難記啊,最近把正則的內(nèi)容整理了一下,寫成以下文章。

先給大家介紹一個(gè)在線解析正則的網(wǎng)站,來(lái)幫助我們理解正則,特別是復(fù)雜的正則表達(dá)式,非常好用

http://www.regexper.com

比如/^@[a-zA-Z]d+@$/,解析之后圖形幫助理解如下:

正則表達(dá)式是用于匹配字符串中字符組合的模式。主要應(yīng)用于正則對(duì)象的test和esec方法,以及字符串的search、split、match、replace中。

var reg = /pattern/flag;

每個(gè)正則表達(dá)式都可以帶有一個(gè)或多個(gè)(也可以不帶)表明正則表達(dá)式行為的標(biāo)志

在js中提供了一個(gè)內(nèi)置構(gòu)造函數(shù)RegExp來(lái)創(chuàng)建一個(gè)正則對(duì)象

var reg =  new RegExp(pattern [, flags]);

var reg = /[ab]c/g;
// 等價(jià)于
var reg = new RegExp("[ab]c", "g");

元字符是在正則表達(dá)式中有特殊含義的非字母字符,js中正則表達(dá)式元字符包括:

? + * ^ $ . | ( ) [ ] { }

因?yàn)檫@些字符在正則表達(dá)式中具有特殊含義,所以如果要想在字符串中匹配這些字符,就必須對(duì)它們進(jìn)行轉(zhuǎn)義.

// 匹配字符串中的ac或者bc
var reg = /[ab]c/;

// 如果要匹配字符串的"[ab]c", 需要對(duì)[]進(jìn)行轉(zhuǎn)義
var reg = /[ab]c/;

注意:
另外需要注意的是,由于使用構(gòu)造函數(shù)創(chuàng)建正則,pattern參數(shù)必須為字符串,所有元字符如果需要在字符串中匹配這個(gè)字符,需要進(jìn)行雙重轉(zhuǎn)義

var reg = /[ab]c/g;

如果使用構(gòu)造函數(shù)創(chuàng)建正則表達(dá)式,應(yīng)該寫成:

var reg = new RegExp("[ab]c", "g");

我們可以使用[]來(lái)構(gòu)建一個(gè)簡(jiǎn)單的類[xyz],類指符合某些特性的對(duì)象,是一個(gè)泛指,并不是指某個(gè)字符,表示匹配方括號(hào)的中任意字符,對(duì)于點(diǎn)（.）和星號(hào)（*）這樣的特殊符號(hào)在一個(gè)字符集中沒有特殊的意義。他們不必進(jìn)行轉(zhuǎn)義，不過(guò)轉(zhuǎn)義也是起作用的。

var reg = /[abc]/g;
var reg2 = /[abc.]/g;  // 字符集合中的.
var reg3 = /[abc.]/g;  // 字符集合中轉(zhuǎn)義的.

var str = "a1b2c3";
var str2 = "a1b2c3d.";

var res = str.replace(reg, "X");
var res2 = str2.replace(reg2, "X");
var res3 = str3.replace(reg3, "X");

console.log(res);  //  X1X2X3
console.log(res2);  //  X1X2X3dX
console.log(res3);  //  X1X2X3dX

var reg = /[^abc]/g;
var str = "abcdefg";
var res = str.replace(reg, "X");
console.log(res);  //  abcXXXX

在字符集合中可以使用(-)來(lái)指定一個(gè)字符范圍, 如[a-z],表示匹配從a到z的任意字符

var reg = /[a-z]/g;
var str = "a1b2c3d4e5F6";
var res = str.replace(reg, "X");
console.log(res); //  X1X2X3X4X5F6

在范圍類[]中可以連寫,如同時(shí)匹配大小寫,[a-zA-Z]

var reg = /[a-zA-Z]/g;
var str = "a1b2c3d4e5F6";
var res = str.replace(reg, "X");
console.log(res); //  X1X2X3X4X5X6

正則表達(dá)式提供了預(yù)定義類,來(lái)匹配常見的字符類,不需要都通過(guò)字符集合去定義正則表達(dá)式

正則還提供了邊界匹配符

// ^的應(yīng)用
var reg = /^@./g
var str = "@123abc@";
var res = str.replace(reg, "X");
console.log(res);  // X23abc

// $的應(yīng)用
var reg2 = /^.@$/g;
var str2 = "@123abc@";
var res2 = str2.replace(reg2, "X");
console.log(res2);  // 123abX

// 的應(yīng)用
var reg3 = /is/g;
var str3 = "this is javaScript";
var res3 = str3.replace(reg3, "X");
console.log(res3); // this X javaScript

var reg = /^@./g;
var str = `@abc
@123
@XYZ
`
var res = str.replace(reg, "X");
// 因?yàn)榧词棺址瓷先Q行,本質(zhì)上還是一些換行符,只有結(jié)尾和結(jié)束
console.log(res);  //  Xbc
                       @123
                       @XYZ

當(dāng)正則表達(dá)式使用m標(biāo)志的時(shí)候,在一行文本末尾結(jié)束的時(shí)候,還會(huì)去匹配下一行是否存在與模式匹配的項(xiàng),例子如下:

var reg = /^@./gm;
var str = `@abc
@123
@XYZ
`
var res = str.replace(reg, "X");
console.log(res);  //  Xbc
                       X23
                       XYZ

貪婪模式是讓正則表達(dá)式盡可能多的匹配

var reg = /d{2,5}/;
var str = "12345678";
var res = str.replace(reg, "X");
console.log(res); // X678

非貪婪模式是讓正則表達(dá)式盡可能少的匹配,一旦匹配成功不在繼續(xù)匹配,做法是在量詞后面加上?即可

var reg = /d{2,5}?/
var str = "12345678";
var res = str.replace(reg, "X");
console.log(res);  // X345678   

量詞不作用于緊挨著的某個(gè)字符,使用/(x)/匹配 "x",并且記住匹配項(xiàng),括號(hào)被稱為補(bǔ)貨括號(hào)

var reg = /([a-zA-Z]d)/g;
var str = "a1bbc3D4efg";
var res = str.replace(reg, "X");
console.log(res);  // XbbXXefg

使用在線解析正則工具如下圖:

另外可以添加量詞

var reg = /(abc){3}/g;
var str = "abcabcabcabc";
var res = str.replace(reg, "X");
console.log(res);  // Xabc

var reg = /apple|pear/g
var str = "appleappleHpearpear";
var res = str.replace(reg, "X");
console.log(res);  // XXHXX

var reg2 = /appl(e|p)ear/g;
var str2 = "appleearHapplpear"
var res2 = str2.replace(reg2, "X");
console.log(res2);  // XHX

在線解析上面代碼的reg和reg2如下:
reg:

reg2:

在replace替換環(huán)節(jié),可以使用$1、$2、$3...$n等捕獲分匹配到的分組

比如想把"25/12/2016"轉(zhuǎn)換成"2016-12-25":

var reg = /(d{2})/(d{2})/(d{4})/;
var str = "25/12/2016";
var res = str.replace(reg, "$3-$2-$1");
console.log(res);  // 2016-12-25

如果不希望捕獲分組,只需要在分組內(nèi)加上(?:)就可以

var reg = /(?:d{2})/(d{2})/(d{4})/;
var str = "25/12/2016";
var res = str.replace(reg, "$3-$2-$1");

此時(shí)$2為2016,$1為12,而$3捕獲不到,按普通字符串顯示
console.log(res);  // $3-2016-12

x(?=y)
匹配x,并且x后必須跟著y,這就是正向肯定查找

var reg = /w(?=d)/g;
var str = "a1b2ccd4";
var res = str.replace(reg, "X");
console.log(res); // X1X2ccX4

匹配x,并且x后必須不跟著y,這就是正向否定查找

var reg = /[a-z](?!d)/g;
var str = "a1b2ccd4";
var res = str.replace(reg, "X");
console.log(res); // a1b2XXd4

屬性皆為只讀,不可修改

var reg = /[abc]/;
console.log(reg.ignoreCase) // false;
console.log(reg.global) // false;
console.log(reg.multiline) // false;

reg.ignoreCase = true;
reg.global = true;
reg.multiline = true;

console.log(reg.ignoreCase) // false;
console.log(reg.global) // false;
console.log(reg.multiline) // false;

還是以上代碼看一下source屬性

console.log(reg.source) //  [abc]

如果使用構(gòu)造函數(shù)創(chuàng)建正則對(duì)象,再來(lái)看一下source屬性

var reg = new RegExp("[abc]");  //需要對(duì)元字符進(jìn)行雙重轉(zhuǎn)義
console.log(reg.source);   // [abc]

通過(guò)以上對(duì)比可知,source屬性是字面量形式創(chuàng)建正則對(duì)象所有的字符串

test() 方法執(zhí)行一個(gè)檢索，用來(lái)查看正則表達(dá)式與指定的字符串是否匹配。匹配到返回 true,否則返回false。

語(yǔ)法

regexObj.test(str)

var reg = /w/;
var str = "ab";
console.log(reg.test(str));  // true
console.log(reg.test(str));  // true
console.log(reg.test(str));  // true

注意
當(dāng)正則表達(dá)式使用全局模式時(shí),lastIndex屬性會(huì)影響test()方法的返回值,看下面例子

var reg = /w/g;
var str = "ab";
console.log(reg.test(str));  // true
console.log(reg.test(str));  // true
console.log(reg.test(str));  // false
console.log(reg.test(str));  // true

為什么會(huì)出現(xiàn)這種現(xiàn)象呢,是因?yàn)檎齽t表達(dá)式執(zhí)行test方法時(shí),每次都會(huì)把結(jié)果作用到操作的正則實(shí)例上,由于是全局匹配,第一次匹配到之后reg的lastIndex屬性為1,繼續(xù)匹配,此時(shí)從lastIndex的位置開始匹配,即從b開始,結(jié)果又匹配到,此時(shí)lastIndex屬性為2，當(dāng)繼續(xù)匹配時(shí),從2開始匹配,沒有匹配到,此時(shí)返回false,lastIndex被重置為0,所以第4次執(zhí)行console.log(reg.test(str))就會(huì)從新從0開始,所以返回值為true。結(jié)合while循環(huán)來(lái)說(shuō)明一下:

var reg = /w/g;
var str = "ab";
while(reg.test(str)){
    console.log(reg.lastIndex);  // 循環(huán)執(zhí)行兩次,分別打印出1, 2
}

exec() 方法在一個(gè)指定字符串中執(zhí)行一個(gè)搜索匹配.

語(yǔ)法

regexObj.exec(str)

返回值:

1.如果匹配失敗，返回 null。
2.如果匹配成功，exec() 方法返回一個(gè)數(shù)組，并更新正則表達(dá)式對(duì)象的屬性,一般來(lái)說(shuō)主要是lastIndex屬性值的更新。返回的數(shù)組將完全匹配成功的文本作為第一項(xiàng)，將正則括號(hào)里匹配成功的作為數(shù)組填充到后面,返回值雖然是Array實(shí)例,但是包含了index和input屬性

index: 表示匹配項(xiàng)在字符串中的位置,也就是匹配項(xiàng)第一個(gè)字符的位置
input: 表示應(yīng)用正則表達(dá)式的字符串

返回?cái)?shù)組內(nèi)容包括:

第一個(gè)元素是與正則表達(dá)式相匹配的文本

第二個(gè)元素是與正則對(duì)象第一個(gè)子表達(dá)式相匹配的文本,也就是第一個(gè)分組(如果有的話)

第三個(gè)元素是與正則對(duì)象第二個(gè)子表達(dá)式相匹配的文本,也就是第而個(gè)分組(如果有的話),以此類推

var reg = /d(w)(w)d/;
var str = "@1bb2c3dd4f";
var res = reg.exec(str);
console.log(reg.lastIndex);  // 0  非全局模式忽略lastIndex屬性
console.log(res.index);  // 1
console.log(res.input);  // @1ab2c3dd4f
console.log(res);  // ["1ab2", "a", "b"]

var reg = /d(w)(w)d/g;
var str = "@1bb2c3dd4f";
var res = reg.exec(str);
console.log(reg.lastIndex);  // 5  非全局模式忽略lastIndex屬性
console.log(res.index);  // 1
console.log(res.input);  // @1ab2c3dd4f
console.log(res);  // ["1ab2", "a", "b"]
console.log(reg.lastIndex); 

使用while循環(huán)加深一下理解

var reg = /d(w)(w)d/g;
var str = "@1bb2c3dd4f";
while(reg.exec(str)) {
    console.log(reg.lastIndex, res.index, res);
    // 打印兩次結(jié)果分別為
    // 5, 1, ["1bb2", "b", "b"]
    // 10, 6, ["3dd4", "d", "d"]
}

方法執(zhí)行正則表達(dá)式和 String對(duì)象之間的一個(gè)搜索匹配,如果匹配成功,返回正則表達(dá)式在字符串中首次匹配項(xiàng)的索引,否則返回-1。

語(yǔ)法:

str.search(regexp)

如果傳入一個(gè)非正則表達(dá)式對(duì)象，則會(huì)使用 new RegExp(obj) 隱式地將其轉(zhuǎn)換為正則表達(dá)式對(duì)象。

用于搜索字符串,找到一個(gè)或多個(gè)與regexp匹配的文本
語(yǔ)法:

str.match(regexp);

返回值:

一個(gè)包含了整個(gè)匹配結(jié)果以及任何括號(hào)捕獲的匹配結(jié)果的 Array ；如果沒有匹配項(xiàng)，則返回 null。regexp是否有g(shù)標(biāo)志對(duì)返回值有很大影響。

返回值和RegExp.prototype.exec()方法一樣,就不細(xì)說(shuō)了。

沒有找到任何匹配的字符串,返回null

如果找到了一個(gè)或多個(gè)匹配的字符串,則返回一個(gè)數(shù)組,存放字符串中所有匹配的字符串,不包含捕獲內(nèi)容,也不具有index和input屬性。

var reg = /d(w)d/g;
var str = "1a2b3c4d";
var res = str.match(reg);
console.log(res);  // ["1a2", "3c4"]
console.log(res.index);  // undefined
console.log(res.input);  // undefined

split() 方法使用指定的分隔符字符串將一個(gè)String對(duì)象分割成字符串?dāng)?shù)組

語(yǔ)法:

str.split([separator[, limit]]);

當(dāng)separator為字符串時(shí),其實(shí)也是默認(rèn)轉(zhuǎn)成正則去執(zhí)行

var str = "a, b, c, d";
var arr = str.split(",");
var arr2 = str.split(/,/);
console.log(arr);  // ["a", " b", " c", " d"]
console.log(arr2);  // ["a", " b", " c", " d"]

如果 separator 包含捕獲括號(hào)（capturing parentheses），則其匹配結(jié)果將會(huì)包含在返回的數(shù)組中。

var str = "a1b2c3d";
var arr = str.split(/(d)/);
console.log(arr); // ["a", "1", "b", "2", "c", "3", "d"]

限制返回值中分割元素?cái)?shù)量

var str = "a b c d e";
var arr = str.split(" ", 3);
console.log(arr); //  ["a", "b", "c"]

replace() 方法返回一個(gè)由替換值替換一些或所有匹配的模式后的新字符串。模式可以是一個(gè)字符串或者一個(gè)正則表達(dá)式, 替換值可以是一個(gè)字符串或者一個(gè)每次匹配都要調(diào)用的函數(shù)。

注意: 原字符串不會(huì)改變。

語(yǔ)法:

str.replace(regexp|substr, newSubStr|function)

var str = "a1b2c3d";
var resStr = str.replace("1", "X");
console.log(resStr); //  

var str = "a1b2c3d";
var resStr = str.replace(/d/g, "X");
console.log(resStr); //  aXbXcXd

function會(huì)在每次匹配替換的時(shí)候調(diào)用,包含四個(gè)可選參數(shù)

匹配到的字符串

正則表達(dá)式分組內(nèi)容,沒有分組就沒有該參數(shù)

匹配項(xiàng)在字符串中的index

原字符串

例子:

比如要把"a1b2c3"替換后的結(jié)果為"a2b3c4"

var str = "a1b2c3";
var resStr = str.replace(/d/g, function(matchStr, index, originStr) {
    // 此時(shí)正則表達(dá)式中無(wú)捕獲,function中則無(wú)分組參數(shù)
    return parseInt(matchStr) + 1;
});
console.log(resStr); // a2b3c4

當(dāng)正則表達(dá)式中有捕獲時(shí),再看一下另外一個(gè)例子:

var str = "a1b2c3d4e";
var resStr = str.replace(/(d)(w)(d)/g, function(matchStr, group1, group2, group3, index, originStr) {
    // 會(huì)執(zhí)行兩次回調(diào),打印結(jié)果分別如下
    console.log(matchStr)  // 1b2   3d4
    console.log(group1);   // 1     3
    console.log(group2);   // b     d
    console.log(group3);   // 2     4
    return group1 + group3; //把匹配到的文本替換成group1 + group3字符串拼接后的值
});
// 把匹配到的1b2替換成group1 + group3(12), 3d4替換成(34)
console.log(resStr); // a12c34e  把匹配到的1b2替換成group1 + group3(12)

以上就是我總結(jié)的正則表達(dá)式相關(guān)知識(shí), 感覺把正則搞清楚還是很爽滴, 如發(fā)現(xiàn)有問(wèn)題請(qǐng)多多指教。