How to Replace All String Occurrences in JavaScript

By Parth Patel on Jul 21, 2022

In this article, let’s see how to replace all instances of a substring with another string in a given string using JavaScript. There are multiple ways to replace single occurence or all occurences of a string in JavaScript.

1. replaceAll() Method

Let’s start with easiest method to replace all occurances of a string with another string.

As shown below, replaceAll() takes two parameters:

  1. substr - First parameter is substring you want to search and replace all.
  2. newSubstr - Second parameter is the new substring you want instead of the substr.

and returns a new string with all matches of the given substring replaced with new substring.

Syntax:

string.replaceAll(substr, newSubstr)

Example:

let str = 'PHP is the best language. PHP is the easiest language.';
let newstr = str.replaceAll('PHP', 'Javascript');
console.log(newstr);

// Javascript is the best language. Javascript is the easiest language.

replaceAll() method using regex

You can also use regex to match substring in the given string. For example - what if you want the search to be case insensitive? or You want to replace every word starting with something?

In those and many other such cases, regex can be used.

Syntax:

replaceAll(regexp, newSubstr)

Example:

let str = 'PHP is the best language. Php is the easiest language.';
let newstr = str.replaceAll(/PHP/gi, 'Javascript');
console.log(newstr);

// Javascript is the best language. Javascript is the easiest language.

NOTE: In the second parameter, instead of new substring, you can also pass a function which will return the new substring.

The replaceAll method is not supported by Internet Explorer versions 6-11. If you want to support these browsers then you can use babel to compile your code to an older version of JavaScript, or simply use the replace method which we will discuss next.

2. replace() method

The replace() is the older and more widely supported function replace substring in javascript. Normally, it is used to replace single occurance of a substring with another string but you can also use regex to replace multiple occurences of the substring with new substring.

Syntax:

replace(regexp, newSubString)
replace(subString, newSubString)

As you can see above, the replace() method takes two parameters just like replaceAll() and you can pass substring or regex in the first parameter.

Example:

let str = 'PHP is the best language. Php is the easiest language.';
let newstr = str.replace(/PHP/gi, 'Javascript');
console.log(newstr);

// Javascript is the best language. Javascript is the easiest language.

Replace first occurance of substring with new substring in Javascript

You can use replace() to replace single occurance of substring with another string as shown below.

Example:

let str = 'PHP is the best language. PHP is the easiest language.';
let newstr = str.replace('PHP', 'Javascript');
console.log(newstr);

// Javascript is the best language. PHP is the easiest language.

3. Replace all substring using split() and join() method in JavaScript

Well, this is pretty unconventional way to find all occurance of a substring and replace with another string, but out of curiosity, let’s explore that.

Here, we first split our given string by the substring we want to replace, therefore we will have list of substrings (excluding the substring we wanted to replace).

Now, we will join all these chunks with our new substring as a glue leading to our desired result.

Example

let str = 'PHP is the best language. PHP is the easiest language.';
let newstr = str.split('PHP').join('Javascript');
console.log(newstr);

// Javascript is the best language. Javascript is the easiest language.

So, that’s a wrap. Hope you guys found this article useful.

Adios.