快捷導(dǎo)航

一文詳解JavaScript中的replace()函數(shù)

更新時(shí)間：2023年01月09日 09:03:17 作者：南梔~zmt

replace方法的語(yǔ)法是stringObj.replace(rgExp, replaceText),其中stringObj是字符串(string),下面這篇文章主要給大家介紹了關(guān)于JavaScript中replace()函數(shù)的相關(guān)資料,需要的朋友可以參考下

1. 方法簡(jiǎn)介

該方法的簽名是：replace([RegExp|String],[String|Function])。

該方法返回一個(gè)新的字符串，但并不改變字符串本身。

該方法接收2個(gè)參數(shù)，

第一個(gè)參數(shù)可以是字符串，也可以是一個(gè)正則表達(dá)式；

第二個(gè)參數(shù)可以是一個(gè)字符串，也可以是一個(gè)函數(shù)。

2. replace()使用

2.1 replace(字符串,字符串)

假如我們有一個(gè)字符串中出現(xiàn)了錯(cuò)別字”背景“，需要用”北京“來(lái)替換，那么我們可以如下搞定：

let str = '我愛(ài)背景天安門(mén)';
str = str.replace('背景','北京');
console.log(str);   // 輸出結(jié)果：我愛(ài)北京天安門(mén)

但這個(gè)用法有一個(gè)問(wèn)題：

let str = '我愛(ài)背景天安門(mén)，但是背景霧霾太嚴(yán)重';
str = str.replace('背景','北京');
// 輸出結(jié)果：我愛(ài)北京天安門(mén)，但是背景霧霾太嚴(yán)重
console.log(str);

我們發(fā)現(xiàn)，如果字符串str中有多個(gè)待替換的子串，比如本例中的“背景”，出現(xiàn)了2次，那么replace()方法只能給我們用目標(biāo)字符串(北京）替換掉第1次出現(xiàn)的"背景"。

如果想把所有的"背景"都給替換了，就必須調(diào)用多次。

此使用方法bug： 只能替換一次多次替換需要多次調(diào)用

2.2 replace(正則表達(dá)式,字符串)

let str = '我愛(ài)背景天安門(mén)，但是背景霧霾太嚴(yán)重';
str = str.replace(/背景/g,'北京');
// 輸出結(jié)果：我愛(ài)北京天安門(mén)，但是北京霧霾太嚴(yán)重
console.log(str);

這里需要說(shuō)明的是，str.replace(/背景/g,“北京”)的第一個(gè)參數(shù) ”/背景/g“ 是一個(gè)正則表達(dá)式，使用/ /的正則寫(xiě)法是JavaScript中正則表達(dá)式的字面量寫(xiě)法。
在此處，正則表達(dá)式的末尾有個(gè)g，它表示match源字符串str中所有匹配項(xiàng)。
這里如果沒(méi)有g(shù)，那么也只能匹配到第一個(gè)錯(cuò)別字”背景“，只有加了這個(gè)g，才能匹配到所有的”背景“。

2.3 replace(正則表達(dá)式,function(){})

以上的用法還是比較直觀的，但是能實(shí)現(xiàn)的功能也比較簡(jiǎn)單，如果需要做一些復(fù)雜的字符串替換運(yùn)算，那么就需要使用較為高級(jí)（復(fù)雜）的用法，就是正則+function 的用法。說(shuō)白了就是第一參數(shù)傳一個(gè)正則表達(dá)式，我們下面稱之為RegArg；第二個(gè)參數(shù)給一個(gè)函數(shù)，我們下面稱之為FuncArg。這也是replace()的核心用法。

本質(zhì) ：對(duì)str使用RegArg做match()匹配，如果匹配到多項(xiàng)結(jié)果（比如使用了全局匹配g，或者分組），那么每一個(gè)匹配結(jié)果都將執(zhí)行一次FuncArg函數(shù)，并且用該函數(shù)的返回值替代源字符串中的匹配項(xiàng)。

2.3.1 簡(jiǎn)單用法，正則表達(dá)式不使用分組

let str = '我愛(ài)背景天安門(mén)，但是背景霧霾太嚴(yán)重';
str = str.replace(/背景/,function(){
    console.log(arguments);
    return '北京'
});

console.log(str);

解析：

本例的目的是：把原字符串中的’背景’，替換為’北京’。
正則表達(dá)式?jīng)]有使用全局匹配符g，所以只替換了源字符串中第一個(gè)‘背景’子串，F(xiàn)uncArg只執(zhí)行了一次。

replace()函數(shù)第一個(gè)參數(shù)是簡(jiǎn)單正則表達(dá)式，第二個(gè)參數(shù)是函數(shù)時(shí)：

這個(gè)函數(shù)是有參數(shù)的，而且這些參數(shù)是默認(rèn)的。

arguments[0]是匹配到的子字符串
arguments[1]是匹配到的子串的索引位置
arguments[2]是源字符串本身

.本例如果想替換所有的‘背景’為‘北京’，只需要讓正則表達(dá)式后加個(gè)g。

let str = '我愛(ài)背景天安門(mén)，但是背景霧霾太嚴(yán)重';
str = str.replace(/背景/g,function(){
    console.log(arguments);
    return '北京'
});

console.log(str);

我們可以看到，輸出了2個(gè)Arguments，因?yàn)槲覀兪褂萌制ヅ鋑后，會(huì)match到2個(gè)項(xiàng)，所以就執(zhí)行了2次function。
第一個(gè)跟前邊一樣，第二個(gè)arugments的索引位置是10，因?yàn)樵醋址械诙€(gè)‘背景’的索引是10.

eg：把捐款是100元以下的金額數(shù)用‘**’來(lái)替換掉。

var txt ='劉菲:50元。張常成:150元。孫玉杰:200元。李明軒:20元。李子豪:1500元。';
txt = txt.replace(/\d+/g,function(){
    console.log(arguments);
    return arguments[0].length > 2 ? arguments[0] : '**';
});

console.log(txt);

2.3.2 復(fù)雜用法，正則表達(dá)式使用分組

eg：這個(gè)例子的意圖是：把所有以“萬(wàn)”為單位的捐款，其金額改為‘元’。比如：4萬(wàn)，改為40000元

var txt ='劉菲:5萬(wàn)。張常成:5000元。孫玉杰:2000元。李明軒:20萬(wàn)。李子豪:8500元。';
txt = txt.replace(/(\d+)(萬(wàn))/g,function(){
    console.log(arguments);
    return arguments[1] + '0000' + '元';
});

console.log(txt);

輸出結(jié)果是：　