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

文章同步到github

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

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

http://www.regexper.com

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

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

var reg = /pattern/flag;

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

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

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

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

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

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

因為這些字符在正則表達式中具有特殊含義,所以如果要想在字符串中匹配這些字符,就必須對它們進行轉(zhuǎn)義.

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

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

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

var reg = /[ab]c/g;

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

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

我們可以使用[]來構(gòu)建一個簡單的類[xyz],類指符合某些特性的對象,是一個泛指,并不是指某個字符,表示匹配方括號的中任意字符,對于點（.）和星號（*）這樣的特殊符號在一個字符集中沒有特殊的意義。他們不必進行轉(zhuǎn)義，不過轉(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

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

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

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

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

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

正則還提供了邊界匹配符

// ^的應(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");
// 因為即使字符串看上去換行,本質(zhì)上還是一些換行符,只有結(jié)尾和結(jié)束
console.log(res);  //  Xbc
                       @123
                       @XYZ

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

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

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

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

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

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

量詞不作用于緊挨著的某個字符,使用/(x)/匹配 "x",并且記住匹配項,括號被稱為補貨括號

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");

此時$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)建正則對象,再來看一下source屬性

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

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

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

語法

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)正則表達式使用全局模式時,lastIndex屬性會影響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

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

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

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

語法

regexObj.exec(str)

返回值:

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

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

返回數(shù)組內(nèi)容包括:

第一個元素是與正則表達式相匹配的文本

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

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

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í)行正則表達式和 String對象之間的一個搜索匹配,如果匹配成功,返回正則表達式在字符串中首次匹配項的索引,否則返回-1。

語法:

str.search(regexp)

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

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

str.match(regexp);

返回值:

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

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

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

如果找到了一個或多個匹配的字符串,則返回一個數(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() 方法使用指定的分隔符字符串將一個String對象分割成字符串?dāng)?shù)組

語法:

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

當(dāng)separator為字符串時,其實也是默認(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 包含捕獲括號（capturing parentheses），則其匹配結(jié)果將會包含在返回的數(shù)組中。

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

限制返回值中分割元素數(shù)量

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

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

注意: 原字符串不會改變。

語法:

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會在每次匹配替換的時候調(diào)用,包含四個可選參數(shù)

匹配到的字符串

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

匹配項在字符串中的index

原字符串

例子:

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

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

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

var str = "a1b2c3d4e";
var resStr = str.replace(/(d)(w)(d)/g, function(matchStr, group1, group2, group3, index, originStr) {
    // 會執(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é)的正則表達式相關(guān)知識, 感覺把正則搞清楚還是很爽滴, 如發(fā)現(xiàn)有問題請多多指教。