作者: Dmitri Pavlutin 译者:前端小智 来源:dmitripavlutin
在 JS 没有提供一种简便的方法来替换所有指定字符。 在 Java 中有一个 replaceAll()
,replaceAll(String regex, String replacement))
方法使用给定的参数 replacement 替换字符串所有匹配给定的正则表达式的子字符串。
在 JS 最新的提案 String.prototype.replaceAll() 中,它将replaceAll()
方法用于字符串。
在该提案还没出来之前,我们来看看在 JS 中有哪些方法可以实现 reaplceAll
的效果。
split
和 join
的方法这种方法,主要包含二个阶段:
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'
这种方法需要将字符串转换为数组,然后再转换回字符串。这是一种变通方法,但不是一个好的解决方案。
replace()
String.prototype。replace(regExp, replaceWith)
搜索正则表达式regExp
出现的情况,然后使用replaceWit
h字符串替换所有匹配项。
必须启用正则表达式上的全局标志,才能使replace()
方法替换模式出现的所有内容,我们可以这样做:
g
附加到标志部分:/search/g
。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`所匹配到的结果。
虽然正则表达式替换了所有出现的字符串,但在我看来,这种方法过于繁琐。
当在运行时确定搜索字符串时,使用正则表达式方法不方便。 从字符串创建正则表达式时,必须转义字符-[] / {}()* +? 。 \ ^ $ |
,示例如下:
const search = '+'
const searchRegExp = new RegExp(search, 'g') // // 抛出 SyntaxError 异常
const replaceWith = '-'
const result = '5+2+1',replace(searchRegExp, replaceWith )
上面的代码片段尝试将搜索字符串'+'
转换为正则表达式。 但是'+
'是无效的正则表达式,因此会引发SyntaxError: Invalid regular expression: /+/
异常。
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'
。
最后,新的提案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'
,这是简单明了的解决方案。
replaceAll()
与replace()
的区别字符串方法replaceAll(search, replaceWith)
和replace(search, replaceWith)
的行为方式是一样的,除了两件事:
search
参数是一个字符串,那么replaceAll()
用replaceWith
替换所有出现的search
,而replace()
只替换第一次出现的search
。2.如果search
参数是一个非全局正则表达式,那么replaceAll()
将抛出一个TypeError
异常。
替换所有出现的字符串应该很容易。 但是,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来使用这个方法。
你还知道其他替换所有字符串出现的方法吗?欢迎留言讨论。