本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。

在 JS 沒有提供一種簡(jiǎn)便的方法來替換所有指定字符。 在 Java 中有一個(gè) replaceAll() ，replaceAll(String regex, String replacement))方法使用給定的參數(shù) replacement 替換字符串所有匹配給定的正則表達(dá)式的子字符串。

在 JS 最新的提案String.prototype.replaceAll() 中，它將replaceAll()方法用于字符串。

在該提案還沒出來之前，我們來看看在 JS 中有哪些方法可以實(shí)現(xiàn) reaplceAll 的效果。

第一種:使用 split 和 join 的方法

這種方法，主要包含二個(gè)階段：

• 使用 split 方法，根據(jù)指定的字符將字符串分成多個(gè)部分。
• 然后使用 join 方法將分割的多個(gè)部分連接在一直，并在它們之間插入指定的字符。

例如，我們將字符串'1+2+3'中的+替換為-。首先，通過split方法根據(jù) +分割符將'1+2+3'分開，得到['1'，'2'，'3']。然后通過 join 方法并指定連接字條-，得到結(jié)果'1-2-3'。示例如下：

const search = 'duck'; 
const replaceWith = 'goose'; 
 
const result = 'duck duck go'.split(search).join(replaceWith); 
 
result; // => 'goose goose go' 

'duck duck go'.split('duck')將字符串分割成幾段：['', ' ', ' go']。['', ' ', ' go'].join('goose') 在元素之間插入'goose'并連接起來，得到'goose goose go'。

最后我們把這種方式封裝成一個(gè)幫助函數(shù) replaceAll：

function replaceAll(string, search, replace) { 
  return string.split(search).join(replace); 
} 
 
replaceAll('abba', 'a', 'i');          // => 'ibbi' 
replaceAll('go go go!', 'go', 'move'); // => 'move move move!' 
replaceAll('oops', 'z', 'y');          // => 'oops' 

這種方法需要將字符串轉(zhuǎn)換為數(shù)組，然后再轉(zhuǎn)換回字符串。這是一種變通方法，但不是一個(gè)好的解決方案。

2. 使用全局正則表達(dá)式replace()

String.prototype。replace(regExp, replaceWith)搜索正則表達(dá)式regExp出現(xiàn)的情況，然后使用replaceWith字符串替換所有匹配項(xiàng)。

必須啟用正則表達(dá)式上的全局標(biāo)志，才能使replace()方法替換模式出現(xiàn)的所有內(nèi)容，我們可以這樣做：

• 在正則表達(dá)式文字中，將g附加到標(biāo)志部分：/search/g。
• 對(duì)于正則表達(dá)式構(gòu)造函數(shù)，使用 flags 參數(shù):new RegExp('search'， 'g')

我們把所有的duck換成goose：

const searchRegExp = /duck/g 
const replaceWith = 'goose' 
 
const result = 'duck duck go'.replace(searchRegExp, replaceWith) 
 
result // 'goose goose go' 

正則表達(dá)式文字/duck/g與'duck'字符串匹配，并且啟用了全局模式。

'duck duck go'.replace(/duck/g, 'goose')用'goose'替換所有匹配/duck/g字符串。

通過向正則表達(dá)式添加i標(biāo)志，可以忽略大小寫：

const searchRegExp = /duck/gi; 
const replaceWith = 'goose'; 
 
const result = 'DUCK duck go'.replace(searchRegExp, replaceWith); 
 
result; // => 'goose goose go' 

再次查看正則表達(dá)式：/duck/gi。 正則表達(dá)式啟用了不區(qū)分大小寫的搜索：i和全局標(biāo)志g。 /duck/gi匹配'duck'，以及'DUCK'，'Duck'等。

'DUCK duck go'.replace(/duck/gi, 'goose')以不區(qū)分大小寫的方式用'goose'替換了/duck/gi`所匹配到的結(jié)果。

雖然正則表達(dá)式替換了所有出現(xiàn)的字符串，但在我看來，這種方法過于繁瑣。

(1) 字符串中的正則表達(dá)式

當(dāng)在運(yùn)行時(shí)確定搜索字符串時(shí)，使用正則表達(dá)式方法不方便。 從字符串創(chuàng)建正則表達(dá)式時(shí)，必須轉(zhuǎn)義字符-[] / {}()* +? 。 \ ^ $ |，示例如下：

const search = '+' 
 
const searchRegExp = new RegExp(search, 'g') // // 拋出 SyntaxError 異常 
const replaceWith = '-' 
 
const result = '5+2+1',replace(searchRegExp, replaceWith ) 

上面的代碼片段嘗試將搜索字符串'+'轉(zhuǎn)換為正則表達(dá)式。 但是'+'是無效的正則表達(dá)式，因此會(huì)引發(fā)SyntaxError: Invalid regular expression: /+/異常。

(2) 字符串的 replace() 方法

如果replace(search, replaceWith)的第一個(gè)參數(shù)是字符串，那么該方法只替換search的第一個(gè)結(jié)果。

const search = 'duck'; 
const replaceWith = 'goose'; 
 
const result = 'duck duck go'.replace(search, replaceWith); 
 
result; // => 'goose duck go' 

'duck duck go'.replace('duck'，'goose')僅將'duck'的首次出現(xiàn)替換為'goose'。

3. replaceAll() 方法

最后，新的提案

String.prototype.replaceAll()(在第3階段)將replaceAll()方法引入到 JavaScript 的字符串中。

replaceAll(search, replaceWith)字符串方法用replaceWith替換所有的search字符串，沒有任何變通方法。

我們把所有的duck換成goose：

const search = 'duck' 
const replaceWith = 'goose'; 
 
const result = 'duck duck go'.replaceAll(search, replaceWith); 
 
result; // => 'goose goose go' 

'duck duck go'.replaceAll('duck', 'goose')將所有出現(xiàn)的'duck'字符串替換為'goose'，這是簡(jiǎn)單明了的解決方案。

(1) replaceAll()與replace()的區(qū)別

字符串方法replaceAll(search, replaceWith)和replace(search, replaceWith)的行為方式是一樣的，除了兩件事:

• 如果search參數(shù)是一個(gè)字符串，那么replaceAll()用replaceWith替換所有出現(xiàn)的search，而replace()只替換第一次出現(xiàn)的search。
• 如果search參數(shù)是一個(gè)非全局正則表達(dá)式，那么replaceAll()將拋出一個(gè)TypeError 異常。

4. 總結(jié)

替換所有出現(xiàn)的字符串應(yīng)該很容易。 但是，JavaScript 很久一段時(shí)間沒有提供這種方法。

一種方法是通過搜索字符串將字符串拆分為多個(gè)塊，將字符串重新連接，然后在塊之間放置替換字符串：string.split(search).join(replaceWith)。 這種方法有效，但是很麻煩。

另一種方法是將String.prototype.replace()與啟用了全局搜索的正則表達(dá)式一起使用：string.replace(/SEARCH/g, replaceWith)。

不幸的是，由于必須轉(zhuǎn)義正則表達(dá)式的特殊字符，因此在運(yùn)行時(shí)無法輕松地從字符串生成正則表達(dá)式。 處理正則表達(dá)式以簡(jiǎn)單地替換字符串的方法非常麻煩。

最后

String.prototype.replaceAll()方法可以輕松地直接替換所有出現(xiàn)的字符串：string.replaceAll(search, replaceWith)。 這是第3階段的提案，但希望很快就會(huì)納入新的JavaScript標(biāo)準(zhǔn)。

我的建議是使用replaceAll()來替換字符串。但你需要一個(gè)polyfill來使用這個(gè)方法。