在 JS 最新的提案 String.prototype.replaceAll() 中，它将replaceAll()方法用于字符串。
在该提案还没出来之前，我们来看看在 JS 中有哪些方法可以实现 reaplceAll 的效果。
第一种:利用 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/gconst 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`所匹配到的结果。
虽然正则表达式更换了所有涌现的字符串，但在我看来，这种方法过于繁琐。
2.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.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'，这是大略明了的办理方案。
3.1 replaceAll()与replace()的差异
字符串方法replaceAll(search, replaceWith)和replace(search, replaceWith)的行为办法是一样的，除了两件事:
如果search参数是一个字符串，那么replaceAll()用replaceWith更换所有涌现的search，而replace()只更换第一次涌现的search。2.如果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来利用这个方法。
你还知道其他更换所有字符串涌现的方法吗?欢迎留言谈论。
作者： Dmitri Pavlutin 译者：前端小智 来源：dmitripavlutin
原文：https://dmitripavlutin.com/replace-all-string-occurrences-javascript/
