JS正則表達(dá)式替換字符串replace()方法實(shí)例代碼
replace()方法介紹
replace()方法執(zhí)行搜索替換操作。
它接收一個(gè)正則表達(dá)式作為第一個(gè)參數(shù), 接收一個(gè)替換字符串作為第二個(gè)參數(shù)。
它搜索調(diào)用它的字符串, 尋找與指定模式匹配的文本。
如果正則表達(dá)式帶g標(biāo)志, replace()方法會(huì)替換字符串中的所有匹配項(xiàng); 否則, 它只替換第一個(gè)匹配項(xiàng)。
如果replace()方法的第一個(gè)參數(shù)是一個(gè)字符串而非正則表達(dá)式, 這個(gè)方法會(huì)按照字面值進(jìn)行搜索。
簡單用法
let text = 'my name is hu,you NAME is zhang'; // 因?yàn)樽址遣豢尚薷牡膶?duì)象所以要賦值給一個(gè)新變量, 也可以對(duì)其重新賦值 text = text.replace(/name/gi,'like'); // 標(biāo)志g表示全局匹配,標(biāo)志i表示不區(qū)分大小寫 console.log(text); // my like is hu,you like is zhang
不過replace()方法的能力遠(yuǎn)不止這些。比如在正則表達(dá)式中用括號(hào)()分組的子表達(dá)式是從左到右編號(hào)的, 而且正則表達(dá)式能記住每個(gè)子表達(dá)式匹配的文本。如果替換字符串中出現(xiàn)了$符號(hào)后面跟一個(gè)數(shù)字(例如$1代表第一組子表達(dá)式), replace()會(huì)將這兩個(gè)字符替換為指定的子表達(dá)式匹配的文本。
let str = 'abcdeABCDE'; // 其中$1代表第一組(b),$2代表第二組(c) str = str.replace(/(b)(c)/gi,'b$1bc$2c'); // 給b兩邊來個(gè)b,給c兩邊來個(gè)c console.log(str); // abbbcccdeAbBbcCcDE
如果正則表達(dá)式中使用的是命名捕獲組, 則可以通過名字而非數(shù)字來引用匹配的文本, 如果使用命名捕獲組就要把名字寫到$<名字>中:
let str = 'abcdABCD'; str = str.replace(/(?<group1>bc)/gi,'[$<group1>]'); // 給bc套個(gè)中括號(hào) console.log(str); // a[bc]dA[BC]D
重點(diǎn):函數(shù)替換
除了給replace()的第二個(gè)參數(shù)傳替換字符串, 還可以傳一個(gè)函數(shù), 這個(gè)函數(shù)會(huì)被調(diào)用然后用來計(jì)算替換的值, 如果匹配到多個(gè)值則會(huì)對(duì)每個(gè)值進(jìn)行一次計(jì)算替換。這個(gè)替換函數(shù)在被調(diào)用時(shí)會(huì)接收幾個(gè)參數(shù), 第一個(gè)參數(shù)是匹配的整個(gè)文本:
let str = '小明有-100元,小李有5元,小張有-10元';
// 對(duì)其中的錢進(jìn)行絕對(duì)值操作
str = str.replace(/-?\d+/g,function(s){
let num = parseInt(s);
if(num < 0){
// 如果小于0就讓它乘-1
num *= -1;
}
// 返回結(jié)果對(duì)其進(jìn)行替換
return num;
})
console.log(str); // 小明有100元,小李有5元,小張有10元
然后, 如果正則表達(dá)式有捕獲組, 則后面幾個(gè)參數(shù)分別是這些捕獲組匹配的子字符串。對(duì)以上代碼進(jìn)行修改:
let str = '小明有-100元,小李有5元,小張有-10元';
// 對(duì)其中的錢進(jìn)行絕對(duì)值操作
str = str.replace(/(\d+)|(-\d+)/g,function(s,first,last){
// s代表匹配的整個(gè)字符串,first代表第一組為正數(shù),last代表第二組為負(fù)數(shù)
if(first){
// 如果正數(shù)直接返回
return first;
}else{
// 如果負(fù)數(shù)讓其乘-1
return parseInt(last)*-1;
}
})
console.log(str); // 小明有100元,小李有5元,小張有10元
補(bǔ)充:替換特殊字符
要替換特殊字符,例如 -/\\^$*+?.()|[]{}),需要使用反斜杠對(duì)其轉(zhuǎn)義。
如果給定字符串 this\\-is\\-my\\-url,要求把所有轉(zhuǎn)義的減號(hào)( \\-)替換為未轉(zhuǎn)義的減號(hào)(-)。
可以用 replace() 做到:
const myUrl = 'this\-is\-my\-url'; const newUrl = myMessage.replace(/\\-/g, '-'); console.log(newUrl); // this-is-my-url
或者用new Regexp():
const myUrl = 'this\-is\-my\-url';
const newUrl = myUrl.replace(new RegExp('\-', 'g'), '-');
console.log(newUrl); // this-is-my-url
在第二個(gè)例子中不必用反斜杠來轉(zhuǎn)義反斜杠。
總結(jié)
到此這篇關(guān)于JS正則表達(dá)式替換字符串replace()方法的文章就介紹到這了,更多相關(guān)JS正則替換字符串replace()內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
基于Nuxt.js項(xiàng)目的服務(wù)端性能優(yōu)化與錯(cuò)誤檢測(cè)(容錯(cuò)處理)
這篇文章主要介紹了基于Nuxt.js項(xiàng)目的服務(wù)端性能優(yōu)化與錯(cuò)誤檢測(cè)(容錯(cuò)處理),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程
這篇文章主要介紹了三分鐘學(xué)會(huì)用ES7中的Async/Await進(jìn)行異步編程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
javascript正則表達(dá)式中的replace方法詳解
replace方法的語法是:stringObj.replace(rgExp, replaceText) 其中stringObj是字符串(string),reExp可以是正則表達(dá)式對(duì)象(RegExp)也可以是字符串(string),replaceText是替代查找到的字符串。。2015-04-04
頁面載入結(jié)束自動(dòng)調(diào)用js函數(shù)示例
當(dāng)頁面加載完成后自動(dòng)調(diào)用預(yù)先編好的js函數(shù),在某些特殊情況下還是比較實(shí)用的,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-09-09
JS實(shí)現(xiàn)自動(dòng)定時(shí)切換的簡潔網(wǎng)頁選項(xiàng)卡效果
這篇文章主要介紹了JS實(shí)現(xiàn)自動(dòng)定時(shí)切換的簡潔網(wǎng)頁選項(xiàng)卡效果,涉及JavaScript基于時(shí)間函數(shù)定時(shí)觸發(fā)遍歷函數(shù)實(shí)現(xiàn)定時(shí)切換功能,需要的朋友可以參考下2015-10-10
20條學(xué)習(xí)javascript的編程規(guī)范的建議
本文總結(jié)了20條javascript的編程規(guī)范,都是平時(shí)項(xiàng)目中使用的時(shí)候需要注意的地方,這里推薦給大家,如對(duì)大家有所幫助,那便是極好的了。2014-11-11

