JavaScript 中怎么替換所有指定字符

JavaScript 中怎么替換所有指定字符，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

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

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

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

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

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

• 使用 split 方法，根據(jù)指定的字符將字符串分成多個部分。

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

例如，我們將字符串'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'。

最后我們把這種方式封裝成一個幫助函數(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)換回字符串。這是一種變通方法，但不是一個好的解決方案。

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

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

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

• 在正則表達式文字中，將g附加到標(biāo)志部分：/search/g。

• 對于正則表達式構(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'

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

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

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

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

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

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

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

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

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

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

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

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

如果replace(search, replaceWith)的第一個參數(shù)是字符串，那么該方法只替換search的第一個結(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'，這是簡單明了的解決方案。

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

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

• 如果search參數(shù)是一個字符串，那么replaceAll()用replaceWith替換所有出現(xiàn)的search，而replace()只替換第一次出現(xiàn)的search。

• 如果search參數(shù)是一個非全局正則表達式，那么replaceAll()將拋出一個TypeError 異常。

看完上述內(nèi)容，你們掌握J(rèn)avaScript 中怎么替換所有指定字符的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！