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

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

点赞再看，养成习惯

本文 GitHub https://github.com/qq44924588… 上已经收录，更多往期高赞文章的分类，也整理了很多我的文档，和教程资料。欢迎 Star 和完善，大家面试可以参照考点复习，希望我们一起有点东西。

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

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)的行为方式是一样的，除了两件事:

1. 如果 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 来使用这个方法。

你还知道其他替换所有字符串出现的方法吗? 欢迎留言讨论。

原文：https://dmitripavlutin.com/re…

代码部署后可能存在的 BUG 没法实时知道，事后为了解决这些 BUG，花了大量的时间进行 log 调试，这边顺便给大家推荐一个好用的 BUG 监控工具 Fundebug。

交流

干货系列文章汇总如下，觉得不错点个 Star，欢迎 加群 互相学习。

https://github.com/qq44924588…

我是小智，公众号「大迁世界」作者，对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复 福利，即可看到福利，你懂的。