在 JavaScript 中替换所有指定字符 3 种方法
本文转载自微信公众号「大迁世界」,中替转载本文请联系大迁世界公众号。定字
在 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 goduck 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/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`所匹配到的结果。
虽然正则表达式替换了所有出现的字符串,但在我看来,这种方法过于繁琐。
(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) 字符串的 replace() 方法
如果replace(search, replaceWith)的第一个参数是字符串,那么该方法只替换search的第一个结果。
const search = duck; const replaceWith = goose; const result = duck duck go.replace(search, replaceWith); result; // => goose duck goduck 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 goduck duck go.replaceAll(duck, goose)将所有出现的duck字符串替换为goose,这是简单明了的解决方案。
(1) replaceAll()与replace()的区别
字符串方法replaceAll(search, replaceWith)和replace(search, replaceWith)的行为方式是一样的,除了两件事:
如果search参数是一个字符串,那么replaceAll()用replaceWith替换所有出现的search,而replace()只替换第一次出现的search。 如果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来使用这个方法。