正則表達式是一個精巧的利器，經(jīng)常用來在字符串中查找和替換，JavaScript語言參照Perl，也提供了正則表達式相關(guān)模塊，開發(fā)當(dāng)中非常實用，在一些類庫或是框架中，比如jQuery，就存在大量的正則表達式，所以說學(xué)好正則表達式，是提高開發(fā)技能的一項基本要求。那么今天博主就來詳細(xì)總結(jié)一下正則表達式的相關(guān)知識，希望不熟悉的同學(xué)們，也能夠掌握正則表達式的原理及應(yīng)用。

在JS中，創(chuàng)建正則表達式有兩種方式，一種是字面量方式，一種是構(gòu)造器方式，如下所示：

var regex = /\w+/;

// 或者

var regex = new RegExp('\\w+');

大家也許注意到，使用字面量要比構(gòu)造器簡潔得多，\w表示一個word，匹配單個字母、數(shù)字或下劃線，而使用RegExp構(gòu)造器時，我們的正則變?yōu)榱?\\w"，這是因為要在字符串中表示一個反斜杠\，我們需要對其轉(zhuǎn)義，也就是在前面再加一個轉(zhuǎn)義字符\。相信大家都知道，要在字面量正則中表達一個匹配反斜杠\的正則，只需寫成\\這樣，但在字符串中表達這個正則，則是"\\\\"這個樣子的，這是因為字符串中前兩個表示一個反斜杠\，后兩個也表示一個反斜杠\，最終在正則層面，結(jié)果還是\\。

對于上面兩種創(chuàng)建形式，都可以加上一些后綴修飾符，這些修飾符可以單個使用，也可以組合起來使用：

從英文注釋來看，相信大家都大概都略知一二了，需要注意的是u和y修飾符，它們是ES6新增的特性，u表示啟用Unicode模式，對于匹配中文特別有用，而y是sticky，表示“粘連”，跟g很相似，都屬于全局匹配，但它們也有不同之處，這個我們后面會介紹。

正則相關(guān)方法

有了正則表達式對象了，如何使用呢？JS中的正則和字符串在原型中均提供相應(yīng)的方法，先來看看正則原型中的兩個方法：

RegExp.prototype.test(str);
RegExp.prototype.exec(str);

上面的test()和exec()方法都需傳入一個字符串，對這個字符串進行搜索和匹配，不同的是，test()方法會返回true或false，表示字符串和正則是否匹配，而exec()方法在匹配時返回一個匹配結(jié)果數(shù)組，如果不匹配，則只返回一個null值，下面來看看兩者的差異：

// RegExp#test()

var regex = /hello/;
var result = regex.test('hello world');  // true

// RegExp#exec()

var regex = /hello/;
var result = regex.exec('hello world');  // ['hello']

對于exec()方法，如果正則中含有捕獲組，匹配后則會出現(xiàn)在結(jié)果數(shù)組中：

// (llo)是一個捕獲組

var regex = /he(llo)/;
var result = regex.exec('hello world');  // ['hello', 'llo']

開發(fā)當(dāng)中，test()方法一般用于用戶輸入驗證，比如郵箱驗證，手機號驗證等等，而exec()方法一般用于從特定內(nèi)容中獲取有價值的信息，比如從用戶郵箱輸入中獲取其ID和郵箱類型，從手機號中獲取此號碼的歸屬地等等。

字符串相關(guān)方法

上面是正則原型中的兩個方法，現(xiàn)在來看看字符串原型中都提供了哪些可用的方法：

String.prototype.search(regexp);
String.prototype.match(regexp);
String.prototype.split([separator[, limit]]);
String.prototype.replace(regexp|substr, newSubStr|function);

先來說說String#search()方法，它會根據(jù)正則參數(shù)對字符串進行匹配搜索，如果匹配成功，就返回第一次匹配處的索引，如果匹配失敗，則返回-1。

// String#search()

'hello world'.search(/hello/);  // 0

'hello world'.search(/hi/);    // -1

String#match()方法跟RegExp#exec()方法相似，會返回結(jié)果數(shù)組，所不同的是，如果String#match()的正則參數(shù)中含有全局標(biāo)記g，則結(jié)果中會只出現(xiàn)匹配的子串，而忽略捕獲組，這一點與RegExp#exec()有些出入。且看下面代碼：

// String#match()

'hello hello'.match(/he(llo)/);   // ['hello', 'llo']

// String#match()遇到全局g修飾符時會舍棄捕獲組

'hello hello'.match(/he(llo)/g);  // ['hello', 'hello']

// RegExp#exec()仍舊包含捕獲組

/he(llo)/g.exec('hello hello');   // ['hello', 'llo']

所以，如果需要總是將捕獲組作為結(jié)果返回，應(yīng)該使用RegExp#exec()方法，而不是String#match()方法。

接下來說說String#split()方法，這個方法用于將字符串分割，然后返回一個包含其子串的數(shù)組結(jié)果，其中separator和limit參數(shù)都是可選的，separator可指定為字符串或正則，limit指定返回結(jié)果個數(shù)的最大限制。如果separator省略，該方法的數(shù)組結(jié)果中僅包含自身源字符串；如果sparator指定一個空字符串，則源字符串將被以字符為單位進行分割；如果separator是非空字符串或正則表達式，則該方法會以此參數(shù)為單位對源字符串進行分割處理。下面代碼演示了該方法的使用：

// String#split()

'hello'.split();         // ["hello"]
'hello'.split('');        // ["h", "e", "l", "l", "o"]
'hello'.split('', 3);       // ["h", "e", "l"]

// 指定一個非空字符串

var source = 'hello world';
var result = source.split(' ');  // ["hello", "world"]

// 或者使用正則表達式

var result = source.split(/\s/); // ["hello", "world"]
如果separtor是一個正則表達式，并且正則中包含捕獲組，則捕獲組也會出現(xiàn)在結(jié)果數(shù)組中：
// String#split() 正則捕獲組

var source = 'matchandsplit';

var result = source.split('and');   // ["match", "split"]

var result = source.split(/and/);   // ["match", "split"]

// 正則中含捕獲組

var result = source.split(/(and)/);  // ["match", "and", "split"]

最后來介紹一下String#replace()方法，它會同時執(zhí)行查找和替換兩個操作。

從上面的函數(shù)簽名來看，該方法會接受兩個參數(shù)：第一個參數(shù)可以是一個正則表達式，也可以是一個字符串，它們都表示將要匹配的子串；第二個參數(shù)可以指定一個字符串或是一個函數(shù)，如果指定一個字符串，表示這個字符串將會替換掉已匹配到的子串，如果指定一個函數(shù)，則函數(shù)的返回值會替換掉已匹配的子串。

String#replace()方法最終會返回一個新的已經(jīng)過替換的字符串。下面分別演示了replace方法的使用：

// String#replace()

var source = 'matchandsplitandreplace';

var result = source.replace('and', '-'); // "match-splitandreplace"

// 或者

var result = source.replace(/and/, function() {
 return '-';
});                    // "match-splitandreplace"

從上面的代碼中可以看到，'and'被替換成了'-'，但我們同時也注意到，只有第一個'and'被替換了，后面的并沒有被處理。這里我們就需要了解，String#replace()方法只對第一次出現(xiàn)的匹配串進行替換，如果我們需要全局替換，需要將第一個參數(shù)指定為正則表達式，并追加全局g修飾符，就像下面這樣：

// String#replace() 全局替換

var source = 'matchandsplitandreplace';

var result = source.replace(/and/g, '-'); // "match-split-replace"

var result = source.replace(/and/g, function() {
 return '-';
});                    // "match-split-replace"

初學(xué)者看到上面的代碼，可能會覺得疑惑，對于第二個參數(shù)，直接指定一個字符串也挺簡單的嘛，我們?yōu)楹我褂靡粋€函數(shù)然后再返回一個值呢。我們看看下面的例子就知道了：

// String#replace() 替換函數(shù)的參數(shù)列表

var source = 'matchandsplitandreplace';

var result = source.replace(/(a(nd))/g, function(match, p1, p2, offset, string) {
 
 console.group('match:');
 console.log(match, p1, p2, offset, string);
 console.groupEnd();

 return '-';
});                    // "match-split-replace"

上面代碼中，第一個參數(shù)是正則表達式，其中包含了兩個捕獲組(and)和(nd)，第二個參數(shù)指定一個匿名函數(shù)，其函數(shù)列表中有一些參數(shù)：match, p1, p2, offset, string，分別對應(yīng)匹配到的子串、第一個捕獲組、第二個捕獲組、匹配子串在源字符串中的索引、源字符串，我們可以稱這個匿名函數(shù)為“replacer”或“替換函數(shù)”，在替換函數(shù)的參數(shù)列表中，match、offset和string在每一次匹配時總是存在的，而中間的p1、p2等捕獲組，String#replace()方法會根據(jù)實際匹配情況去填充，當(dāng)然，我們還可以根據(jù)arguments獲取到這些參數(shù)值。

下面是代碼運行后的控制臺打印結(jié)果：

現(xiàn)在來看，指定一個函數(shù)要比指定一個字符串功能強的多，每次匹配都能獲取到這些有用的信息，我們可以對其進行一些操作處理，最后再返回一個值，作為要替換的新子串。所以推薦在調(diào)用String#replace()方法時，使用上面這種方式。

上面是String類與正則相關(guān)的常用方法，需要注意的是，String#search()和String#match()方法簽名中參數(shù)均為正則對象，如果我們傳遞了其他類型的參數(shù)，會被隱式轉(zhuǎn)換為正則對象，具體的步驟是先調(diào)用參數(shù)值的toString()方法得到字符串類型的值，然后調(diào)用new RegExp(val)得到正則對象：

// -> String#search(new RegExp(val.toString()))

'123 123'.search(1);    // 0
'true false'.search(true); // 0

'123 123'.search('\\s');  // 3

var o = {
 toString: function() {
  return '\\s';
 }
};
'123 123'.search(o);    // 3

// -> String#match(new RegExp(val.toString()))

'123 123'.match(1);     // ["1"]
'true false'.match(true);  // ["true"]

'123 123'.match('\\s');   // [" "]

var o = {
 toString: function() {
  return '1(23)';
 }
};
'123 123'.match(o);     // "123", "23"]

而split()和replace()方法不會將字符串轉(zhuǎn)為正則表達式對象，對于其他類型值，只會調(diào)用其toString()方法將參數(shù)值轉(zhuǎn)為字符串，也不會進一步向正則轉(zhuǎn)換，大家可以親自測試一下。

以上就是正則的相關(guān)基本知識及常用方法，限于篇幅原因，更多關(guān)于正則表達式的內(nèi)容，博主會安排在下一篇中介紹和講解，敬請期待。