JavaScript中使用replace結(jié)合正則實現(xiàn)replaceAll的效果

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

JavaScript?中使用?replace?達到?replaceAll的效果，其實就用利用的正則的全局替換。

我們在Java中可以使用replaceAll()方法對字符串進行批量替換，但在JS中replaceAll()方法是undefined，JS中只存在replace()方法，因此我們可以自己封裝JS中replaceAll()方法供我們便捷使用。

總結(jié)一下，四種方式

1. 使用具有全局標志g的正則表達式

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

實現(xiàn)替換全部匹配字符串，輸出結(jié)果為：catcatcat。

2. 使用另一種具有全局標志g的正則表達式

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

輸出結(jié)果同上例。這里g表示執(zhí)行全局匹配，m表示執(zhí)行多次匹配。

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);

輸出結(jié)果同上例。

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

評論區(qū)@默默之分享的這個方法太贊了，拉到正文里以免有人不看評論，感謝@默默之分享。

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

輸出結(jié)果同上例。

下面是其它網(wǎng)友的補充

一、使用replace()方法進行替換

定義一個字符串：

var str = "hello world";

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

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

輸出：

“heilo world”

需要執(zhí)行三次，非常不方便；

二、使用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”

只需要執(zhí)行一次，就完成了全部替換需求。

replace方法：

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

gm 分別代表:
g=global, m=multiLine
大致上方法就是這樣的，可以實現(xiàn)替換全部指定字串

另一個簡單的驗證JS的方法：

在瀏覽器地址欄輸入
javascript:alert("abcabcabc".replace(new RegExp("a","gm"),"ad"))

這樣比較省事；），不知道多行的會不會很方便

您可能感興趣的文章:

小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法
這篇文章主要介紹了小程序跳轉(zhuǎn)到的H5頁面再跳轉(zhuǎn)回跳小程序的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-03-03
加載 Javascript 最佳實踐
相信很多與頁面打過交道的同學都對 Yahoo 的 Best Practices for Speeding Up Your Web Site 不陌生
2011-10-10
FF火狐下獲取一個元素同類型的相鄰元素實現(xiàn)代碼
FF火狐下獲取一個元素同類型的相鄰元素實現(xiàn)代碼 ,需要的朋友可以了解下
2012-12-12
基于BootStrap multiselect.js實現(xiàn)的下拉框聯(lián)動效果
當option特別多時，一般的下拉框選擇起來就有點力不從心了，所以使用multiselect是個很好的選擇。在網(wǎng)上找了半天找到了解決方案，具體實現(xiàn)代碼大家參考下本文吧
2017-07-07
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼
為非IE瀏覽器添加mouseenter,mouseleave事件的實現(xiàn)代碼,學習js的朋友可以參考下。
2011-06-06
JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法
這篇文章主要介紹了JS實現(xiàn)根據(jù)文件字節(jié)數(shù)返回文件大小的方法,涉及javascript數(shù)值計算與字符串操作相關技巧,需要的朋友可以參考下
2016-08-08
Radio 單選JS動態(tài)添加的選項onchange事件無效的解決方法
radio 單選JS動態(tài)添加的選項,onchange事件無效。使用delegate（）函數(shù)可以解決該問題，具體解決方案大家通過本文詳細了解下
2016-12-12
js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法
本篇文章主要是對js與jquery獲取父級元素,子級元素,兄弟元素的實現(xiàn)方法進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-01-01
js有趣的非空判斷函數(shù) + ?? 實現(xiàn)
本文介紹了JS中空值合并操作符??的用法,包括如何使用它來判斷數(shù)據(jù)是否為“合法數(shù)據(jù)”,即非空字符串、非undefined和非null,下面就一起來了解一下,感興趣的可以了解一下
2024-09-09
javascript 變量作用域代碼分析
作用域（scope）是javascript中一項令人棘手的的特性。所有面向?qū)ο缶幊陶Z言都有某種形式的作用域，不過和把這個概念放在什么上下文中有關。在javascript里，作用域是由函數(shù)劃分的。
2009-06-06