關於JS中正則表達式

前言

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

基本概念

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

聲明方式

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

一、字面量聲明

var regex = /xyz/;
複製代碼

二、構造函數聲明

var regex = new RegExp('xyz');
複製代碼

三、ES6構造函數聲明

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

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

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

正則表達式語法

實例方法

一、test()

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

/cat/.test('cats and dogs') // true
複製代碼

二、exec()

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

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

r1.exec(s) // ["x"]
r2.exec(s) // null
複製代碼

修飾符

修飾符表示模式的附加規則，放在正則模式的最尾部。修飾符能夠單個使用，也能夠多個一塊兒使用。

一、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
複製代碼

二、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
複製代碼

基本要素

字符類

一、點字符（.）

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

/c.t/
複製代碼

二、[ ]

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

/[abc]/.test('hello world') // false
/[abc]/.test('apple') // true
複製代碼

三、連字符（-）

在[ ]內表示字符範圍

/a-z/.test('b') // false 
/[a-z]/.test('b') // true
複製代碼

四、脫字符（^）

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

/[^abc]/.test('bbc news') // true
/[^abc]/.test('bbc') // false
複製代碼

數量限定符

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

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

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

// t 出現1次或屢次
/t+est/.test('test') // true
/t+est/.test('ttest') // true
/t+est/.test('est') // false
複製代碼

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

// t 出現0次或屢次
/t*est/.test('test') // true
/t*est/.test('ttest') // true
/t*est/.test('tttest') // true
/t*est/.test('est') // true
複製代碼

四、{n}表示剛好重複n次。

/lo{2}k/.test('look') // true
複製代碼

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

/lo{2,}k/.test('looook') // true
複製代碼

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

/lo{2,5}k/.test('looook') // true
複製代碼

位置限定符

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

// test必須出如今開始位置
/^test/.test('test123') // true
複製代碼

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

// test必須出如今結束位置
/test$/.test('new test') // true
複製代碼

特殊字符

一、轉義符（\）

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

/1\+1/.test('1+1')
// true
複製代碼

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

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

三、選擇符（|）

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

/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()。

一、match()

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

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

s.match(r1) // ["x"]
s.match(r2) // null
複製代碼

二、replace()

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

正則表達式若是不加g修飾符，就替換第一個匹配成功的值， 不然替換全部匹配成功的值。

'aaa'.replace('a', 'b') // "baa"
'aaa'.replace(/a/, 'b') // "baa"
'aaa'.replace(/a/g, 'b') // "bbb"
複製代碼

三、search()

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

'_x_x'.search(/x/)
// 1
複製代碼

四、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
複製代碼

一、分組捕獲

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

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

二、非捕獲組

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

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

三、先行斷言

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

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

四、先行否認斷言

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

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

總結

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