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