1. 方法簡介

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

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

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

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

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

2. replace()使用

2.1 replace(字符串,字符串)

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

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

但這個用法有一個問題：

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

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

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

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

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

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

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

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

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

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

2.3.1 簡單用法，正則表達式不使用分組

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

console.log(str);

解析：

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

replace()函數(shù)第一個參數(shù)是簡單正則表達式，第二個參數(shù)是函數(shù)時：

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

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

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

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

console.log(str);

我們可以看到，輸出了2個Arguments，因為我們使用全局匹配g后，會match到2個項，所以就執(zhí)行了2次function。
第一個跟前邊一樣，第二個arugments的索引位置是10，因為源字符串中第二個‘背景’的索引是10.

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

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ù)雜用法，正則表達式使用分組

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

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

console.log(txt);

輸出結(jié)果是：　

replace()函數(shù)第一個參數(shù)是分組正則表達式，第二個參數(shù)是函數(shù)時：

• arguments[0]是匹配到的子字符串
• arguments[1]是匹配到的第1個分組項
• arguments[2]是匹配到的第2個分組項
• arguments[3]是匹配到的字符串的索引位置
• arguments[4]是源字符串本身

總結(jié)

到此這篇關(guān)于JavaScript中replace()函數(shù)的文章就介紹到這了,更多相關(guān)JS的replace()函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論