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

文章同步到github

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

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

http://www.regexper.com

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

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

var reg = /pattern/flag;

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

在js中提供了一個內置構造函數RegExp來創建一個正則對象

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

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

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

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

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

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

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

注意:
另外需要注意的是,由于使用構造函數創建正則,pattern參數必須為字符串,所有元字符如果需要在字符串中匹配這個字符,需要進行雙重轉義

var reg = /[ab]c/g;

如果使用構造函數創建正則表達式,應該寫成:

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

我們可以使用[]來構建一個簡單的類[xyz],類指符合某些特性的對象,是一個泛指,并不是指某個字符,表示匹配方括號的中任意字符,對于點（.）和星號（*）這樣的特殊符號在一個字符集中沒有特殊的意義。他們不必進行轉義，不過轉義也是起作用的。

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

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

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

正則還提供了邊界匹配符

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

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

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

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

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

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

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替換環節,可以使用$1、$2、$3...$n等捕獲分匹配到的分組

比如想把"25/12/2016"轉換成"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

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

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]

如果使用構造函數創建正則對象,再來看一下source屬性

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

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

test() 方法執行一個檢索，用來查看正則表達式與指定的字符串是否匹配。匹配到返回 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

注意
當正則表達式使用全局模式時,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

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

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

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

語法

regexObj.exec(str)

返回值:

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

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

返回數組內容包括:

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

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

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

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循環加深一下理解

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

方法執行正則表達式和 String對象之間的一個搜索匹配,如果匹配成功,返回正則表達式在字符串中首次匹配項的索引,否則返回-1。

語法:

str.search(regexp)

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

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

str.match(regexp);

返回值:

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

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

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

如果找到了一個或多個匹配的字符串,則返回一個數組,存放字符串中所有匹配的字符串,不包含捕獲內容,也不具有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對象分割成字符串數組

語法:

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

當separator為字符串時,其實也是默認轉成正則去執行

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），則其匹配結果將會包含在返回的數組中。

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

限制返回值中分割元素數量

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

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

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

語法:

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

匹配到的字符串

正則表達式分組內容,沒有分組就沒有該參數

匹配項在字符串中的index

原字符串

例子:

比如要把"a1b2c3"替換后的結果為"a2b3c4"

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

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

var str = "a1b2c3d4e";
var resStr = str.replace(/(d)(w)(d)/g, function(matchStr, group1, group2, group3, index, originStr) {
    // 會執行兩次回調,打印結果分別如下
    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)

以上就是我總結的正則表達式相關知識, 感覺把正則搞清楚還是很爽滴, 如發現有問題請多多指教。