正則表達式歸納總結

正則表達式

1. 使用正則

創建正則表達式有兩種方式，一種是以字面量方式創建，另一種是使用RegExp構造函數來創建。

var expression = / pattern / flags;
var expression = new RegExp( pattern / flags );
var expression = new RegExp( patternStr, flags );

// example
var regexp = /regexp/g;
var regexp = new RegExp('regexp', 'g');
var regexp = new RegExp(/regexp/g);

其中模式(pattern)部分可以是任何簡單或複雜的正則表達式，可以包含字符類、限定符、分組、向前查找以及反向引用。
每個正則表達式都可帶有以或多個標誌(flags)，用以表明正則表達式的行爲。

注：flag爲可選項，表示匹配模式，主要有一下3種標誌。

g : 表示全局(global)模式，即模式將被應用於所有字符串，而非在發現第一個匹配項時立即停止；
i : 表示不區分大小寫(case-insensitive)模式，即在確定匹配項時忽略模式與字符串的大小寫;
m : 表示多行(multiline)模式，即在到達一行文本末尾時還會繼續查找下一行中是否存在與模式匹配的項。

// global
var str = 'hello world, hello life',
    reg1 = /hello/,
    reg2 = /hello/g;

// 非全局模式下，返回一個數組
// 第一個參數表示匹配的字符串
// index表示的是匹配字符串在文本中的起始位置
// input表示引用的文本
str.match(reg1); // [ 'hello', index: 0, input: 'hello world, hello life' ]

// 全局模式下的匹配返回所有匹配的值
str.match(reg2); // [ 'hello', 'hello' ]

// case-insensitive
var cStr = 'Hello world',
    cReg1 = /hello/,
    cReg2 = /hello/i;

cReg1.exec(cStr);   // null
cReg2.exec(cStr);   // [ 'Hello', index: 0, input: 'Hello world' ]

// multiline
var mStr = 'hello world\n hello life',
    mReg1 = /world$/,
    mReg2 = /world$/m;

// 結果爲null，因爲沒有啓用多行，world並不算mStr的結尾
mStr.match(mReg1);  // null
// 匹配成功，啓用多行之後，world變成第一行的結尾
mStr.match(mReg2);  // [ 'world', index: 6, input: 'hello world\n hello life' ]

1.1 RegExp 實例屬性

每個RegExp實例對象都會存在下列屬性：

global : 布爾值，表示是否設置了g標誌
ignoreCase : 布爾值，表示是否設置了i標誌
multiline : 布爾值，表示是否設置了m標誌
lastIndex : 整數，表示開始搜索下一個匹配項的字符位置，從0算起
source : 正則表達式字符串表示，按照字面量形式而非傳入構造函數中的字符串模式返回

var reg = /\[hello\] regexp/i;

reg.global;         // false
reg.ignoreCase;     // true
reg.multiline;      // false
reg.lastIndex;      // 0
reg.source;         // \[hello\] regexp

var reg2 = new RegExp('\\[hello\\] regexp', 'ig');

reg2.global;        // true
reg2.ignoreCase;    // true
reg2.multiline;     // false
reg2.lastIndex;     // 0
reg2.source;        // \[hello\] regexp 字面量形式返回

1.2 RegExp 實例方法

pattern.exec(str)

exec方法是RegExp的主要方法，主要用於提取捕獲組(這個後面後講到)，它接收一個匹配字符串作爲參數，如果匹配成功，返回一個包含匹配項信息的數組；在沒有匹配到的時候返回null。

返回的數組包含匹配的字符串，同時另外包含兩個屬性：index 和 input。index表示的是匹配字符串在文本中的起始位置，input表示匹配的字符串。

在非全局模式匹配下，如果字符串中含有與模式匹配的多個子字符串，那麼只會返回第一個匹配項的結果。返回的數組中下標爲0的位置表示匹配到的字符串，其餘位置表示匹配到的捕獲組信息；而在全局模式下(g)，如果依次執行exec方法，依次返回的是每一個匹配項信息的數組。例如：

// 在非全局模式下，始終返回第一個匹配項的信息
var reg = /<(\/?)(\w+)([^>]*?)>/,
    str = "<div class='hello'><b>hello</b><i>regexp</i></div>";
var matches = reg.exec(str);
matches[0];         // <div class='hello'>
matches[1];         // ""
matches[2];         // div
matches[3];         //  class='hello'
matches.index;      // 0
reg.lastIndex;      // 0

var matches = reg.exec(str);
matches[0];         // <div class='hello'>
matches[1];         // ""
matches[2];         // div
matches[3];         //  class='hello'
matches.index;      // 0
reg.lastIndex;      // 0

// 在全局模式匹配下，找到第一個匹配項信息之後，如果繼續執行，會在字符串中繼續查找下一個匹配項
var reg1 = /<(\/?)(\w+)([^>]*?)>/g,
    str1 = "<div class='hello'><b>hello</b><i>regexp</i></div>";
var matches = reg1.exec(str1);
matches[0];         // <div class='hello'>
matches[1];         // ""
matches[2];         // div
matches[3];         //  class='hello'
matches.index;      // 0
reg1.lastIndex;     // 19

var matches = reg1.exec(str1);
matches[0];         // <b>
matches[1];         // ""
matches[2];         // b
matches[3];         // ""
matches.index;      // 19
reg1.lastIndex;     // 22

pattern.test(str)

test方法主要用於檢測字符串中是否存在與模式匹配的字符串，常用語條件判斷。匹配成功返回true，否則返回false。例如：

var pattern = /\d{2}-\d{3}/,
    str = '29-234',
    str1 = '290-3345',
    str2 = '1-33245';
pattern.test(str);  // true
pattern.test(str1); // true
pattern.test(str2); // false

1.3 RegExp 構造函數屬性

構造函數靜態屬性，分別有一個長屬性名和一個短屬性名(Opera是例外，不支持短屬性名)。

長屬性名	短屬性名	說明
input	$_	最近一次要匹配的字符串
lastMatch	$&	最近一次的匹配項
lastParen	$+	最近一次匹配的捕獲組
leftContext	$`	input字符串中lastMatch之前的文本
multiline	$*	布爾值，表示是否所有表達式都使用多行模式
rightContext	$’	input字符串中lastMatch之後的文本

var pattern = /(.)or/,
    str = 'this is a normal string or meaningful';

if (pattern.test(str)) {
    console.log(RegExp.input);          // this is a normal string or meaningful
    console.log(RegExp.lastMatch);      // nor
    console.log(RegExp.lastParen);      // n
    console.log(RegExp.leftContext);    // this is a
    console.log(RegExp.multiline);      // false
    console.log(RegExp.rightContext);   // mal string or meaningful

    console.log(RegExp['$_']);          // this is a normal string or meaningful
    console.log(RegExp['$&']);          // nor
    console.log(RegExp['$+']);          // n
    console.log(RegExp['$`']);          // this is a
    console.log(RegExp['$*']);          // false
    console.log(RegExp['$\'']);         // mal string or meaningful
}

1.4 用於模式匹配的String方法

str.search(pattern)

它的參數是一個正則表達式，返回第一個與之匹配的子串的起始位置，如果找不到匹配的子串，它將返回-1。例如：

var str = 'JavaScript is not java',
    pattern = /Java/i,
    pattern2 = /Java/ig;
console.log(str.search(pattern));   // 0
console.log(str.search(pattern2));  // 0

注：如果search()的參數不是正則表達式，則首先會通過RegExp構造方法將它轉換成正則表達式，search()方法不支持全局檢索，因爲它忽略正則表達式參數中的修飾符g

str.replace(subStr | pattern, replaceStr | function)

第一個參數是正則表達式或者是字符串，第二個參數是要替換的字符串。如果第一個參數是正則表達式，直接進行模式匹配，若爲字符串，則會檢索整個字符串進行替換，而不會轉化爲正則表達式。例如：

var str = 'JavaScript is not java',
    pattern = /Java/i;

console.log(str.replace(pattern, 'live'));     // liveScript is not java
console.log(str.replace('Java', 'live'));      // liveScript is not java

// function
var str2 = '123-456-789',
    pattern2 = /(\d+)/g;

str2.replace(pattern2, function(v) {
    // 會執行三次
    // 第一次打印123
    // 第二次打印456
    // 第三次打印789
    console.log(v);
});

/**
 * 第一個參數表示匹配的字符串
 * 第二個參數表示匹配的元組(如果沒有元組,則實際上回調函數只有三個值,即此時的d值會爲undefined)
 * 第三個參數表示字符串匹配的開始索引
 * 第四個參數表示匹配的字符串
 */
str2.replace(pattern2, function(a, b, c, d) {
    // 會執行三次
    // 第一次打印123, 123, 0, 123-456-789
    // 第二次打印456, 456, 4, 123-456-789
    // 第三次打印789, 789, 8, 123-456-789
    console.log(a, b, c, d);
});

// 此時沒有進行元組匹配
str2.replace(/\d+/g, function(a, b, c, d) {
    // 會執行三次
    // 第一次打印123, 0, 123-456-789, undefined
    // 第二次打印456, 4, 123-456-789, undefined
    // 第三次打印789, 8, 123-456-789, undefined
    console.log(a, b, c, d);
});

str.match(pattern)

match方法接收一個正則表達式，如果是在全局模式匹配下，匹配失敗返回null，匹配成功會返回一個數組，包含所有匹配的值；如果是非全局模式，則返回第一個匹配項數組信息，數組中第一個元素爲匹配字符串，餘下爲匹配的捕獲組，另外這個數組還有兩個屬性，index和input，index表示匹配字符串的開始索引，input表示匹配的字符串。例如：

var str3 = '[email protected]',
    pattern3 = /^([a-zA-Z][\w\d]+)@([a-zA-Z0-9]+)(\.([a-zA-Z]+))+$/,
    matches;

matches = str3.match(pattern3);
console.log(matches[0]);        // [email protected]
console.log(matches[1]);        // yuzhongzi_91
console.log(matches[2]);        // sina
console.log(matches[3]);        // .com
console.log(matches[4]);        // com
console.log(matches.index);     // 0
console.log(matches.input);     // [email protected]

str.split(pattern | subStr, [ howmany ])

split可以接收兩個參數，第二個參數可選，表示返回數組的最大長度。其中第一個參數是指定的分隔符，可以使正則表達式或者是字符串。例如：

var str4 = 'Hope left life become a cat.',
    pat1 = /\s/,
    pat2 = ' ';

console.log(str4.split(pat1));      // [ 'Hope', 'left', 'life', 'become', 'a', 'cat.' ]
console.log(str4.split(pat2, 2));   // [ 'Hope', 'left' ]

2. 相關術語與操作符

2.1 精準匹配

如果一個字符不是特殊字符或操作符，則表示該字符必須在表達式中出現。例如，在/test/正則中，有4個術語，它們表示這些字符必須在一個字符串中出現，才能匹配該模式。

簡單的理解：精準匹配可以理解爲一對一匹配，即正則表達式中中的術語與字符串中的字符對應。

2.2 匹配一類字符

表示匹配的一類代表一組特定含義的字符。例如：[abc]就代表匹配”a”,”b”,”c”字符中的一個，而不是代表匹配一個特定的字符。具體有如下幾種：

字符	匹配內容
[…]	方括號內的任意字符
[^…]	不在方括號內的任意字符
·	除換行符和其他Unicode行終止符之外的任意字符
\w	任意ASCII字符組成的單詞，等價於[a-zA-Z0-9_]
\W	任意不是ASCII字符組成的單詞，等價於[^a-zA-Z0-9_]
\s	任何Unicode空白符
\S	任何非Unicode空白符的字符，注意w和S不同
\d	任何ASCII數字，等價於[0-9]
\D	除了ASCII數字之外的任何字符，等價於[^0-9]
\b	單詞邊界
\B	非單詞邊界
\t	水平製表符
\v	垂直製表符
\f	換頁符
\r	回車
\n	換行符
\cA:\cZ	控制符，例如：\cM匹配一個Control-M
\u0000:\uFFFF	十六進制Unicode碼
\x00:\xFF	十六進制ASCII碼

// [abc] 表示匹配abc其中的一個
var str = 'abc',
    pattern = /[abc]/;

console.log(str.match(pattern));    // [ 'a', index: 0, input: 'abc' ]

// [^abc] 表示不匹配abc字符中的任何一個
var str = 'abcd',
    pattern = /[^abc]/;

console.log(str.match(pattern));    // [ 'd', index: 3, input: 'abcd' ]

// · 匹配除換行以外的字符
var str = '<p>I am a cat.</p>\n<b>what about you?</b>',
    pattern = /.*/;

console.log(str.match(pattern));    // [ '<p>I am a cat.</p>', index: 0, input: '<p>I am a cat.</p>\n<b>what about you?</b>' ]

// \w 匹配包括下劃線的任意單詞字符
var str = 'Your are _ so cute #*& so | beatiful ',
    pattern = /\w+/g;

console.log(str.match(pattern));   // [ 'Your', 'are', '_', 'so', 'cute', 'so', 'beatiful' ]

// \W 匹配任意非單詞字符
var str = 'Your are _ so cute #*& so | beatiful ',
    pattern = /\W+/g;

console.log(str.match(pattern));    // [ ' ', ' ', ' ', ' ', ' #*& ', ' | ', ' ' ]

// \s 匹配空白字符
var str = 'Your \r\n\f ful',
    pattern = /\s/g;

console.log(str.match(pattern));    // [ ' ', '\r', '\n', '\f', ' ' ]

// \S 匹配任意非空白字符
var str = 'Your \r\n\f ful',
    pattern = /\S/g;

console.log(str.match(pattern));    // [ 'Y', 'o', 'u', 'r', 'f', 'u', 'l' ]

// \d 匹配任意數字
var str = '123helloworld34javascript',
    pattern = /\d+/g;

console.log(str.match(pattern));    // [ '123', '34' ]

// \D 匹配任意非數字
var str = '123helloworld34javascript',
    pattern = /\D+/g;

console.log(str.match(pattern));    // [ 'helloworld', 'javascript' ]

// \b 匹配單詞邊界
var str = 'I never come back',
    pattern = /e\b/g;

if (pattern.test(str)) {
    console.log(RegExp['$&']);  // e
    console.log(RegExp['$`']);  // I never com
}

// \B 匹配非單詞邊界
var str = 'I never come back',
    pattern = /e\B/g;

if (pattern.test(str)) {
    console.log(RegExp['$&']);  // e
    console.log(RegExp['$`']);  // I n
}

// \n 匹配換行符
var str = 'hello \n world',
    pattern = /\n/;

console.log(str.match(pattern));  // [ '\n', index: 6, input: 'hello \n world' ]

// \u0000:\uFFFF 匹配十六進制Unicode字符
var str = 'Visit W3School. Hello World!',
    pattern = /\u0057/g;

console.log(str.match(pattern));    // [ 'W', 'W' ]

// \x00:\xFF 匹配十六進制ASCII字符
var str = 'Visit W3School. Hello World!',
    pattern = /\x57/g;

console.log(str.match(pattern));    // [ 'W', 'W' ]

2.3 轉義

與其他語言中的正則表達式類似，模式中使用的所有元字符都必須轉義。正則表達式中的元字符包括：

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

由於RegExp構造函數的模式參數是字符串，所以在某些情況下需要雙重轉義。例如：

字面量模式	等價的字符串
/ $a b c$ /	“\\[abc\\]”
/\w{2, 3}/	“\\w{2, 3}”

var reg1 = /\[abc\]/,
    reg2 = new RegExp("\\[abc\\]"),
    str = '[abc]';

console.log(str.match(reg1));   // [ '[abc]', index: 0, input: '[abc]' ]
console.log(str.match(reg2));   // [ '[abc]', index: 0, input: '[abc]' ]
console.log(reg1.source);       // \[abc\]
console.log(reg2.source);       // \[abc\]

2.4 匹配開始和結尾(^,$)

匹配一個字符串的開始使用符號(^)，例如: /^java/表示匹配已”java”開頭的字符串
匹配一個字符串的結尾使用符號()，例如:/script /表示匹配已”script”結尾的字符串
如果一個正則表達式中即出現了(^)又出現了()，表示必須匹配整個候選字符串，例如：/javaScript /表示匹配整個”javaScript”字符串

var str = 'javaScript is fun',
    str2 = 'JavaScript',
    reg1 = /^java/,
    reg2 = /fun$/i,
    reg3 = /^javascript$/i;

console.log(reg1.test(str));    // true
console.log(reg2.test(str));    // true
console.log(reg3.test(str));    // false
console.log(reg3.test(str2));   // true

2.5 重複

2.5.1 貪婪重複

要連續匹配四個’a’，我們可以使用/aaaa/來進行匹配，但如果匹配的不止是四個，而是十幾個呢？想必是不方便的，在重複匹配的選項上，正則表達式提供了很多方式。

貪婪匹配 貪婪匹配表示儘可能多的匹配，例如/a+/表示至少匹配一個”a”字符，即表示有多少個”a”就會匹配多少個，例如：

var str = 'aaaaa',
    str1 = 'aaaaaaaaaa',
    reg = /a+/;

console.log(reg.exec(str));     // [ 'aaaaa', index: 0, input: 'aaaaa' ]
console.log(reg.exec(str1));    // [ 'aaaaaaaaaa', index: 0, input: 'aaaaaaaaaa' ]

在貪婪重複上，正則表達式主要有以下方式：

字符	含義
{x,y}	匹配至少x次，最多y次
{x,}	匹配至少x次
{x}	匹配x次
?	匹配0次或者1次, { 0, 1 }
+	匹配至少1次, { 1, }
*	匹配0次或者多次, { 0, }

// {2,3} 匹配至少2次，最多3次
var str = '.abc.def.xyz.com',
    reg = /(.\w+){2,3}/;

console.log(str.match(reg));    // [ '.abc.def.xyz', '.xyz', index: 0, input: '.abc.def.xyz.com' ]

// {2,} 匹配至少2次
var str = '.abc.def.xyz.com',
    reg = /(.\w+){2,}/;

console.log(str.match(reg));    // [ '.abc.def.xyz.com', '.com', index: 0, input: '.abc.def.xyz.com' ]

// {2} 匹配2次
var str = '.abc.def.xyz.com',
    reg = /(.\w+){2}/;

console.log(str.match(reg));    // [ '.abc.def', '.def', index: 0, input: '.abc.def.xyz.com' ]

// ? 匹配0次或者1次
var str = '.abc//.def.xyz.com',
    reg = /(.\w+\/?)?/;

console.log(str.match(reg));    // [ '.abc/', '.abc/', index: 0, input: '.abc//.def.xyz.com' ]

// * 匹配0次或者多次
var str = '.abc//.def.xyz.com',
    reg = /(.\w+\/*)*/;

console.log(str.match(reg));    // [ '.abc//.def.xyz.com', '.com', index: 0, input: '.abc//.def.xyz.com' ]

// + 匹配1次或者多次
var str = '.abc//.def.xyz.com',
    reg = /(.\w+\/+)+/;

console.log(str.match(reg));    // [ '.abc//', '.abc//', index: 0, input: '.abc//.def.xyz.com' ]

2.5.2 非貪婪重複

非貪婪模式就是在貪婪模式後面加上一個”?”，表示盡儘可能少的匹配，例如：

{x,y}?, {x,}?, {x}?, ??, +? *?

var str = 'aaaa',
    str1 = '<p>Hello</p><p>Javascript</p>',
    reg = /a+?/,
    reg2 = /(<p>[^<]*<\/p>)+/,
    reg3 = /(<p>[^<]*<\/p>)+?/;

console.log(reg.exec(str));     // [ 'a', index: 0, input: 'aaaa' ]
console.log(str1.match(reg2));  // [ '<p>Hello</p><p>Javascript</p>', '<p>Javascript</p>', index: 0, input: '<p>Hello</p><p>Javascript</p>' ]
console.log(str1.match(reg3));  // [ '<p>Hello</p>', '<p>Hello</p>', index: 0, input: '<p>Hello</p><p>Javascript</p>' ]

2.6 分組

使用()表示分組，表示匹配一類字符串，例如：/(\w\s)+/表示匹配一個或者多個以字母和空格組合出現的字符串

var str = 'a b c',
    reg = /(\w\s)+/;

console.log(str.match(reg));    // [ 'a b ', 'b ', index: 0, input: 'a b c' ]

捕獲組

當用於模式匹配之後，匹配到的元組就被成爲捕獲組。捕獲組對應着括號的數量，分別使用$1,$2…$99…$x表示匹配到的捕獲組，另外可以使用\1,\2…\99…\x表示引用捕獲組。

var str = '20170809',
    str2 = '20170808',
    reg = /(\d{4})(\d{2})(\d{2})/,
    reg2 = /(\d{4})(\d{2})\2/;

console.log(str.replace(reg, '$1-$2-$3'));  // 2017-08-09
console.log(str.replace(/a/, '$1/$2'));     // 20170809
console.log(str.replace(reg2, '$1/$2'));    // 20170809
console.log(str2.replace(reg2, '$1/$2'));   // 2017/08

可以看到第三個打印與第四個打印之間的差異，原因是因爲第三個沒有正則匹配項。

\x表示引用，引用的是具體的匹配字符串，也就是說上面例子中的\2引用的是第二個捕獲組中的內容，其實應該對應的是”08”字符串，因此”20170808”當然與”20170809”字符串不匹配；反證可以看第四個匹配，驗證了上面的結果。

非捕獲組

若希望以()分組的元組在匹配的時候不被捕獲，可以使用如下形式：

(?:str|pattern)

var str2 = '20170808',
    reg2 = /(?:\d{4})(\d{2})\1/;

console.log(str2.replace(reg2, '$1'));   // 08

2.7 或操作符(|)

用(|)表示或者的關係。例如：/a|b/表示匹配字符”a”或者”b”，/(ab)+|(def)+/表示匹配一次或者多次出現的”ab”或者”def”

2.8 斷言

正則表達式中的斷言大體分爲兩類，先行斷言與後發斷言；在每一種斷言中又分爲正環顧和負環顧，因此一共有四種斷言形式。

先行斷言

通俗的理解，先行斷言就是表示在匹配的字符串後必須出現(正)或者不出現(負)什麼字符串

(?=patten) 零寬正向先行斷言

(?!patten) 零寬負向先行斷言

// (?=patten)
var str = 'yuzhongzi91',
    str2 = '123abc',

    // 表示匹配以字母或者數字組成的，並且第一個字符必須爲小寫字母開頭的字符串
    reg = /^(?=[a-z])([a-z0-9])+$/;

console.log(str.match(reg));    // [ 'yuzhongzi91', '1', index: 0, input: 'yuzhongzi91' ]
console.log(str2.match(reg));   // null

// (?!pattern)
var str = 'bb<div>I am a div</div><p>hello</p><i>world</i><p>javascript</p>',

    // 表示匹配除了<p>標籤之外的標籤
    // 分析：
    // ?! 表示否定，這個可以先不用看
    // \/?p\b 表示匹配"/p"或者"p"
    // [^>]+ 表示匹配不是">"字符
    // 如果沒有"?!"就表示匹配"<p>"標籤
    // 而加上了"?!"，就表示否定，因此就是匹配除了<p>標籤之外的標籤
    reg = /<(?!\/?p\b)[^>]+>/g;

console.log(str.match(reg));    // [ '<div>', '</div>', '<i>', '</i>' ]

後發斷言(兼容性，測試目前仍不支持)

通俗的理解，後發斷言就是表示在匹配的字符串前必須出現(正)或者不出現(負)什麼字符串

(?<=patten) 零寬正向後發斷言

(?<!patten) 零寬負向後發斷言

var str = '<p>hello</p>',
    reg = /(?<=<p>).*(?=<\/p>)/;

console.log(str.match(reg));    // 兼容情況下會匹配到"hello"字符串

3. 正則表達式的編譯

正則表達式的兩個重要階段是編譯和執行。編譯發生在正則表達式第一次被創建的時候，而執行則是發生在我們使用編譯過的正則表達式進行字符串匹配的時候。

因此，爲了性能發麪的提升，建議對需要用到的正則表達式採用預定義(預編譯)的方式。

// 使用預定義方式
var str = '<a href="http://www.rynxiao.com">rynxiao.com</a>',
    reg = /http:\/\/(?:.?\w+)+/,
    start_time = new Date().getTime(),
    i = 0,
    end_time,
    duration;

for (; i < 10000000; i++) {
    reg.test(str);
}

end_time = new Date().getTime();
duration = end_time - start_time;

console.log(duration);

// 採用臨時創建新的正則表達式實例
var str = '<a href="http://www.rynxiao.com">rynxiao.com</a>',
    start_time = new Date().getTime(),
    i = 0,
    end_time,
    duration;

for (; i < 10000000; i++) {
    /http:\/\/(?:.?\w+)+/.test(str);
}

end_time = new Date().getTime();
duration = end_time - start_time;

console.log(duration);

測試數據(可能不準，但大致上能說明一些問題)

執行次數	預編譯(ms)	直接使用(ms)
100000	18	22
1000000	110	151
10000000	1355	1517
100000000	11395	12358

另外：用構造器(new RegExp(...))創建正則表達式的使用。這種技術允許我們，在運行時通過動態創建字符串構建和編譯一個正則表達式。對於構建大量重複的複雜表達式來說，這是非常有用的。

<div class="samurai ninja"></div>
<div class="ninja samurai"></div>
<div></div>
<span class="samurai ninja ronin"></span>

<script>
function findClassInElements(className, type) {
    var elems = document.getElementsByTagName(type || "*");
    var regex = new RegExp("(^|\\s)" + className + "(\\s|$)");
    var results = [];

    for (var i = 0; length = elems.length; i < length; i++) {
        if (regex.test(elems[i].className)) {
            results.push(elems[i]);
        }
        return results;
    }
}
</script>

4. 常用正則表達式

4.1 去除首尾字符串空格(trim)

var str = ' I am a cat. ',
    reg = /^\s+|\s+$/;

console.log(str.replace(reg, ''));  // I am a cat.

4.2 匹配電話號碼

var str = '0715-85624582-234',
    str2 = '027-51486325',

    // \d{3,4} 3-4位區號
    // \d{8} 8位電話號碼
    // (-(\d{3,4}))? 可能存在3-4位分機號
    reg = /^(\d{3,4})-(\d{8})(?:-(\d{3,4}))?$/;

console.log(str.match(reg));    // [ '0715-85624582-234', '0715', '85624582', '234', index: 0, input: '0715-85624582-234' ]
console.log(str2.match(reg));   // [ '027-51486325', '027', '51486325', undefined, index: 0, input: '027-51486325' ]

4.3 匹配手機號碼

var str = '17985642351',
    reg = /^1[3|4|5|7|8]\d{9}$/;

console.log(str.match(reg));    // [ '17985642351', index: 0, input: '17985642351' ]

4.4 匹配郵箱

var str3 = '[email protected]',
    pattern3 = /^([\w-]+)(?:\.([\w-]+))*?@([a-zA-Z0-9]+)(?:\.([a-zA-Z]+))+$/;

// [ '[email protected]', 'reg', 'xiao91', 'gmail', 'com', index: 0, input: '[email protected]' ]
console.log(str3.match(pattern3));

4.5 限制文本框只能輸入數字和小數點(二位小數點)

var reg = /^\d*\.?\d{0,2}$/;

console.log(reg.test('.4'));        // true
console.log(reg.test('3'));         // true
console.log(reg.test('3.3333'));    // false

4.6 匹配中文

var str = '223我是abc一隻貓234',
    reg = /[\u4E00-\u9FA5\uf900-\ufa2d]/g;

console.log(str.match(reg));    // [ '我', '是', '一', '只', '貓' ]

4.7 匹配標籤中的內容

var str = '<div>java<p>hello</p>script</div>',

    // 或者爲 /<div>(.*)<\/div>/ 但不能匹配'\n'
    // /<div>((?:.|\s)*)<\/div>/
    reg = /<div>[\s\S]*<\/div>/;

if (reg.test(str)) {
    console.log(RegExp.$1);     // java<p>hello</p>script
}

4.8 匹配帶有屬性的標籤

var str = '<div class="test" id="test" data-id="2345-766-sd24">hello</div>',
    reg = /<([a-zA-Z]+)(\s*[a-zA-Z-]*?\s*=\s*".+?")*\s*>([\s\S]*?)<\/\1>/;

if (reg.test(str)) {
    console.log(RegExp.$3);     // hello
}

4.9 將數字轉化爲中文大寫字符

var arrs = ["零","壹","貳","叄","肆","伍","陸","柒","捌","玖"],
    reg = /\d/g,
    str = '135268492580',
    res;

res = str.replace(reg, function(v) {
   return arrs[v];
});

console.log(res);   // 壹叄伍貳陸捌肆玖貳伍捌零

4.10 查找鏈接

var str = '<a href="http://www.rynxiao.com">rynxiao.com</a>',
    reg = /http:\/\/(?:.?\w+)+/;

console.log(str.match(reg)[0]); // http://www.rynxiao.com

5. ES6新增

構造函數可以添加第二個規則參數

// es5添加第二個參數時會報錯
var regex = new RegExp(/test/, 'i');

// es6
var regex = new RegExp(/test/, 'ig');
regex.flags; // ig

添加了u修飾符，含義爲”Unicode”模式，用來正確處理大於\uFFFF的Unicode字符。

// \uD83D\uDC2A會被es5認爲是兩個字符，加了u之後就會被認定爲一個字符
/^\uD83D/u.test('\uD83D\uDC2A'); // false
/^\uD83D/.test('\uD83D\uDC2A');  // true

u字符對正則表達式行爲造成的影響，具體參考阮一峯的《ECMAScript 6入門》

添加了y修飾符(粘連修飾符)，全局匹配，但必須從剩餘字符串的第一個位置進行匹配。

var str = 'aaa_aa_a',
    reg1 = /a+/g,
    reg2 = /a+/y;

reg1.exec(str); // aaa
reg2.exec(str); // aaa

reg1.exec(str); // aa
// 第二次執爲null，是因爲剩餘字符串爲_aa_a，必須從頭部開始匹配，因此沒有匹配到規則`a+`
// 若將reg1和reg2修改爲`/a+_/g`和/a+_/y，結果將相同
reg2.exec(str); // null

增加了RegExp實例屬性sticky，表示是否設置了y標誌

var r = /test/y;
r.sticky;   // true

增加了RegExp實例屬性flags，表示正則表達式的修飾符

var r = /test/ig;
r.flags;   // gi

構造函數增加方法RegExp.escape()，表示對字符串轉義，用於正則模式

RegExp.escape('The Quick Brown Fox');
// "The Quick Brown Fox"

RegExp.escape('Buy it. use it. break it. fix it.');
// "Buy it\. use it\. break it\. fix it\."

RegExp.escape('(*.*)');
// "\(\*\.\*\)"

增加修飾符s，可以使得.可以匹配任意單個字符，包括行終止符(\n,\r,U+2018,U+2029)

const re = /foo.bar/s;
// 另一種寫法
// const re = new RegExp('foo.bar', 's');

re.test('foo\nbar') // true
re.dotAll // true
re.flags // 's'

支持後行斷言，具體參看斷言所講
Unicode屬性類

目前，有一個提案，引入了一種新的類的寫法\p{…}和\P{…}，允許正則表達式匹配符合Unicode某種屬性的所有字符。

// 匹配所有數字
const regex = /^\p{Number}+$/u;
regex.test('²³¹¼½¾') // true
regex.test('㉛㉜㉝') // true
regex.test('ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩⅪⅫ') // true

6. 參考資料

書籍

《JavaScript Ninja》

《JavaScript高級程序設計(第三版)》

《JavaScript權威指南》

鏈接

http://blog.csdn.net/u012047933/article/details/38365541

http://www.cnblogs.com/iyangyuan/archive/2013/05/30/3107390.html

http://blog.csdn.net/yuzhongzi81/article/details/45582319

http://www.cnblogs.com/tugenhua0707/p/5037811.html

ECMAScript 6 入門

萌萌的卡洛奇

發佈了60 篇原創文章 · 獲贊 29 · 訪問量 13萬+

私信關注