Replace all occurrences of a string in JavaScript

If you are looking for “How to replace all occurrences of a string in JavaScript“, then the simple answer to it will be to use of String.replace() method with regular expression.

Replacing String is a very common task in web or application development. However, there is no easy way to replace all string occurrences in JavaScript.

In this post, we will learn about:

String.replace()
String.replaceAll()
join() and split() methods

Using String.replace() : Replace Only First Occurrence

We can use the string.replace() method to change the occurrence of a string in JavaScript.

The replace()method search for a value or a regular expression and return a new string with the replaced value. This method does not change the original string.

Syntax:

string.replace(searchValue, replaceValue)

Let’s see an example :

let text = "I have a dog. The name of my dog is Tommy";
let result = text.replace("dog", "cat");
console.log(result) 
// I have a cat. The name of my dog is Tommy

However, the only issue with this approach (as you can see from the output of the above code) is that it only replaces the first occurrence of the search value and does not continue to replace all the occurrences.

Using replace() with regex: Replace all Occurrences

So, to replace all the appearances of the character in the string we have to use the regular expression with the g ( global ) modifier set.

Lets’s see an example to understand it better:

let text = "I have a dog. The name of my dog is Tommy";
let result = text.replace(/dog/g, "cat");
console.log(result)
// output : I have a cat. The name of my cat is Tommy

In the above code, we have used a regular expression(regex)instead of a string as the first parameter (searchValue) to replace all the appearance of the character in the string.

So in the output, we can see we have replaced the word “dog” with “cat” in the whole string.

The regular expression is case-sensitive substitution. So in the above example, if there is a word “Dog” that is Capitalize, it won’t replace it.

Example:

let text = "I have a dog. The name of my Dog is Tommy";
let result = text.replace(/dog/g, "cat");
// I have a cat. The name of my Dog is Tommy

To make it case insensitive, we have to add the i modifier to the search value.

Example:

let text = "I have a dog. The name of my Dog is Tommy";
let result = text.replace(/dog/gi, "cat");
// I have a cat. The name of my cat is Tommy

Using replaceAll() method

The String.replaceAll() is a new method and the most simple way to replace all the appearance of the string in JavaScript.

So whats the difference between replace() and replaceAll()?

The replaceAll() method replaces all the occurrence of the string whereas replace() only replace the first occurrence of the string.

Example:

let text = "I have a dog. The name of my dog is Tommy";
let result = text.replaceAll("dog", "cat");
// output : I have a cat. The name of my cat is Tommy

For case-sensitive strings use the regex expression with the g and i flag.

let result = text.replaceAll(/dog/ig, "cat");

NOTE: Currently the browser support of string.replaceAll() is limited. To use it you have to use polyfill.

Alternate Method : split and join

We can also find and replace strings in JavaScript using the split() and join() methods.

The split() method will truncate the string when it finds the search word (case-sensitive) and then we use the join() method to add the new word to the string.

Example:

let text = "I have a dog. The name of my dog is Tommy";
let stripped = text.split('dog')
// 'I have a ', '. The name of my ', ' is Tommy'
let replaced = stripped.join('cat')
// I have a cat. The name of my cat is Tommy

In one line:

let text = "I have a dog. The name of my dog is Tommy";
let replace = text.split('dog').join('cat')
// I have a cat. The name of my cat is Tommy

String Interpolation In JavaScript

How to compare two strings in JavaScript?

Create multiline string in JavaScript | Split string to Multilines

JavaScript – Detect if a string contains any space

Convert array to String (with and without commas)

Using String.replace() : Replace Only First Occurrence

Using replace() with regex: Replace all Occurrences

Using replaceAll() method

Alternate Method : split and join

Related Posts