在 JavaScript 中替换所有指定字符 3 种方法

作者： Dmitri Pavlutin 译者：前端小智 来源：dmitripavlutin

在 JS 没有提供一种简便的方法来替换所有指定字符。 在 Java 中有一个 replaceAll() ， replaceAll(String regex, String replacement)) 方法使用给定的参数 replacement 替换字符串所有匹配给定的正则表达式的子字符串。

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

在该提案还没出来之前，我们来看看在 JS 中有哪些方法可以实现 reaplceAll 的效果。

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

这种方法，主要包含二个阶段：

1. 使用 split 方法，根据指定的字符将字符串分成多个部分。
2. 然后使用 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 出现的情况，然后使用 replaceWit h字符串替换所有匹配项。

必须启用正则表达式上的全局标志，才能使 replace() 方法替换模式出现的所有内容，我们可以这样做：

1. 在正则表达式文字中，将 g 附加到标志部分： /search/g 。
2. 对于正则表达式构造函数，使用 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`所匹配到的结果。

虽然正则表达式替换了所有出现的字符串，但在我看来，这种方法过于繁琐。

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);