快捷導(dǎo)航

Javascript中正則表達(dá)式的應(yīng)用詳解

更新時(shí)間：2022年02月18日 09:21:27 作者：愛學(xué)習(xí)的ljz

這篇文章主要為大家詳細(xì)介紹了Javascript中正則表達(dá)式的應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

string

search

search() 方法用于檢索字符串中指定的子字符串，或檢索與正則表達(dá)式相匹配的子字符串，并返回子串的起始位置。

'Hello World!'.search(/world/i);  // 6  返回匹配出的第一個(gè)字符串的開始位置索引，
//與 indexOf 方法類似，但是 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模式可以忽略大小寫
// 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方法類似，只不過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è)分組里的匹配的值保存起來，exec得到一一個(gè)數(shù)組，此時(shí)捕獲分組會(huì)把匹配到的值保存起來，從數(shù)組下標(biāo)[1]開始依次存儲(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')