JavaScript中的字符串全局替换

623 阅读2分钟

这是我参与更文挑战的第20天,活动详情查看: 更文挑战

业务场景

在实际的业务开发中, 经常会遇到字符串替换的需求, 大致有以下两种:

  1. 替换指定的文字
  2. 替换特定格式的文字

除此之外, 还会延伸出只指定次数的替换, 如只替换第一次出现的某某文字

在Java中, 有replace和replaceAll两个方法

还有各式各样的工具包(如hutool/apache等)

那么JavaScript该如何操作呢?

方案

replace方法

在JavaScript中, 字符串只有一个replace方法

它和Java中类似, 只会替换第一次出现的字符:

let test = 'YesOrYes';
console.log(test.replace('Yes', 'No'));
// NoOrYes

那如果要替换全部, 我需要手动循环吗?

答案字然是否定的, 其实replace是支持全部替换的, 取决于第一个参数的类型

当参数为正则时, 会对字符串中全部符合规范的内容进行替换, 代码可以修改成这样:

let test = 'YesOrYes';
let regexp = new RegExp('Yes', 'g')
console.log(test.replace(regexp, 'No'));
// NoOrNo

对于使用正则表达式, 这里有两点需要注意:

  1. 当第一个变量为正则格式, 例如/(\w+)\s(\w+)/时, 第二个参数需忽略
  2. 当第二个变量为字符串时, 第二个参数支持g/i/m, 分别代表全局匹配/区分大小写匹配/多行匹配

现在我们已经可以进行全局替换啦, 但每次都需要创建个正则对象, 总觉得不是很优雅

给String增加方法

JavaScript相较于Java的好处, 当然是可以自定义很多东西(严格来说这也不一定是好处, 请勿较真)

相信很多小伙伴在开发的过程中都或多或少接触过prototype的概念, 废话不多说, 直接上代码:

String.prototype.replaceAll = function(oldVal, newVal) { 
    return this.replace(new RegExp(oldVal, 'g'), newVal); 
}

let test = 'YesOrYes';
console.log(test.replaceAll('Yes', 'No');
// NoOrNo