全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù)
正則表達(dá)式(regular expression)描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串做替換或者從某個(gè)串中取出符合某個(gè)條件的子串等。
正則表達(dá)式由于不經(jīng)常使用,所以容易經(jīng)常忘記,下面小編把常用的函數(shù)和功能,簡(jiǎn)明扼要的羅列在此,以備日后查看:
RegExp對(duì)象的函數(shù)常用的有2個(gè)
1、test函數(shù)
用法:RegExpObject.test(string)
返回:如果字符串 string 中含有與 RegExpObject 匹配的文本,則返回 true,否則返回 false。
描述:這個(gè)方法沒(méi)有什么特殊之處,對(duì)修飾符g沒(méi)有什么特殊處理
示例:
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /a=1/; console.log(reg.test(url)); // 輸出結(jié)果為 true
2、exec函數(shù)
用法:RegExpObject.exec(string)
返回:返回一個(gè)數(shù)組,其中存放匹配的結(jié)果。如果未找到匹配,則返回值為 null。
描述:
exec() 方法的功能非常強(qiáng)大,它是一個(gè)通用的方法,而且使用起來(lái)也比 test() 方法以及支持正則表達(dá)式的 String 對(duì)象的方法更為復(fù)雜。
如果 exec() 找到了匹配的文本,則返回一個(gè)結(jié)果數(shù)組。否則,返回 null。此數(shù)組的第 0 個(gè)元素是與正則表達(dá)式相匹配的文本,第 1 個(gè)元素是與 RegExpObject 的第 1 個(gè)子表達(dá)式相匹配的文本(如果有的話),第 2 個(gè)元素是與 RegExpObject 的第 2 個(gè)子表達(dá)式相匹配的文本(如果有的話),以此類推。除了數(shù)組元素和 length 屬性之外,exec() 方法還返回兩個(gè)屬性。index 屬性聲明的是匹配文本的第一個(gè)字符的位置。input 屬性則存放的是被檢索的字符串 string。我們可以看得出,在調(diào)用非全局的 RegExp 對(duì)象的 exec() 方法時(shí),返回的數(shù)組與調(diào)用方法 String.match() 返回的數(shù)組是相同的。
但是,當(dāng) RegExpObject 是一個(gè)全局正則表達(dá)式時(shí),exec() 的行為就稍微復(fù)雜一些。它會(huì)在 RegExpObject 的 lastIndex 屬性指定的字符處開(kāi)始檢索字符串 string。當(dāng) exec() 找到了與表達(dá)式相匹配的文本時(shí),在匹配后,它將把 RegExpObject 的 lastIndex 屬性設(shè)置為匹配文本的最后一個(gè)字符的下一個(gè)位置。這就是說(shuō),您可以通過(guò)反復(fù)調(diào)用 exec() 方法來(lái)遍歷字符串中的所有匹配文本。當(dāng) exec() 再也找不到匹配的文本時(shí),它將返回 null,并把 lastIndex 屬性重置為 0。
示例:
正則表達(dá)式帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/g; console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //["b=2", "b", "2", index: 25, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //["c=3", "c", "3", index: 29, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //null reg.lastIndex = 0; //這段代碼很重要哦,注意理解 console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]
正則表達(dá)式不帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/g; console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] reg.lastIndex = 0; console.log(reg.exec(url)); //["a=1", "a", "1", index: 21, input: http://www.baidu.com?a=1&b=2&c=3]
發(fā)現(xiàn)不一樣的地方了嗎,把函數(shù)描述好好讀一遍,就明白了^_^
String對(duì)象的函數(shù)支持正則的有4個(gè),我們只說(shuō)其中的2個(gè)
1、match函數(shù)
用法:stringObject.match(searchvalue | regexp),這里我們只說(shuō)regexp模式
返回值:存放匹配結(jié)果的數(shù)組。該數(shù)組的內(nèi)容依賴于 regexp 是否具有全局標(biāo)志 g。
描述:
match() 方法將檢索字符串 stringObject,以找到一個(gè)或多個(gè)與 regexp 匹配的文本。這個(gè)方法的行為在很大程度上有賴于 regexp 是否具有標(biāo)志 g。
如果 regexp 沒(méi)有標(biāo)志 g,那么 match() 方法就只能在 stringObject 中執(zhí)行一次匹配。如果沒(méi)有找到任何匹配的文本, match() 將返回 null。否則,它將返回一個(gè)數(shù)組,其中存放了與它找到的匹配文本有關(guān)的信息。該數(shù)組的第 0 個(gè)元素存放的是匹配文本,而其余的元素存放的是與正則表達(dá)式的子表達(dá)式匹配的文本。除了這些常規(guī)的數(shù)組元素之外,返回的數(shù)組還含有兩個(gè)對(duì)象屬性。 index 屬性聲明的是匹配文本的起始字符在 stringObject 中的位置,input 屬性聲明的是對(duì) stringObject 的引用。
如果 regexp 具有標(biāo)志 g,則 match() 方法將執(zhí)行全局檢索,找到 stringObject 中的所有匹配子字符串。若沒(méi)有找到任何匹配的子串,則返回 null。如果找到了一個(gè)或多個(gè)匹配子串,則返回一個(gè)數(shù)組。不過(guò)全局匹配返回的數(shù)組的內(nèi)容與前者大不相同,它的數(shù)組元素中存放的是 stringObject 中所有的匹配子串,而且也沒(méi)有 index 屬性或 input 屬性。
示例:
不帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/; var result = url.match(reg); console.log(result); //["a=1", "a", "1", index: 21, input: "http://www.baidu.com?a=1&b=2&c=3"] console.log(result.index); //21 console.log(result.input); //http://www.baidu.com?a=1&b=2&c=3
帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/g; var result = url.match(reg); console.log(result); //["a=1", "b=2", "c=3"] console.log(result.index); //undefined console.log(result.input); //undefined
發(fā)現(xiàn)不一樣的地方了嗎,把函數(shù)描述好好讀一遍,就明白了^_^
2、replace函數(shù)
用法:stringObject.replace(regexp/substr,replacement)
返回值:一個(gè)新的字符串,是用 replacement 替換了 regexp 的第一次匹配或所有匹配之后得到的。
描述:字符串 stringObject 的 replace() 方法執(zhí)行的是查找并替換的操作。它將在 stringObject 中查找與 regexp 相匹配的子字符串,然后用 replacement 來(lái)替換這些子串。如果 regexp 具有全局標(biāo)志 g,那么 replace() 方法將替換所有匹配的子串。否則,它只替換第一個(gè)匹配子串。
replacement 可以是字符串,也可以是函數(shù)。如果它是字符串,那么每個(gè)匹配都將由字符串替換。但是 replacement 中的 $ 字符具有特定的含義。如下表所示,它說(shuō)明從模式匹配得到的字符串將用于替換。
字符 | 替換文本 |
---|---|
$1、$2、...、$99 | 與 regexp 中的第 1 到第 99 個(gè)子表達(dá)式相匹配的文本。 |
$& | 與 regexp 相匹配的子串。 |
$` | 位于匹配子串左側(cè)的文本。 |
$' | 位于匹配子串右側(cè)的文本。 |
$$ | 直接量符號(hào)。(意思就是要替換為 $ 符號(hào)的時(shí)候,就寫兩個(gè)$) |
示例:
不帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/; var url1 = url.replace(reg,function(a,b,c,d,e){ console.log(a,b,c,d,e); //a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 return 'ok'; }) console.log(url1); //http://www.baidu.com?ok&b=2&c=3
帶修飾符g
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/g; var url1 = url.replace(reg,function(a,b,c,d,e){ console.log(a,b,c,d,e); //執(zhí)行3次,分別輸出為:a=1, a, 1, 21, http://www.baidu.com?a=1&b=2&c=3 和 b=2, b, 2, 25, http://www.baidu.com?a=1&b=2&c=3 和 | c=3, c, 3, 29, http://www.baidu.com?a=1&b=2&c=3 return 'ok'; }) console.log(url1); //http://www.baidu.com?ok&ok&ok
第二個(gè)參數(shù)為字符串時(shí)
var url = 'http://www.baidu.com?a=1&b=2&c=3'; var reg = /([^?&=]+)=([^?&=])*/; //不帶修飾符g var url1 = url.replace(reg,"$&") console.log(url1); //http://www.baidu.com?a=1&b=2&c=3 var url1 = url.replace(reg,"$1") console.log(url1); //http://www.baidu.com?a&b=2&c=3 var url1 = url.replace(reg,"$2") console.log(url1); //http://www.baidu.com?1&b=2&c=3 var url1 = url.replace(reg,"$'") console.log(url1); //http://www.baidu.com?&b=2&c=3&b=2&c=3 var reg = /([^?&=]+)=([^?&=])*/g; //帶修飾符g var url1 = url.replace(reg,"$&") console.log(url1); //http://www.baidu.com?a=1&b=2&c=3 var url1 = url.replace(reg,"$1") console.log(url1); //http://www.baidu.com?a&b&c var url1 = url.replace(reg,"$2") console.log(url1); //http://www.baidu.com?1&2&3 var url1 = url.replace(reg,"$'") console.log(url1); //http://www.baidu.com?&b=2&c=3&&c=3&
以上所述是小編給大家介紹的全面解析JS字符串和正則表達(dá)式中的match、replace、exec等函數(shù),希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS正則截取兩個(gè)字符串之間及字符串前后內(nèi)容的方法
- JS使用正則截取兩個(gè)字符串之間的字符串實(shí)現(xiàn)方法詳解
- javascript將字符串中的多個(gè)空格替換為一個(gè)空格的正則實(shí)例
- JavaScript利用正則表達(dá)式替換字符串中的內(nèi)容
- JS判斷輸入的字符串是否是數(shù)字的方法(正則表達(dá)式)
- JS不用正則驗(yàn)證輸入的字符串是否為空(包含空格)的實(shí)現(xiàn)代碼
- String字符串匹配javascript 正則表達(dá)式
- javascript使用正則實(shí)現(xiàn)去掉字符串前面的所有0
相關(guān)文章
Layui實(shí)現(xiàn)帶查詢條件的分頁(yè)
這篇文章主要為大家詳細(xì)介紹了Layui實(shí)現(xiàn)帶查詢條件的分頁(yè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07JavaScript入門系列之知識(shí)點(diǎn)總結(jié)
JavaScript 是屬于網(wǎng)絡(luò)的腳本語(yǔ)言。本文是小編日常收集整理些javascript入門基礎(chǔ)知識(shí),對(duì)js新手朋友非常有幫助,對(duì)js入門知識(shí)點(diǎn)感興趣的朋友一起學(xué)習(xí)吧2016-03-03JavaScript實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單驗(yàn)證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-08-08Bootstrap基本樣式學(xué)習(xí)筆記之圖片(6)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之圖片基本樣式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12JavaScript Math對(duì)象和調(diào)試程序的方法分析
這篇文章主要介紹了JavaScript Math對(duì)象和調(diào)試程序的方法,結(jié)合實(shí)例形式分析了javascript中Math對(duì)象生成隨機(jī)數(shù)以及使用alert()、console.log()函數(shù)進(jìn)行錯(cuò)誤調(diào)試相關(guān)操作技巧,需要的朋友可以參考下2019-05-05Webpack設(shè)置環(huán)境變量的一些誤區(qū)詳解
這篇文章主要給大家介紹了關(guān)于Webpack設(shè)置環(huán)境變量的一些誤區(qū),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12js加強(qiáng)的經(jīng)典分頁(yè)實(shí)例
js加強(qiáng)的經(jīng)典分頁(yè)實(shí)例,需要的朋友可以參考一下2013-03-03