本文轉載自微信公眾號「大遷世界」，轉載本文請聯系大遷世界公眾號。

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

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

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

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

這種方法，主要包含二個階段：

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

例如，我們將字符串'1+2+3'中的+替換為-。首先，通過split方法根據 +分割符將'1+2+3'分開，得到['1'，'2'，'3']。然后通過 join 方法并指定連接字條-，得到結果'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'。

最后我們把這種方式封裝成一個幫助函數 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' 

這種方法需要將字符串轉換為數組，然后再轉換回字符串。這是一種變通方法，但不是一個好的解決方案。

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

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

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

• 在正則表達式文字中，將g附加到標志部分：/search/g。
• 對于正則表達式構造函數，使用 flags 參數: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' 

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

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

通過向正則表達式添加i標志，可以忽略大小寫：

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

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

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

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

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

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

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

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

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

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

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'的首次出現替換為'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')將所有出現的'duck'字符串替換為'goose'，這是簡單明了的解決方案。

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

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

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

4. 總結

替換所有出現的字符串應該很容易。 但是，JavaScript 很久一段時間沒有提供這種方法。

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

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

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

最后

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

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