How Do I Replace All Occurrences of a String in JavaScript?

CrioDo -

Problem Statement

In JavaScript, the replace() method is commonly used to modify strings by replacing parts of them. However, this method only replaces the first occurrence of the substring, which can be limiting when you need to replace all occurrences.

Example:

var string = "Test abc test test abc test test test abc test test abc";
string = string.replace("abc", "");
console.log(string); 
// Output: "Test  test test abc test test test abc test test abc"

In this case, only the first "abc" is removed.

Solution Code

To replace all occurrences, JavaScript offers several solutions:

Preferred Method: Using replaceAll()

The replaceAll() method replaces all instances of a substring in the string.

var string = "Test abc test test abc test test test abc test test abc";
string = string.replaceAll("abc", "");
console.log(string);
// Output: "Test  test test  test test test  test test "

Learn More

Alternative Methods
Method 1: Using split() and join()

You can split the string by the substring you want to remove and then join the resulting array back into a single string.

var string = "Test abc test test abc test test test abc test test abc";
string = string.split("abc").join("");
console.log(string);
// Output: "Test  test test  test test test  test test "

How It Works:

  • split("abc"): Divides the string into an array using "abc" as the delimiter.
  • join(""): Rejoins the array elements into a single string without the "abc" substrings.
Method 2: Using replace() with a Regular Expression

Using a regular expression with the global (g) flag ensures that all matches are replaced.

var string = "Test abc test test abc test test test abc test test abc";
string = string.replace(new RegExp("abc", "g"), "");
console.log(string);
// Output: "Test  test test  test test test  test test "

How It Works:

  • new RegExp("abc", "g"): Creates a global regular expression to match all occurrences of "abc".
  • replace(): Replaces each match with an empty string ("").
Method 3: Using a while Loop with includes()

A loop can be used to repeatedly replace the substring until all occurrences are removed.

var string = "Test abc test test abc test test test abc test test abc";
while (string.includes("abc")) {
  string = string.replace("abc", "");
}
console.log(string);
// Output: "Test  test test  test test test  test test "

How It Works:

  • string.includes("abc"): Checks if the string contains "abc".
  • The while loop runs until "abc" is no longer found in the string.
  • Each iteration removes one occurrence of "abc" using replace().

Summary

To replace all occurrences of a substring in JavaScript:

  • Use replaceAll() for a simple and modern solution.
  • Use split() and join() for wide compatibility with older browsers.
  • Use a regular expression with the global (g) flag for powerful and flexible matching.
  • Use a while loop with includes() for manual control over replacements.
Output Example:

After replacing all occurrences of "abc" in the string:

"Test abc test test abc test test test abc test test abc"
becomes:
"Test test test test test test test test "

References

Quick Recap of replacing all occurrences of a string in JavaScript

Thank you for taking the time to explore this article on replacing all occurrences of a string in JavaScript. We hope it has provided you with valuable insights into various methods, including replaceAll(), split() and join(), and the use of regular expressions. With this knowledge, you can now tackle string manipulation tasks more efficiently in your projects.

To enhance your understanding, here are additional topics that you can refer to in the future:

  1. Performance Considerations: Understand the efficiency of each method in large-scale applications.
  2. Case Sensitivity: Learn about handling upper and lowercase matches using the i flag in regular expressions.
  3. Partial Matches: Avoid unintended replacements by using boundaries like \b in regex.
  4. Edge Cases: Discover how these methods behave with empty strings, special characters, and unsupported browsers.
  5. Unicode and Multilingual Strings: Work seamlessly with special characters and Unicode text.
  6. Browser Compatibility: Explore alternatives to replaceAll() for older environments.
  7. Advanced Regex Patterns: Create complex patterns for dynamic string replacements.
  8. String Immutability: Understand why JavaScript strings cannot be modified directly.

Keep challenging yourself to expand your skillset. Remember, mastering concepts like string manipulation is essential for becoming a proficient JavaScript developer. Whether you're working on simple applications or complex web solutions, these techniques will empower you to write cleaner, more efficient code.

Compiled by team Crio.Do