JS正則表達式替換字符串replace()方法實例代碼
replace()方法介紹
replace()方法執(zhí)行搜索替換操作。
它接收一個正則表達式作為第一個參數(shù), 接收一個替換字符串作為第二個參數(shù)。
它搜索調(diào)用它的字符串, 尋找與指定模式匹配的文本。
如果正則表達式帶g
標志, replace()
方法會替換字符串中的所有匹配項; 否則, 它只替換第一個匹配項。
如果replace()方法的第一個參數(shù)是一個字符串而非正則表達式, 這個方法會按照字面值進行搜索。
簡單用法
let text = 'my name is hu,you NAME is zhang'; // 因為字符串是不可修改的對象所以要賦值給一個新變量, 也可以對其重新賦值 text = text.replace(/name/gi,'like'); // 標志g表示全局匹配,標志i表示不區(qū)分大小寫 console.log(text); // my like is hu,you like is zhang
不過replace()方法的能力遠不止這些。比如在正則表達式中用括號()分組的子表達式是從左到右編號的, 而且正則表達式能記住每個子表達式匹配的文本。如果替換字符串中出現(xiàn)了$
符號后面跟一個數(shù)字(例如$1
代表第一組子表達式), replace()會將這兩個字符替換為指定的子表達式匹配的文本。
let str = 'abcdeABCDE'; // 其中$1代表第一組(b),$2代表第二組(c) str = str.replace(/(b)(c)/gi,'b$1bc$2c'); // 給b兩邊來個b,給c兩邊來個c console.log(str); // abbbcccdeAbBbcCcDE
如果正則表達式中使用的是命名捕獲組, 則可以通過名字而非數(shù)字來引用匹配的文本, 如果使用命名捕獲組就要把名字寫到$<名字>中:
let str = 'abcdABCD'; str = str.replace(/(?<group1>bc)/gi,'[$<group1>]'); // 給bc套個中括號 console.log(str); // a[bc]dA[BC]D
重點:函數(shù)替換
除了給replace()的第二個參數(shù)傳替換字符串, 還可以傳一個函數(shù), 這個函數(shù)會被調(diào)用然后用來計算替換的值, 如果匹配到多個值則會對每個值進行一次計算替換。這個替換函數(shù)在被調(diào)用時會接收幾個參數(shù), 第一個參數(shù)是匹配的整個文本:
let str = '小明有-100元,小李有5元,小張有-10元'; // 對其中的錢進行絕對值操作 str = str.replace(/-?\d+/g,function(s){ let num = parseInt(s); if(num < 0){ // 如果小于0就讓它乘-1 num *= -1; } // 返回結(jié)果對其進行替換 return num; }) console.log(str); // 小明有100元,小李有5元,小張有10元
然后, 如果正則表達式有捕獲組, 則后面幾個參數(shù)分別是這些捕獲組匹配的子字符串。對以上代碼進行修改:
let str = '小明有-100元,小李有5元,小張有-10元'; // 對其中的錢進行絕對值操作 str = str.replace(/(\d+)|(-\d+)/g,function(s,first,last){ // s代表匹配的整個字符串,first代表第一組為正數(shù),last代表第二組為負數(shù) if(first){ // 如果正數(shù)直接返回 return first; }else{ // 如果負數(shù)讓其乘-1 return parseInt(last)*-1; } }) console.log(str); // 小明有100元,小李有5元,小張有10元
補充:替換特殊字符
要替換特殊字符,例如 -/\\^$*+?.()|[]{}),需要使用反斜杠對其轉(zhuǎn)義。
如果給定字符串 this\\-is\\-my\\-url,要求把所有轉(zhuǎn)義的減號( \\-)替換為未轉(zhuǎn)義的減號(-)。
可以用 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
在第二個例子中不必用反斜杠來轉(zhuǎn)義反斜杠。
總結(jié)
到此這篇關(guān)于JS正則表達式替換字符串replace()方法的文章就介紹到這了,更多相關(guān)JS正則替換字符串replace()內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化)
這篇文章主要介紹了使用JavaScript 實現(xiàn)時間軸與動畫效果的示例代碼(前端組件化),本文重點給大家介紹基礎(chǔ)的動畫類實現(xiàn)時間軸,通過示例代碼給大家介紹的很詳細,需要的朋友可以參考下2021-04-04JavaScript實現(xiàn)的七種排序算法總結(jié)(推薦?。?/a>
這篇文章主要給大家介紹了關(guān)于JavaScript實現(xiàn)的七種排序算法的相關(guān)資料,七種排序算法分別是:冒泡排序、選擇排序、插入排序、希爾排序、堆排序、快速排序以及歸并排序,需要的朋友可以參考下2021-07-07JavaScript實現(xiàn)獲取年月日時間的方法總結(jié)
這篇文章主要為大家學習介紹了JavaScript如何實現(xiàn)獲取年月日以及各種格式的時間,文中的示例代碼簡潔易懂,感興趣的小伙伴可以了解一下2023-08-08