JavaScript通過RegExp使用正則表達(dá)式過程詳解
RegExp
ECMAScript通過RegExp類型支持正則表達(dá)式。正則表達(dá)式使用類似Perl的簡潔語法來創(chuàng)建:
let expression = /pattern/flags;
這個(gè)正則表達(dá)式的pattern(模式)可以是任何簡單或復(fù)雜的正則表達(dá)式,包括字符類、限定符、分組、向前查找和反向引用。每個(gè)正則表達(dá)式可以帶零個(gè)或者多個(gè)flags(標(biāo)記),用于控制正則表達(dá)式的行為。下面給出了表示匹配模式的標(biāo)記。
- g:全局模式,表示查找字符串的全部內(nèi)容,而不是找到第一個(gè)匹配的內(nèi)容就結(jié)束
- i:不區(qū)分大小寫,表示在查找匹配時(shí)忽略pattern和字符串的大小寫
- m:多行模式,表示查找到一行文本末尾時(shí)會(huì)繼續(xù)查找
- y:粘附模式,表示只查找從lastIndex開始及之后的字符串
- u:Unicode模式,啟用Unicode匹配
- s:dotAll模式,表示元字符.匹配任何字符(包括\n 或\r)
使用不同模式和標(biāo)記可以創(chuàng)建出各種正則表達(dá)式,比如:
// 匹配字符串中的所有“at” let pattern1 = /at/g; //匹配第一個(gè)“bat”或者“cat”,忽略大小寫 let pattern2 = /[bc]at/i; //匹配所有以“at”結(jié)尾的三字符組合,忽略大小寫 let pattern3 = /.at/gi;
與其他語言中的正則表達(dá)式類似,所有元字符在模式中也必須轉(zhuǎn)義,包括:
( [ { \ ^ $ | ) ] } ? * + .
元字符在正則表達(dá)式中都有一種或多種特殊功能,所以要匹配上面這些字符本身,就必須使用反斜杠來轉(zhuǎn)義。下面是幾個(gè)例子:
//匹配第一個(gè)“bat”或“cat”,忽略大小寫 let pattern1 = /[bc]at/i; //匹配第一個(gè)"[bc]at",忽略大小寫 let pattern2 = /\[bc\]at/i; //匹配所有以“at”結(jié)尾的三字符組合,忽略大小寫 let pattern3 = /.at/gi; //匹配所有".at",忽略大小寫 let pattern4 = /\.at/gi
這里的pattern1匹配”bat“或”cat“,不區(qū)分大小寫。要直接匹配“[bc]at",左右中括號(hào)都必須像pattern2中那樣使用反斜杠轉(zhuǎn)義。
在pattern3中,點(diǎn)號(hào)表示"at"前面的任意字符都可以匹配。如果想匹配".at",那么要像pattern4中那樣對(duì)點(diǎn)號(hào)進(jìn)行轉(zhuǎn)義。
前面例子中的正則表達(dá)式都是使用字面量形式定義的。正則表達(dá)式也可以使用RegExp構(gòu)造函數(shù)來創(chuàng)建,它接收兩個(gè)參數(shù):模式字符串 和 (可選的)標(biāo)記字符串。任何使用字面量定義的正則表達(dá)式也可以通過構(gòu)造函數(shù)來創(chuàng)建,比如:
//匹配第一個(gè)“bat”或“cat”,忽略大小寫 let pattern1 = /[bc]at/i; //跟pattern1一樣,只不過是用構(gòu)造函數(shù)創(chuàng)建的 let pattern2 = new RegExp("[bc]at","i");
這里的pattern1和pattern2是等效的正則表達(dá)式。注意,RegExp構(gòu)造函數(shù)的兩個(gè)參數(shù)都是字符串。因?yàn)镽egExp的模式參數(shù)是字符串,所以在某些情況下需要二次轉(zhuǎn)義。所有元字符都必須二次轉(zhuǎn)義,包括轉(zhuǎn)義字符序列,如\n (\轉(zhuǎn)義后的字符串是\,在正則表達(dá)式字符串中則要寫成\ \ \ \
字面量模式 | 對(duì)應(yīng)的字符串 |
---|---|
/ \ [bc \ ]at/ | “\ \ [bc \ \ ]at” |
/ \ .at/ | “\ \ .at” |
/name \ /age/ | “name\ /age” |
/ \d.\d{1,2}/ | “\ \d.\ \d{1,2}” |
/ \ w\ \hello \ \123/ | “\ \w \ \ \ \hello\ \ \ \123” |
此外,使用RegExp也可以基于已有的正則表達(dá)式實(shí)例,并可選擇性地修改它們的標(biāo)記:
const rel = /cat/g; console.log(rel); // "cat/g" const re2 = new RegExp(rel); console.log(re2); // "cat/g"
RegExp實(shí)例屬性
每一個(gè)RexExp實(shí)例都有下列屬性,提供有關(guān)模式的各方面信息。
- global:布爾值,表示是否設(shè)置了g標(biāo)記。
- ignoreCase:布爾值,表示是否設(shè)置了i標(biāo)記。
- unicode:布爾值,表示是否設(shè)置了u標(biāo)記
- sticky:布爾值,表示是否設(shè)置了y標(biāo)記。
- lastIndex:整數(shù),表示在源字符串中下一次搜索的開始位置,始終從0開始。
- multiline:布爾值,表示是否設(shè)置了m標(biāo)記。
- dotAll:布爾值,表示是否設(shè)置了s標(biāo)記。
- source:正則表達(dá)式的字面量字符串(不是傳給構(gòu)造函數(shù)的模式字符串),沒有開頭和結(jié)尾的斜杠。
- flags:正則表達(dá)式的標(biāo)記字符串。始終以字面量而非傳入構(gòu)造函數(shù)的字符串模式形式返回(沒有前后斜杠)。
let pattern1 = /\[bc\]at/i; console.log(pattern1.global); //false console.log(pattern1.ignoreCase); //true console.log(pattern1.multiline); //false console.log(pattern1.lastIndex); //0 console.log(pattern1.source); //"\[bc\]at" console.log(pattern1.flags); //"i"
RegExp實(shí)例方法
RegExp實(shí)例的主要方法是exec(),主要用于配合捕獲組使用。這個(gè)方法只接受一個(gè)參數(shù),即要應(yīng)用模式的字符串。如果找到了匹配項(xiàng),則返回包含第一個(gè)匹配信息的數(shù)組;如果沒有找到匹配項(xiàng),則返回null。返回的數(shù)組雖然是Array的實(shí)例,但包含兩個(gè)額外的屬性:index和input。index是字符串中匹配模式的起始位置,input是要查找的字符串。這個(gè)數(shù)組的第一個(gè)元素是匹配整個(gè)模式的字符串,其他元素是與表達(dá)式中的捕獲組匹配的字符串。如果模式中沒有捕獲組,則數(shù)組只包含一個(gè)元素。來看下面的例子:
let text = 'mom and dad and baby'; let pattern = /mom( and dad(and baby)?)?/gi; let matches = pattern.exec(text); console.log(matches.index); // 0 console.log(matches.input); //"mom and dad and baby" console.log(matches[0]); //"mom and dad and baby" console.log(matches[1]); //" and dad and baby"
到此這篇關(guān)于JavaScript通過RegExp使用正則表達(dá)式過程詳解的文章就介紹到這了,更多相關(guān)JS RegExp內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到的問題總結(jié)
最近公司有個(gè)需求,第一次遇到,把原生的微信小程序代碼轉(zhuǎn)換為uni-app項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于微信小程序轉(zhuǎn)換uniapp的遷移步驟以及遇到問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07微信小程序 wx.getUserInfo引導(dǎo)用戶授權(quán)問題實(shí)例分析
這篇文章主要介紹了微信小程序 wx.getUserInfo引導(dǎo)用戶授權(quán)問題,結(jié)合實(shí)例形式分析了微信小程序使用wx.getUserInfo引導(dǎo)用戶授權(quán)問題的具體操作步驟與實(shí)現(xiàn)方法,需要的朋友可以參考下2020-03-03js監(jiān)聽鼠標(biāo)點(diǎn)擊和鍵盤點(diǎn)擊事件并自動(dòng)跳轉(zhuǎn)頁面
這篇文章主要介紹了js監(jiān)聽鼠標(biāo)點(diǎn)擊(onmousedown)和鍵盤點(diǎn)擊(onkeydown)事件并自動(dòng)跳轉(zhuǎn)頁面,很簡單的一個(gè)實(shí)現(xiàn)2014-09-09javascript+HTML5 canvas繪制時(shí)鐘功能示例
這篇文章主要介紹了javascript+HTML5 canvas繪制時(shí)鐘功能,結(jié)合實(shí)例形式分析了javascript+HTML5 canvas數(shù)值運(yùn)算、圖形繪制與時(shí)間顯示相關(guān)操作技巧,需要的朋友可以參考下2019-05-05JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)向OL列表內(nèi)動(dòng)態(tài)添加LI元素的方法,實(shí)例分析了javascript操作html元素的技巧,需要的朋友可以參考下2015-03-03