Replace all Occurrences of a Substring in a String in JavaScript

In Javascript, a string is a sequence of characters represented with quotation marks. We are given a string and we need to replace all occurrences of a substring from the given string.

Table of Content

  • Using replace() method with regular expression
  • Using indexOf() and slice() methods
  • Using replaceAll() method

Using the replace() method with regular expression

  • First, declare a string variable str with the value “BeginnerforBeginner”.
  • Now, declare a substring variable with the value “Beginner” to search for and replace.
  • Use the replace method with a regular expression to globally replace all instances of the substring with the replacement value “Beginner”.
  • It logs the result which will be “Beginner For Beginner “.

Example: The below code will explain the use of replace() method with regular expression.

Javascript




let str = "BeginnerforBeginner";
let substring = "Beginner";
let replacement = "Beginner";
console.log("Before replacement: ", str)
let finalResult =
    str.replace(new RegExp(substring, "g"),
        replacement);
 
console.log("After Replacement: ", finalResult);


Output

Before replacement:  BeginnerforBeginner
After Replacement:  BeginnerforBeginner

Using indexOf() and slice() methods

  • The indexOf() method finds the index of the first occurrence of the substring.
  • If the index is greater than or equal to 0 (found a match), it slices the string before and after the match and inserts the replacement.
  • It recursively calls itself to keep replacing all other matches.
  • It returns the final string after replacing all matches.

Example: The below code will explain the use of the indexOf() and slice() methods to replace all occurences of a substring.

Javascript




function replaceAll(str, substring, replacement) {
    let index = str.indexOf(substring);
    if (index >= 0) {
        str =
            str.slice(0, index) + replacement +
            str.slice(index + substring.length);
        str = replaceAll(str, substring, replacement);
    }
    return str;
}
const str = "BeginnerforBeginner";
const subStr = "Beginner";
const replacement = "Beginner";
console.log("Before replacement: ", str)
let finalResult =
    replaceAll(str, subStr, replacement);
console.log("After Replacement: ", finalResult);


Output

Before replacement:  BeginnerforBeginner
After Replacement:  BeginnerforBeginner

Using replaceAll() method

  • Declare a constant str variable with the initial string “BeginnerforBeginner”.
  • Now, use the String.replaceAll() method to replace all occurrences of “Beginner” in the str with “Beginner”, assigning the result to finalResult and logging it to the console.

Example: The below code is practical implementation of the above-discussed approach.

Javascript




const str = "BeginnerforBeginner";
const finalResult =
    str.replaceAll("Beginner", "Beginner");
console.log("Before replacement: ", str)
console.log("After Replacement: ", finalResult);


Output

Before replacement:  BeginnerforBeginner
After Replacement:  BeginnerforBeginner