關於JS中正則表達式

前言

對於前端開發來說，正則表達式是我們避不開的且需要重點掌握的技能，作爲一門用途很廣，但是又常常讓人望而生畏的技術。花時間去深入理解並且融合貫通是值得。

基本概念

什麼是正則表達式？正則表達式是一種表達文本模式（即字符串結構）的方法，有點像字符串的模板，常常用來匹配文本。通過特殊字符+普通字符來進行模式描述，從而達到文本匹配目的工具。

聲明方式

新建正則表達式有兩種方法並且以斜槓表示開始和結束。

1、字面量聲明

var regex = /xyz/;

2、構造函數聲明

var regex = new RegExp('xyz');

3、ES6構造函數聲明

ES6中RegExp構造函數第一個參數是一個正則對象，那麼可以使用第二個參數指定修飾符。ES5不支持這種方式。

var regex = new RegExp(/xyz/ig, 'i');
regex.flags // 'i'

上面代碼中，原有正則對象的修飾符是ig，它會被第二個參數i覆蓋。

正則表達式語法

實例方法

1、test()

正則實例對象的test方法返回一個布爾值，表示當前模式是否能匹配參數字符串。

/cat/.test('cats and dogs') // true

2、exec()

正則實例對象的exec方法，用來返回匹配結果。如果發現匹配，就返回一個數組，成員是匹配成功的子字符串，否則返回null。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

r1.exec(s) // ["x"]
r2.exec(s) // null

修飾符

修飾符表示模式的附加規則，放在正則模式的最尾部。修飾符可以單個使用，也可以多個一起使用。

1、ES5中修飾符

• g：global 執行一個全局匹配，匹配所有結果。加上它以後，正則對象將匹配全部符合條件的結果，主要用於搜索和替換。

默認情況下，第一次匹配成功後，正則對象就停止向下匹配了

var regex = /b/g;
var str = 'abba';

regex.test(str); // true
regex.test(str); // true
regex.test(str); // false

• i：ignorecase執行一個不區分大小寫的匹配。

/abc/.test('ABC') // false
/abc/i.test('ABC') // true

• m：multiple lines多行匹配。

/world$/.test('hello world\n') // false
/world$/m.test('hello world\n') // true

2、ES6中新增修飾符

• u 修飾符

ES6 對正則表達式添加了u修飾符，含義爲“Unicode模式”，用來正確處理大於uFFFF的 Unicode 字符。也就是說，會正確處理四個字節的 UTF-16 編碼。

/^\uD83D/u.test('\uD83D\uDC2A') // false
/^\uD83D/.test('\uD83D\uDC2A') // true

• y 修飾符

ES6 還爲正則表達式添加了y修飾符，叫做“粘連”（sticky）修飾符。

y修飾符的作用與g修飾符類似，也是全局匹配，後一次匹配都從上一次匹配成功的下一個位置開始。不同之處在於，g修飾符只要剩餘位置中存在匹配就可，而y修飾符確保匹配必須從剩餘的第一個位置開始，這也就是“粘連”的涵義。

var s = 'aaa_aa_a';
var r1 = /a+/g;
var r2 = /a+/y;

r1.exec(s) // ["aaa"]
r2.exec(s) // ["aaa"]

r1.exec(s) // ["aa"]
r2.exec(s) // null

基本要素

字符類

1、點字符（.）

匹配除回車、換行、行分隔符和段分隔符以外任意一個字符

/c.t/

2、[ ]

匹配括號中的任意一個字符

/[abc]/.test('hello world') // false
/[abc]/.test('apple') // true

3、連字符（-）

在[ ]內表示字符範圍

/a-z/.test('b') // false 
/[a-z]/.test('b') // true

4、脫字符（^）

如果方括號內的第一個字符是[^]，則表示除了字符類之中的字符，其他字符都可以匹配。

/[^abc]/.test('bbc news') // true
/[^abc]/.test('bbc') // false

數量限定符

1、？問號表示某個模式出現0次或1次，等同於{0, 1}。

// t 出現0次或1次
/t?est/.test('test') // true
/t?est/.test('est') // true

2、+加號表示某個模式出現1次或多次，等同於{1,}。

// t 出現1次或多次
/t+est/.test('test') // true
/t+est/.test('ttest') // true
/t+est/.test('est') // false

3、*星號表示某個模式出現0次或多次，等同於{0,}。

// t 出現0次或多次
/t*est/.test('test') // true
/t*est/.test('ttest') // true
/t*est/.test('tttest') // true
/t*est/.test('est') // true

4、{n}表示恰好重複n次。

/lo{2}k/.test('look') // true

5、{n,}表示至少重複n次。

/lo{2,}k/.test('looook') // true

6、{n,m}表示重複不少於n次，不多於m次。

/lo{2,5}k/.test('looook') // true

位置限定符

1、^ 表示字符串的開始位置

// test必須出現在開始位置
/^test/.test('test123') // true

2、$表示字符串的結束位置

// test必須出現在結束位置
/test$/.test('new test') // true

特殊字符

1、轉義符（\）

/1+1/.test('1+1')
// false

/1\+1/.test('1+1')
// true

2、（）將正則表達式的一部分括起來組成一個單元，可以對整個單元使用數量限定符

（[0-9]{1,3}\.）{3}[0-9]{1-3} //匹配ip地址

3、選擇符（|）

豎線符號（|）在正則表達式中表示“或關係”。

/11|22/.test('911') // true

預定義模式

預定義模式指的是某些常見模式的簡寫方式。

• \d 匹配0-9之間的任一數字，相當於[0-9]。
• \D 匹配所有0-9以外的字符，相當於[^0-9]。
• \w 匹配任意的字母、數字和下劃線，相當於[A-Za-z0-9_]。
• \W 除所有字母、數字和下劃線以外的字符，相當於[^A-Za-z0-9_]。
• \s 匹配空格（包括換行符、製表符、空格符等），相等於[ \t\r\n\v\f]。
• \S 匹配非空格的字符，相當於[^ \t\r\n\v\f]。
• \b 匹配詞的邊界。
• \B 匹配非詞邊界，即在詞的內部。

進階使用

字符串正則方法

字符串對象共有 4 個方法，可以使用正則表達式：match()、replace()、search()和split()。

1、match()

字符串實例對象的match方法對字符串進行正則匹配，返回匹配結果。

var s = '_x_x';
var r1 = /x/;
var r2 = /y/;

s.match(r1) // ["x"]
s.match(r2) // null

2、replace()

字符串對象的replace方法可以替換匹配的值。它接受兩個參數，第一個是正則表達式，表示搜索模式，第二個是替換的內容。

正則表達式如果不加g修飾符，就替換第一個匹配成功的值，
否則替換所有匹配成功的值。

'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"

3、search()

字符串對象的search方法，返回第一個滿足條件的匹配結果在整個字符串中的位置。如果沒有任何匹配，則返回-1。

'_x_x'.search(/x/)
// 1

4、split()

字符串對象的split方法按照正則規則分割字符串，返回一個由分割後的各個部分組成的數組。

該方法接受兩個參數，第一個參數是正則表達式，表示分隔規則，第二個參數是返回數組的最大成員數。

// 非正則分隔
'a,  b,c, d'.split(',')
// [ 'a', '  b', 'c', ' d' ]

// 正則分隔，去除多餘的空格
'a,  b,c, d'.split(/, */)
// [ 'a', 'b', 'c', 'd' ]

// 指定返回數組的最大成員
'a,  b,c, d'.split(/, */, 2)
[ 'a', 'b' ]

貪婪模式

？、*、+匹配符默認情況下都是最大可能匹配，即匹配直到下一個字符不滿足匹配規則爲止。這被稱爲貪婪模式。

var s = 'aaa';
s.match(/a+/) // ["aaa"]

非貪婪模式

• +?：表示某個模式出現1次或多次，匹配時採用非貪婪模式。
• *?：表示某個模式出現0次或多次，匹配時採用非貪婪模式。
• ??：表格某個模式出現0次或1次，匹配時採用非貪婪模式。

'abb'.match(/ab*b/) // ["abb"]
'abb'.match(/ab*?b/) // ["ab"]

'abb'.match(/ab?b/) // ["abb"]
'abb'.match(/ab??b/) // ["ab"]

組匹配

正則表達式的括號表示分組匹配，括號中的模式可以用來匹配分組的內容。

/fred+/.test('fredd') // true
/(fred)+/.test('fredfred') // true

1、分組捕獲

var m = 'abcabc'.match(/(.)b(.)/);
m
// ['abc', 'a', 'c']

// 全局
var m = 'abcabc'.match(/(.)b(.)/g);
m // ['abc', 'abc']

2、非捕獲組

(?:x)稱爲非捕獲組，表示不返回該組匹配的內容，即匹配的結果中不計入這個括號。

var m = 'abc'.match(/(?:.)b(.)/);
m // ["abc", "c"]

3、先行斷言

x(?=y)稱爲先行斷言，x只有在y前面才匹配，y不會被計入返回結果。

var m = 'abc'.match(/b(?=c)/);
m // ["b"]

4、先行否定斷言

x(?!y)稱爲先行否定斷言，x只有不在y前面才匹配，y不會被計入返回結果。

/\d+(?!\.)/.exec('3.14')
// ["14"]

總結

正則表達式是開發中經常需要使用的技術，也是前端必須掌握的技能，它的重要性不言而喻。不熟練的童鞋加緊學習。