Categories
javascript replace string

How do I replace all occurrences of a string in JavaScript?

5215

Given a string:

s = "Test abc test test abc test test test abc test test abc";

This seems to only remove the first occurrence of abc in the string above:

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

How do I replace all occurrences of it?

3

  • 16

    When replacing all occurrences of aba in ababa with ca, which result do you expect? caba? abca? cca?

    Aug 2, 2019 at 12:58

  • 12

    String.prototype.replaceAll() is now a standard part of ECMAScript tc39.es/ecma262/#sec-string.prototype.replaceall, documented at developer.mozilla.org/docs/Web/JavaScript/Reference/… and shipped in Safari 13.1, Firefox 77 and Chrome Dev/Canary and will ship in Chrome 85. From the docs: “If searchValue is a string, replaces all occurrences of searchValue (as if .split(searchValue).join(replaceValue) or a global & properly-escaped regular expression had been used). If searchValue is a non-global regular expression, throws an exception”

    Jun 29, 2020 at 5:26


  • 17

    Use regex instead of string, should look like str.replace(/abc/g, ''); so g to get all matches.

    – sarea

    Jul 29, 2020 at 6:17

2310

Update: In the latest versions of most popular browsers, you can use replaceAll
as shown here:

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

But check Can I use or another compatibility table first to make sure the browsers you’re targeting have added support for it first.


For Node and compatibility with older/non-current browsers:

Note: Don’t use the following solution in performance critical code.

As an alternative to regular expressions for a simple literal string, you could use

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

The general pattern is

str.split(search).join(replacement)

This used to be faster in some cases than using replaceAll and a regular expression, but that doesn’t seem to be the case anymore in modern browsers.

Benchmark: https://jsben.ch/TZYzj

Conclusion:

If you have a performance critical use case (e.g processing hundreds of strings), use the Regexp method. But for most typical use cases, this is well worth not having to worry about special characters.

4

  • 17

    I discourage from using replaceAll at this moment (2020). It is not supported by some browsers that had updates in this year caniuse.com/?search=replaceAll It is too early

    Oct 19, 2020 at 18:31

  • 20

    NodeJS supports replaceAll in 15.x versions.

    – Abion47

    Feb 25, 2021 at 1:38

  • what to do in case-sensitive case

    Aug 27, 2021 at 23:03


  • The benchmark’s plain replace function is not the equivalent of regex /g. “If pattern is a string, only the first occurrence will be replaced. ” EX: replaceAll_0(“foo bar foo”) => “bar foo” when it should just be “bar”. –MDN

    Feb 12 at 15:30


2508

For the sake of completeness, I got to thinking about which method I should use to do this. There are basically two ways to do this as suggested by the other answers on this page.

Note: In general, extending the built-in prototypes in JavaScript is generally not recommended. I am providing as extensions on the String prototype simply for purposes of illustration, showing different implementations of a hypothetical standard method on the String built-in prototype.


Regular Expression Based Implementation

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

Split and Join (Functional) Implementation

String.prototype.replaceAll = function(search, replacement) {
    var target = this;
    return target.split(search).join(replacement);
};

Not knowing too much about how regular expressions work behind the scenes in terms of efficiency, I tended to lean toward the split and join implementation in the past without thinking about performance. When I did wonder which was more efficient, and by what margin, I used it as an excuse to find out.

On my Chrome Windows 8 machine, the regular expression based implementation is the fastest, with the split and join implementation being 53% slower. Meaning the regular expressions are twice as fast for the lorem ipsum input I used.

Check out this benchmark running these two implementations against each other.


As noted in the comment below by @ThomasLeduc and others, there could be an issue with the regular expression-based implementation if search contains certain characters which are reserved as special characters in regular expressions. The implementation assumes that the caller will escape the string beforehand or will only pass strings that are without the characters in the table in Regular Expressions (MDN).

MDN also provides an implementation to escape our strings. It would be nice if this was also standardized as RegExp.escape(str), but alas, it does not exist:

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

We could call escapeRegExp within our String.prototype.replaceAll implementation, however, I’m not sure how much this will affect the performance (potentially even for strings for which the escape is not needed, like all alphanumeric strings).

2

  • In 2021 String.prototype.replaceAll() natively exist. So this implementation should be checked first before use.

    Dec 26, 2021 at 4:51

  • m using nestjs, so typescript showing error that replaceAll is not method of String prototype, any solution for this?

    Jan 5 at 4:52

2310

Update: In the latest versions of most popular browsers, you can use replaceAll
as shown here:

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

But check Can I use or another compatibility table first to make sure the browsers you’re targeting have added support for it first.


For Node and compatibility with older/non-current browsers:

Note: Don’t use the following solution in performance critical code.

As an alternative to regular expressions for a simple literal string, you could use

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

The general pattern is

str.split(search).join(replacement)

This used to be faster in some cases than using replaceAll and a regular expression, but that doesn’t seem to be the case anymore in modern browsers.

Benchmark: https://jsben.ch/TZYzj

Conclusion:

If you have a performance critical use case (e.g processing hundreds of strings), use the Regexp method. But for most typical use cases, this is well worth not having to worry about special characters.

4

  • 17

    I discourage from using replaceAll at this moment (2020). It is not supported by some browsers that had updates in this year caniuse.com/?search=replaceAll It is too early

    Oct 19, 2020 at 18:31

  • 20

    NodeJS supports replaceAll in 15.x versions.

    – Abion47

    Feb 25, 2021 at 1:38

  • what to do in case-sensitive case

    Aug 27, 2021 at 23:03


  • The benchmark’s plain replace function is not the equivalent of regex /g. “If pattern is a string, only the first occurrence will be replaced. ” EX: replaceAll_0(“foo bar foo”) => “bar foo” when it should just be “bar”. –MDN

    Feb 12 at 15:30