JavaScript中使用replace结合正则实现replaceAll的效果

更新时间：2023年07月30日 23:43:07 投稿：mdxy-dxy

JavaScript 中使用 replace 达到 replaceAll的效果，其实就用利用的正则的全局替换。

我们在Java中可以使用replaceAll()方法对字符串进行批量替换，但在JS中replaceAll()方法是undefined，JS中只存在replace()方法，因此我们可以自己封装JS中replaceAll()方法供我们便捷使用。

总结一下，四种方式

1. 使用具有全局标志g的正则表达式

var str = "dogdogdog";
var str2 = str.replace(/dog/g,"cat");
console.log(str2);

实现替换全部匹配字符串，输出结果为：catcatcat。

2. 使用另一种具有全局标志g的正则表达式

var str = "dogdogdog";
var str2 = str.replace(new RegExp("dog","gm"),"cat");
console.log(str2);

输出结果同上例。这里g表示执行全局匹配，m表示执行多次匹配。

3. 给string对象添加原型方法replaceAll()

String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

这样就可以像使用replace方法一样使用replaceAll方法：

var str = "dogdogdog";
var str2 = str.replaceAll("dog", "cat");
console.log(str2);

输出结果同上例。

4. 使用先split，再join的方法

评论区@默默之分享的这个方法太赞了，拉到正文里以免有人不看评论，感谢@默默之分享。

var str = "dogdogdog";
var str2 = str.split("dog").join("cat")
console.log(str2);

输出结果同上例。

下面是其它网友的补充

一、使用replace()方法进行替换

定义一个字符串：

var str = "hello world";

使用replace()方法将字符串中的字母"l"替换成"i"，原始做法：

 console.log(str.replace("l","i"));

输出：

“heilo world”

需要执行三次，非常不方便；

二、使用replaceAll()方法替换

封装replaceAll()方法：

String.prototype.replaceAll = function(s1, s2) {
    return this.replace(new RegExp(s1, "gm"), s2);
}

定义一个字符串：

var str = "hello world";

使用replaceAll()方法进行批量替换：

console.log(str.replaceAll("l", "i"));

输出：

“heiio worid”

只需要执行一次，就完成了全部替换需求。

replace方法：

string.replace(new RegExp(oldString,"gm"),newString))

gm 分别代表:
g=global, m=multiLine
大致上方法就是这样的，可以实现替换全部指定字串

另一个简单的验证JS的方法：

在浏览器地址栏输入
javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad"))

这样比较省事；），不知道多行的会不会很方便

您可能感兴趣的文章:

Bootstrap 3.x打印预览背景色与文字显示异常的解决
前几天同事有个问题咨询我，他在调用print()来打印页面，发现打印预览页面上的背景色无法显示以及文字总是显示为黑色，感觉非常奇怪，我通过测试发现是Bootstrap的问题，现在将解决的方法分享给大家，希望可以帮助到同样遇到这个问题的朋友们，下面来一起看看。
2016-11-11
javascript中apply和call方法的作用及区别说明
本篇文章主要是对javascript中apply和call方法的作用及区别进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
如何在JavaScript中优雅的提取循环内数据详解
这篇文章主要给大家介绍了关于如何在JavaScript中优雅的提取循环内数据的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
JavaScript实现数组对象去重的多种方法
这篇文章主要介绍了JavaScript实现数组对象去重的多种方法，使用set对象或使用`reduce`方法，本文结合示例代码给大家介绍的非常详细，需要的朋友参考下吧
2023-02-02
webpack4 optimization使用总结
这篇文章主要介绍了webpack4 optimization使用总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
jquery实现文本框textarea自适应高度
这篇文章主要介绍了jquery实现文本框textarea自适应高度的相关资料,需要的朋友可以参考下
2016-03-03
javascript对中文按照拼音排序代码
将中文编入数组，调用数组的sort方法，再用到一个localeCompare即可实现中文排序,需要的朋友可以参考下
2014-08-08
Js中将Long转换成日期格式的实现方法
这篇文章主要介绍了Js中将Long转换成日期格式的实现方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06
JavaScript 接口原理与用法实例详解
这篇文章主要介绍了JavaScript 接口原理与用法,结合实例形式详细分析了JavaScript 接口原理、优缺点、用法及操作注意事项,需要的朋友可以参考下
2020-05-05
JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
这篇文章主要介绍了JS实现漂亮的窗口拖拽效果,具有可改变大小、最大化、最小化、关闭等功能,以完整实例形式较为详细的分析了JavaScript操作窗口的大小改变、还原及关闭等功能的相关实现技巧,需要的朋友可以参考下
2015-10-10