Replace all occurrences of a string in JavaScript

featured Image

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

Related Topics:

Check if String starts with a space in JavaScript

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)

Related Posts

featured Image

Get the 10 characters from a string using JavaScript.

Here, in this article we will learn how to get the first 10 character from any string using JavaScript. Here we will be using JavaScript’s String method substring. What is…

Read more
featured Image

Convert date to long date format using JavaScript

In this article we will look into how to convert a date to a long date format using JavaScript. To convert it to a long format we will be using…

Read more
featured Image

Prevent body from scrolling when a modal is opened

Here, in this article, we will learn how to prevent the body from scrolling when a modal or a pop-up is opened using JavaScript. The scroll event is not cancelable….

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *