4种方法替换JavaScript里所有出现的字符串

e8671989d42fa51afadb77d04ada8c7c.png

在JavaScript代码中出现这个字符串:

 
 
"Test abc test test abc test test test abc test test abc"

比如直接使用replace替换的方法,如下:

 
 
str = str.replace('abc', '');

似乎只删除了abc上面字符串中第一次出现的。我怎样才能替换它的所有出现?下面介绍4种替换所有出现字符串的方法。

方式一、使用replace加正则

必须启用正则表达式上的全局标志,才能使replace()方法替换模式出现的所有内容,我们可以这样做:

  1. 在正则表达式文字中,将g附加到标志部分:/abc/g。

  2. 对于正则表达式构造函数,使用 flags 参数:new RegExp(' abc  ', 'g')

代码如下:

 
 
str = str.replace(/abc/g, '');

或者:

 
 
var find = 'abc';
var re = new RegExp(find, 'g');
str = str.replace(re, '');

可以通过封装方法,进一步简化它。

 
 
function replaceAll(str, find, replace) {
  return str.replace(new RegExp(find, 'g'), replace);
}

注意:正则表达式包含特殊(元)字符,因此在find上面的函数中盲目传递参数而不对其进行预处理以转义这些字符是危险的。

因此,为了使上述replaceAll()功能更安全,如果您还包含以下内容,则可以将其修改为以下内容escapeRegExp:

 
 
function escapeRegExp(string) {
  return string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
 
 
function replaceAll(str, find, replace) {
  return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}

方式二、replaceAll() 方法

新的提案String.prototype.replaceAll()(在第3阶段)将replaceAll()方法引入到 JavaScript 的字符串中。

replaceAll(search, replaceWith)字符串方法用replaceWith替换所有的search字符串,没有任何变通方法。

 
 
let result = "1 abc 2 abc 3".replaceAll("abc", "xyz");
// `result` is "1 xyz 2 xyz 3"

但是首先检查我可以使用或其他兼容性表,以确保您的目标浏览器首先添加了对它的支持。

replaceAll的兼容实现:

 
 
String.prototype.replaceAll = String.prototype.replaceAll || function(string, replaced) {
  return this.replace(new RegExp(string, 'g'), replaced);
};

方式三、使用 split 和 join 的方法

不使用任何正则表达式的最简单方法是 split 和 join,这种方法主要包含二个阶段:

  1. 使用 split 方法,根据指定的字符将字符串分成多个部分。

  2. 然后使用 join 方法将分割的多个部分连接在一直,并在它们之间插入指定的字符。

作为简单文字字符串的正则表达式的替代方案,您可以使用:

 
 
str = "Test abc test test abc test...".split("abc").join("");

一般模式是

 
 
str.split(search).join(replacement)

方法四、利用循环

基于while循环的解决方案很慢,通常对小字符串慢约4倍,对长字符串慢约 3000 倍。如下:

 
 
while(str.includes("abc")){
    str = str.replace("abc", "replaced text");
}

学习更多技能

请点击下方公众号

a96cc90611bc28de32b0925728503e80.gif

d59c25dd42a77256ae77271e3e6d9ef0.png

3c64f7200bfc203ca798382c0a608847.png

  • 1
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值