快捷導(dǎo)航

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

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

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

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

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

1. 使用具有全局標(biāo)志g的正則表達(dá)式

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

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

2. 使用另一種具有全局標(biāo)志g的正則表達(dá)式

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

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

3. 給string對(duì)象添加原型方法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的方法

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

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

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

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

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

定義一個(gè)字符串：

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

定義一個(gè)字符串：

var str = "hello world";

使用replaceAll()方法進(jìn)行批量替換：

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

輸出：

“heiio worid”

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

replace方法：

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

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

另一個(gè)簡(jiǎn)單的驗(yàn)證JS的方法：

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

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

您可能感興趣的文章:

相關(guān)文章

Bootstrap 3.x打印預(yù)覽背景色與文字顯示異常的解決
前幾天同事有個(gè)問(wèn)題咨詢(xún)我，他在調(diào)用print()來(lái)打印頁(yè)面，發(fā)現(xiàn)打印預(yù)覽頁(yè)面上的背景色無(wú)法顯示以及文字總是顯示為黑色，感覺(jué)非常奇怪，我通過(guò)測(cè)試發(fā)現(xiàn)是Bootstrap的問(wèn)題，現(xiàn)在將解決的方法分享給大家，希望可以幫助到同樣遇到這個(gè)問(wèn)題的朋友們，下面來(lái)一起看看。
2016-11-11
javascript中apply和call方法的作用及區(qū)別說(shuō)明
本篇文章主要是對(duì)javascript中apply和call方法的作用及區(qū)別進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
如何在JavaScript中優(yōu)雅的提取循環(huán)內(nèi)數(shù)據(jù)詳解
這篇文章主要給大家介紹了關(guān)于如何在JavaScript中優(yōu)雅的提取循環(huán)內(nèi)數(shù)據(jù)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)數(shù)組對(duì)象去重的多種方法，使用set對(duì)象或使用`reduce`方法，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友參考下吧
2023-02-02
webpack4 optimization使用總結(jié)
這篇文章主要介紹了webpack4 optimization使用總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
jquery實(shí)現(xiàn)文本框textarea自適應(yīng)高度
這篇文章主要介紹了jquery實(shí)現(xiàn)文本框textarea自適應(yīng)高度的相關(guān)資料,需要的朋友可以參考下
2016-03-03
javascript對(duì)中文按照拼音排序代碼
將中文編入數(shù)組，調(diào)用數(shù)組的sort方法，再用到一個(gè)localeCompare即可實(shí)現(xiàn)中文排序,需要的朋友可以參考下
2014-08-08
Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法
這篇文章主要介紹了Js中將Long轉(zhuǎn)換成日期格式的實(shí)現(xiàn)方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2018-06-06
JavaScript 接口原理與用法實(shí)例詳解
這篇文章主要介紹了JavaScript 接口原理與用法,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript 接口原理、優(yōu)缺點(diǎn)、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
JS實(shí)現(xiàn)漂亮的窗口拖拽效果(可改變大小、最大化、最小化、關(guān)閉)
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的窗口拖拽效果,具有可改變大小、最大化、最小化、關(guān)閉等功能,以完整實(shí)例形式較為詳細(xì)的分析了JavaScript操作窗口的大小改變、還原及關(guān)閉等功能的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-10-10