您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)ES6中正則擴(kuò)展的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
具體如下:
1. RegExp構(gòu)造函數(shù)
ES5中,RegExp構(gòu)造函數(shù)的參數(shù):
參數(shù)是字符串,這時第二個參數(shù)表示正則表達(dá)式的修飾符(flag)
參數(shù)是一個正則表示式,這時會返回一個原有正則表達(dá)式的拷貝。但是,ES5不允許此時使用第二個參數(shù),添加修飾符,否則會報(bào)錯。
ES6改變了這種行為。如果RegExp構(gòu)造函數(shù)第一個參數(shù)是一個正則對象,那么可以使用第二個參數(shù)指定修飾符。而且,返回的正則表達(dá)式會忽略原有的正則表達(dá)式的修飾符,只使用新指定的修飾符。
2. 字符串的正則表達(dá)式
字符串對象共有4個方法,可以使用正則表達(dá)式:match()、replace()、search()和split()。
ES6將這4個方法,在語言內(nèi)部全部調(diào)用RegExp的實(shí)例方法,從而做到所有與正則相關(guān)的方法,全都定義在RegExp對象上。
String.prototype.match
調(diào)用 RegExp.prototype[Symbol.match]String.prototype.replace
調(diào)用 RegExp.prototype[Symbol.replace]String.prototype.search
調(diào)用 RegExp.prototype[Symbol.search]String.prototype.split
調(diào)用 RegExp.prototype[Symbol.split]
3. u修飾符
ES6對正則表達(dá)式添加了u修飾符,含義為“Unicode模式”,用來正確處理大于\uFFFF的Unicode字符。
也就是說,會正確處理四個字節(jié)的UTF-16編碼。對于碼點(diǎn)大于0xFFFF的Unicode字符,點(diǎn)字符不能識別,必須加上u修飾符。
ES6新增了使用大括號表示Unicode字符,這種表示法在正則表達(dá)式中必須加上u修飾符,才能識別。
/\u{61}/.test('a') // false /\u{61}/u.test('a') // true /\u{20BB7}/u.test('?') // true
①.點(diǎn)字符
點(diǎn)(.)字符在正則表達(dá)式中,含義是除了換行符以外的任意單個字符。對于碼點(diǎn)大于0xFFFF的Unicode字符,點(diǎn)字符不能識別,必須加上u修飾符。
var s = ''; /^.$/.test(s) // false /^.$/u.test(s) // true
上面代碼表示,如果不添加u修飾符,正則表達(dá)式就會認(rèn)為字符串為兩個字符,從而匹配失敗。
②. 量詞
使用u修飾符后,所有量詞都會正確識別碼點(diǎn)大于0xFFFF的Unicode字符。
/a{2}/.test('aa') // true /a{2}/u.test('aa') // true / {2}/.test(' ') // false / {2}/u.test(' ') // true
另外,只有在使用u修飾符的情況下,Unicode表達(dá)式當(dāng)中的大括號才會被正確解讀,否則會被解讀為量詞。
/^\u{3}$/.test('uuu') // true
上面代碼中,由于正則表達(dá)式?jīng)]有u修飾符,所以大括號被解讀為量詞。加上u修飾符,就會被解讀為Unicode表達(dá)式。
③. 預(yù)定義模式
u修飾符也影響到預(yù)定義模式,能否正確識別碼點(diǎn)大于0xFFFF的Unicode字符。
\S是預(yù)定義模式,匹配所有不是空格的字符。只有加了u修飾符,它才能正確匹配碼點(diǎn)大于0xFFFF的Unicode字符。
利用這一點(diǎn),可以寫出一個正確返回字符串長度的函數(shù)。
function codePointLength(text) { var result = text.match(/[\s\S]/gu); return result ? result.length : 0; } var s = '??'; s.length // 4 codePointLength(s) // 2
④. i修飾符
有些Unicode字符的編碼不同,但是字型很相近,比如,\u004B與\u212A都是大寫的K。
/[a-z]/i.test('\u212A') // false /[a-z]/iu.test('\u212A') // true
上面代碼中,不加u修飾符,就無法識別非規(guī)范的K字符。
4. y修飾符
除了u修飾符,ES6還為正則表達(dá)式添加了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
上面代碼有兩個正則表達(dá)式,一個使用g修飾符,另一個使用y修飾符。這兩個正則表達(dá)式各執(zhí)行了兩次,第一次執(zhí)行的時候,兩者行為相同,剩余字符串都是_aa_a。由于g修飾沒有位置要求,所以第二次執(zhí)行會返回結(jié)果,而y修飾符要求匹配必須從頭部開始,所以返回null。
如果改一下正則表達(dá)式,保證每次都能頭部匹配,y修飾符就會返回結(jié)果了。
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修飾符從這個位置開始向后搜索,直到發(fā)現(xiàn)匹配為止。
const REGEX = /a/y; // 指定從2號位置開始匹配 REGEX.lastIndex = 2; // 不是粘連,匹配失敗 REGEX.exec('xaya') // null // 指定從3號位置開始匹配 REGEX.lastIndex = 3; // 3號位置是粘連,匹配成功 const match = REGEX.exec('xaxa'); match.index // 3 REGEX.lastIndex // 4
y修飾符同樣遵守lastIndex屬性,但是要求必須在lastIndex指定的位置發(fā)現(xiàn)匹配。
進(jìn)一步說,y修飾符號隱含了頭部匹配的標(biāo)志^。
/b/y.exec('aba') // null
單單一個y修飾符對match方法,只能返回第一個匹配,必須與g修飾符聯(lián)用,才能返回所有匹配。
5. sticky屬性
表示是否設(shè)置了y修飾符
var r = /hello\d/y; r.sticky // true
6. flags屬性
ES6為正則表達(dá)式新增了flags屬性,會返回正則表達(dá)式的修飾符。(和前面是一個逆向的過程)
7. RegExp.escape()
字符串必須轉(zhuǎn)義,才能作為正則模式。已經(jīng)有提議將這個需求標(biāo)準(zhǔn)化,作為RegExp對象的靜態(tài)方法RegExp.escape()
function escapeRegExp(str) { return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); } let str = '/path/to/resource.html?search=query'; escapeRegExp(str) // "\/path\/to\/resource\.html\?search=query"
關(guān)于“ES6中正則擴(kuò)展的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。