Javascript中正則表達(dá)式的應(yīng)用詳解
正則表達(dá)式 在前端中的應(yīng)用也是比較常見(jiàn)的,我們?cè)谟袝r(shí)候也需要 用js 對(duì)某些字符串進(jìn)行查找\捕獲 或者 替換. js 中正則表達(dá)式 一般應(yīng)用在string類(lèi)型和 RegExp 兩種類(lèi)型中。
string
search
search() 方法 用于檢索字符串中指定的子字符串,或檢索與正則表達(dá)式相匹配的子字符串,并返回子串的起始位置。
'Hello World!'.search(/world/i); // 6 返回匹配出的第一個(gè)字符串的開(kāi)始位置索引, //與 indexOf 方法類(lèi)似,但是 search方法 可以支持 正則表達(dá)式,功能更加強(qiáng)大
replace
修改某個(gè)字符串 將內(nèi)容中的某個(gè)子串 替換為其他內(nèi)容,可以支持字符串替換,也支持正則表達(dá)式替換,建議正則表達(dá)式替換,功能會(huì)更加強(qiáng)大。返回值為替換處理完成的字符串
// 1. 最簡(jiǎn)單的應(yīng)用,world 替換為 ljz 'Hello World!'.replace(/world/i,'ljz'); // 返回值('Hello ljz!') i模式可以忽略大小寫(xiě) // 2 如果要替換 的字符串為動(dòng)態(tài)字符串,并且可能包含特殊符號(hào) 比如 '?' 這樣構(gòu)造正則表達(dá)式, //如果包含特殊符號(hào)會(huì)影響正則匹配,會(huì)有可能匹配不到,所以可以考慮使用字符串替換. // 如下,要將src屬性為指定值 的 標(biāo)簽 加上classname屬性為 ‘a(chǎn)aaImg' const str = '/aaa/bbb?fileid=111'; '<img src="/aaa/bbb?fileid=111" ><h2>123</h2><p>444</p>'.replace(`src="${str}"`,`src="${str}" className="aaaImg"`); // 返回值('<img src="/aaa/bbb?fileid=111" className="aaaImg" ><h2>123</h2><p>444</p>') // 3. 上述情況如果只適用于替換一個(gè)字符串,如果我要替換的串是有多個(gè)呢,有兩種解決思路, 一是可以繼續(xù)使用字符串替換,可以使用replaceAll方法,用法與repalce相同,但是可以進(jìn)行全部替換,ie瀏覽器不支持repalceAll方法,如果要考慮兼容ie ,那就只能考慮第二種方式了。 // 使用正則表達(dá)式,正則表達(dá)式有全局模式,可以支持全部替換,就是需要對(duì)要構(gòu)造正則表達(dá)式的動(dòng)態(tài)字符串進(jìn)行處理一下,避免特殊符號(hào)影響匹配的情況。 // 可以先對(duì) 動(dòng)態(tài)字符串進(jìn)行轉(zhuǎn)碼,在對(duì)要處理的字符串進(jìn)行轉(zhuǎn)碼處理,然后進(jìn)行全局替換,替換完成再進(jìn)行解碼還原字符串就可以了。 '<img src="/aaa/bbb?fileid=111" ><h2>123</h2><p>444</p><img src="/aaa/bbb?fileid=111" >'; const regExp = new RegExp(encodeURIComponent('src="/aaa/bbb?fileid=111"'),'g'); const data = encodeURIComponent(dataStr).replace(regExp, decodeURIComponent('src="/aaa/bbb?fileid=111 className="aaaImg"')); decodeURIComponent(data); // 返回值('<img src="/aaa/bbb?fileid=111 className="aaaImg" ><h2>123</h2><p>444</p><img src="/aaa/bbb?fileid=111 className="aaaImg" >')
match:
string.match(regexp)
;可在字符串內(nèi)檢索指定的值,或找到一個(gè)或多個(gè)正則表達(dá)式的匹配。規(guī)定要匹配的模式的RegExp對(duì)象。如果該參數(shù)不是RegExp對(duì)象,則需要首先把它傳遞給RegExp構(gòu)造函數(shù),將其轉(zhuǎn)換為RegExp 對(duì)象,返回值為一個(gè)數(shù)組,里面存放匹配出的各項(xiàng)字符串。
var str=”The rain in SPAIN stays mainly in the plain ; var n=str.match(/ain/gi); // 輸出結(jié)果: ain,AlN,ain,ain ,match與 下面exec方法類(lèi)似,只不過(guò)match是字符串的方法,exec是 正則表達(dá)式的方 法。
RegExp
JavaScript中,RegExp對(duì)象是一個(gè)預(yù)定義了屬性和方法的正則表達(dá)式對(duì)象
test:
用于檢測(cè)一一個(gè)字符串是否匹配某個(gè)模式,如果字符串中含有匹配的文本,則返回true,否則返回false。
const reg = new RegEx//jz/); reg.test(hello ljz!); // true
exec:
用于檢索字符串中的正則表達(dá)式的匹配。該函數(shù)返回一個(gè)數(shù)組,其中存放匹配的結(jié)果。如果未找到匹配,則返回值為null。
// 最基本匹配 const reg1 = new RegExp(/ ljz)d+); // 匹配ljz后面攜帶數(shù)字的串 reg1.exec('cmasklnvjksdfbnk12345 6cdsnjkvbsdfhjjz123vbfsdhj)[0]; // 123 //捕獲對(duì)應(yīng)的字符串 // ()會(huì)把每個(gè)分組里的匹配的值保存起來(lái),exec得到一一個(gè)數(shù)組,此時(shí)捕獲分組會(huì)把匹配到的值保存起來(lái),從數(shù)組下標(biāo)[1]開(kāi)始依次存儲(chǔ) // [^]表示以此結(jié)束的串([^"]*) 就可以是捕獲分組以"結(jié)束的串 const reg2 = new RegExp(/id="([^"]*/); //要捕獲標(biāo)簽字符串中的id屬性值 reg2.exec("<img id=\"cFF2vAMVq" src=\"/aaa/bbb\"/>');//返回?cái)?shù)組。0為匹配到的字符串('d="cFF2vAMVq'),1為要捕獲的串('cFF2vAMVq')
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
JavaScript?異步函數(shù)?Promisification?處理詳情
這篇文章主要介紹了JavaScript異步函數(shù)Promisification處理詳情,文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊,和多項(xiàng)點(diǎn)擊功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11新浪微博字?jǐn)?shù)統(tǒng)計(jì) textarea字?jǐn)?shù)統(tǒng)計(jì)實(shí)現(xiàn)代碼
從新浪微博代碼里抄的,非常不錯(cuò),需要的朋友可以參考下。2011-08-08javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析
這篇文章主要介紹了javascript面向?qū)ο笾畉his關(guān)鍵詞用法分析,以實(shí)例形式分析了在不同場(chǎng)合下this使用中的特性及相關(guān)使用技巧,需要的朋友可以參考下2015-01-01js實(shí)現(xiàn)計(jì)時(shí)器秒表功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)計(jì)時(shí)器秒表功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-12-12