如何替换 JavaScript 中出现的所有特定的字符串?

我的 JavaScript 代码中有这个字符串:

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

正在做:

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

似乎只删除了上面字符串中第一次出现的 abc

我如何替换所有出现的它?

As of August 2020: Modern browsers have support for the String.replaceAll() method defined by the ECMAScript 2021 language specification.


For older/legacy browsers:

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

In response to comment:

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

str = str.replace(re, ‘’);

In response to Click Upvote's comment, you could simplify it even more:

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

Note: Regular expressions contain special (meta) characters, and as such it is dangerous to blindly pass an argument in the find function above without pre-processing it to escape those characters. This is covered in the Mozilla Developer Network's JavaScript Guide on Regular Expressions, where they present the following utility function (which has changed at least twice since this answer was originally written, so make sure to check the MDN site for potential updates):

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

So in order to make the replaceAll() function above safer, it could be modified to the following if you also include escapeRegExp:

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

Here's a string prototype function based on the accepted answer:

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find, 'g'), replace);
};

EDIT

If your find will contain special characters then you need to escape them:

String.prototype.replaceAll = function (find, replace) {
    var str = this;
    return str.replace(new RegExp(find.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), replace);
};

Fiddle: http://jsfiddle.net/cdbzL/

Match against a global regular expression:

anotherString = someString.replace(/cat/g, 'dog');
</div>
str = str.replace(/abc/g, '');

Or try the replaceAll method, as recommended in this answer:

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

or:

var search = 'abc';
str = str.replaceAll(search, '');

EDIT: Clarification about replaceAll availability

The replaceAll method is added to String's prototype. This means it will be available for all string objects/literals.

Example:

var output = "test this".replaceAll('this', 'that'); // output is 'test that'.
output = output.replaceAll('that', 'this'); // output is 'test this'

Use a regular expression:

str.replace(/abc/g, '');
</div>

Performance

Today 27.12.2019 I perform tests on macOS v10.13.6 (High Sierra) for the chosen solutions.

Conclusions

  • The str.replace(/abc/g, ''); (C) is a good cross-browser fast solution for all strings.
  • Solutions based on split-join (A,B) or replace (C,D) are fast
  • Solutions based on while (E,F,G,H) are slow - usually ~4 times slower for small strings and about ~3000 times (!) slower for long strings
  • The recurrence solutions (RA,RB) are slow and do not work for long strings

I also create my own solution. It looks like currently it is the shortest one which does the question job:

str.split`abc`.join``

str = "Test abc test test abc test test test abc test test abc";
str = str.split`abc`.join``

console.log(str);

Details

The tests were performed on Chrome 79.0, Safari 13.0.4 and Firefox 71.0 (64 bit). The tests RA and RB use recursion. Results

Short string - 55 characters

You can run tests on your machine HERE. Results for Chrome:

Long string: 275 000 characters

The recursive solutions RA and RB gives

RangeError: Maximum call stack size exceeded

For 1M characters they even break Chrome

I try to perform tests for 1M characters for other solutions, but E,F,G,H takes so much time that browser ask me to break script so I shrink test string to 275K characters. You can run tests on your machine HERE. Results for Chrome

Code used in tests

var t="Test abc test test abc test test test abc test test abc"; // .repeat(5000)
var log = (version,result) => console.log(`${version}: ${result}`);

function A(str) {
return str.split(‘abc’).join(’’);
}

function B(str) {
return str.splitabc.join``; // my proposition
}

function C(str) {
return str.replace(/abc/g, ‘’);
}

function D(str) {
return str.replace(new RegExp(“abc”, “g”), ‘’);
}

function E(str) {
while (str.indexOf(‘abc’) !== -1) { str = str.replace(‘abc’, ‘’); }
return str;
}

function F(str) {
while (str.indexOf(‘abc’) !== -1) { str = str.replace(/abc/, ‘’); }
return str;
}

function G(str) {
while(str.includes(“abc”)) { str = str.replace(‘abc’, ‘’); }
return str;
}

// src: How to replace all occurrences of a string in JavaScript - Stack Overflow
function H(str)
{
let i = -1
let find = ‘abc’;
let newToken = ‘’;

if (!str)
{
    if ((str == null) &amp;&amp; (find == null)) return newToken;
    return str;
}

while ((
i = str.indexOf(
find, i &gt;= 0 ? i + newToken.length : 0
)) !== -1
)
{
str = str.substring(0, i) +
newToken +
str.substring(i + find.length);
}
return str;

}

// src: https://stackoverflow.com/a/22870785/860099
function RA(string, prevstring) {
var omit = ‘abc’;
var place = ‘’;
if (prevstring && string === prevstring)
return string;
prevstring = string.replace(omit, place);
return RA(prevstring, string)
}

// src: https://stackoverflow.com/a/26107132/860099
function RB(str) {
var find = ‘abc’;
var replace = ‘’;
var i = str.indexOf(find);
if (i > -1){
str = str.replace(find, replace);
i = i + replace.length;
var st2 = str.substring(i);
if(st2.indexOf(find) > -1){
str = str.substring(0,i) + RB(st2, find, replace);
}
}
return str;
}

log('A ', A(t));
log('B ', B(t));
log('C ', C(t));
log('D ', D(t));
log('E ', E(t));
log('F ', F(t));
log('G ', G(t));
log('H ', H(t));
log(‘RA’, RA(t)); // use reccurence
log(‘RB’, RB(t)); // use reccurence

<p style="color:red">This snippet only presents codes used in tests. It not perform test itself!<p>
</div>
str = str.replace(new RegExp("abc", 'g'), "");

worked better for me than the above answers. so new RegExp("abc", 'g') creates a RegExp what matches all occurence ('g' flag) of the text ("abc"). The second part is what gets replaced to, in your case empty string (""). str is the string, and we have to override it, as replace(...) just returns result, but not overrides. In some cases you might want to use that.

This is the fastest version that doesn't use regular expressions.

Revised jsperf

replaceAll = function(string, omit, place, prevstring) {
  if (prevstring && string === prevstring)
    return string;
  prevstring = string.replace(omit, place);
  return replaceAll(prevstring, omit, place, string)
}

It is almost twice as fast as the split and join method.

As pointed out in a comment here, this will not work if your omit variable contains place, as in: replaceAll("string", "s", "ss"), because it will always be able to replace another occurrence of the word.

There is another jsperf with variants on my recursive replace that go even faster (http://jsperf.com/replace-all-vs-split-join/12)!

  • Update July 27th 2017: It looks like RegExp now has the fastest performance in the recently released Chrome 59.

Loop it until number occurrences comes to 0, like this:

function replaceAll(find, replace, str) {
    while (str.indexOf(find) > -1) {
        str = str.replace(find, replace);
    }
    return str;
}