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)行搜索。
簡(jiǎ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)文章
使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實(shí)現(xiàn)時(shí)間軸與動(dòng)畫效果的示例代碼(前端組件化),本文重點(diǎn)給大家介紹基礎(chǔ)的動(dòng)畫類實(shí)現(xiàn)時(shí)間軸,通過示例代碼給大家介紹的很詳細(xì),需要的朋友可以參考下2021-04-04

JavaScript實(shí)現(xiàn)獲取年月日時(shí)間的方法總結(jié)

BootStrap Fileinput上傳插件使用實(shí)例代碼

JS實(shí)現(xiàn)很酷的水波文字特效實(shí)例