本文實例講述了ES6正則的擴展。分享給大家供大家參考，具體如下：

1. RegExp構造函數

ES5中，RegExp構造函數的參數：

參數是字符串，這時第二個參數表示正則表達式的修飾符（flag）

參數是一個正則表示式，這時會返回一個原有正則表達式的拷貝。但是，ES5不允許此時使用第二個參數，添加修飾符，否則會報錯。

ES6改變了這種行為。如果RegExp構造函數第一個參數是一個正則對象，那么可以使用第二個參數指定修飾符。而且，返回的正則表達式會忽略原有的正則表達式的修飾符，只使用新指定的修飾符。

2. 字符串的正則表達式

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

ES6將這4個方法，在語言內部全部調用RegExp的實例方法，從而做到所有與正則相關的方法，全都定義在RegExp對象上。

String.prototype.match 調用 RegExp.prototype[Symbol.match]
String.prototype.replace 調用 RegExp.prototype[Symbol.replace]
String.prototype.search 調用 RegExp.prototype[Symbol.search]
String.prototype.split 調用 RegExp.prototype[Symbol.split]

3. u修飾符

ES6對正則表達式添加了u修飾符，含義為“Unicode模式”，用來正確處理大于/uFFFF的Unicode字符。

也就是說，會正確處理四個字節的UTF-16編碼。對于碼點大于0xFFFF的Unicode字符，點字符不能識別，必須加上u修飾符。

ES6新增了使用大括號表示Unicode字符，這種表示法在正則表達式中必須加上u修飾符，才能識別。

//u{61}/.test('a') // false//u{61}/u.test('a') // true//u{20BB7}/u.test('𠮷') // true

①.點字符

點（.）字符在正則表達式中，含義是除了換行符以外的任意單個字符。對于碼點大于0xFFFF的Unicode字符，點字符不能識別，必須加上u修飾符。

var s = '';/^.$/.test(s) // false/^.$/u.test(s) // true

上面代碼表示，如果不添加u修飾符，正則表達式就會認為字符串為兩個字符，從而匹配失敗。

②. 量詞

使用u修飾符后，所有量詞都會正確識別碼點大于0xFFFF的Unicode字符。

/a{2}/.test('aa') // true/a{2}/u.test('aa') // true/ {2}/.test(' ') // false/ {2}/u.test(' ') // true

另外，只有在使用u修飾符的情況下，Unicode表達式當中的大括號才會被正確解讀，否則會被解讀為量詞。

/^/u{3}$/.test('uuu') // true

上面代碼中，由于正則表達式沒有u修飾符，所以大括號被解讀為量詞。加上u修飾符，就會被解讀為Unicode表達式。

③. 預定義模式

u修飾符也影響到預定義模式，能否正確識別碼點大于0xFFFF的Unicode字符。

/S是預定義模式，匹配所有不是空格的字符。只有加了u修飾符，它才能正確匹配碼點大于0xFFFF的Unicode字符。

利用這一點，可以寫出一個正確返回字符串長度的函數。

function codePointLength(text) { var result = text.match(/[/s/S]/gu); return result ? result.length : 0;}var s = '𠮷𠮷';s.length // 4codePointLength(s) // 2

④. i修飾符

有些Unicode字符的編碼不同，但是字型很相近，比如，/u004B與/u212A都是大寫的K。

/[a-z]/i.test('/u212A') // false/[a-z]/iu.test('/u212A') // true

上面代碼中，不加u修飾符，就無法識別非規范的K字符。

4. y修飾符

除了u修飾符，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

上面代碼有兩個正則表達式，一個使用g修飾符，另一個使用y修飾符。這兩個正則表達式各執行了兩次，第一次執行的時候，兩者行為相同，剩余字符串都是_aa_a。由于g修飾沒有位置要求，所以第二次執行會返回結果，而y修飾符要求匹配必須從頭部開始，所以返回null。

如果改一下正則表達式，保證每次都能頭部匹配，y修飾符就會返回結果了。

var s = 'aaa_aa_a';var r = /a+_/y;r.exec(s) // ["aaa_"]r.exec(s) // ["aa_"]

上面代碼每次匹配，都是從剩余字符串的頭部開始。

使用lastIndex屬性，可以更好地說明y修飾符。

const REGEX = /a/g;// 指定從2號位置（y）開始匹配REGEX.lastIndex = 2;// 匹配成功const match = REGEX.exec('xaya');// 在3號位置匹配成功match.index // 3// 下一次匹配從4號位開始REGEX.lastIndex // 4// 4號位開始匹配失敗REGEX.exec('xaxa') // null

上面代碼中，lastIndex屬性指定每次搜索的開始位置，g修飾符從這個位置開始向后搜索，直到發現匹配為止。

const REGEX = /a/y;// 指定從2號位置開始匹配REGEX.lastIndex = 2;// 不是粘連，匹配失敗REGEX.exec('xaya') // null// 指定從3號位置開始匹配REGEX.lastIndex = 3;// 3號位置是粘連，匹配成功const match = REGEX.exec('xaxa');match.index // 3REGEX.lastIndex // 4

y修飾符同樣遵守lastIndex屬性，但是要求必須在lastIndex指定的位置發現匹配。

進一步說，y修飾符號隱含了頭部匹配的標志^。

/b/y.exec('aba')// null

單單一個y修飾符對match方法，只能返回第一個匹配，必須與g修飾符聯用，才能返回所有匹配。

5. sticky屬性

表示是否設置了y修飾符

var r = /hello/d/y;r.sticky // true

6. flags屬性

ES6為正則表達式新增了flags屬性，會返回正則表達式的修飾符。（和前面是一個逆向的過程）

7. RegExp.escape()

字符串必須轉義，才能作為正則模式。已經有提議將這個需求標準化，作為RegExp對象的靜態方法RegExp.escape()

function escapeRegExp(str) { return str.replace(/[/-/[/]///{/}/(/)/*/+/?/.///^/$/|]/g, '//$&');}let str = '/path/to/resource.html?search=query';escapeRegExp(str)// "http://path//to//resource/.html/?search=query"

PS：這里再為大家提供2款非常方便的正則表達式工具供大家參考使用：

JavaScript正則表達式在線測試工具：
http://tools.VeVB.COm/regex/javascript

正則表達式在線生成工具：
http://tools.VeVB.COm/regex/create_reg

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《ECMAScript6(ES6)入門教程》、《JavaScript正則表達式技巧大全》、《JavaScript字符與字符串操作技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript錯誤與調試技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。