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

在 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出现的情况,然后使用replaceWith字符串替换所有匹配项 。
必须启用正则表达式上的全局标志,才能使replace()方法替换模式出现的所有内容,我们可以这样做:
  1. 在正则表达式文字中,将g附加到标志部分:/search/g 。
  2. 对于正则表达式构造函数,使用 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 的字符串中 。


推荐阅读