DEV Community

Vijay Singh Khatri
Vijay Singh Khatri

Posted on

How to Replace all Occurrences of a String in JavaScript

Alt Text
String manipulation is one of the most common terms in programming languages, and in many competitive programming, you may encounter the problems related to it. Here in this article, we are going to discuss how we can replace all the occurrences of a string in JavaScript and here we have used two techniques to perform this action.

Using the string replace() Method and regex:

In JavaScript, we have a built-in method replace()** **which can be used to replace the substring with an alternative substring from the string, and we perform the replace() method with the regular expression because regular expression helps us to find the proper set of string which we want to replace.

replace syntax:

string_name.replace(substring, alternative_string)

Example:

const string = "Welcome to TGB, TGB provide you everything you need to know";
const new_string =string.replace(/TGB/, "TechGeekBuzz");
document.write(new_string) ;

Output:

Welcome to TechGeekBuzz, TGB provide you everything you need to know

Here you can see that the TGB has been replaced with TechGeekBuzz, but there is a problem in the above example, here the** replace() **method replace only the first occurrence of TGB, what if we want to replace all the TGBs for that we need to rewrite the replace substring with proper regular expression.

Replace all the occurrence of the substring(Case sensitive).

Regular expression syntax:

/substring/g

Example:

const string = "Welcome to TGB, TGB provide you everything you need to know";
const new_string = string.replace(/TGB/g,"TechGeekBuzz");
document.write(new_string) ;

Output:

Welcome to TechGeekBuzz, TechGeekBuzz provide you everything you need to know


In the above example replace substring regular expression "TGB" is Case sensitive so if we had written tgb instead of TGB then it would not work. So, if you want to replace the substring no matter what is the case of the substring then we need to rewrite the replace substring regular expression.

Replace all the occurrence of the substring (Case Insensitive).

Regular expression syntax:

/substring/gi

Example:

const string = "Welcome to TGB, TGB provide you everything you need to know";
const new_string = string.replace(/tgb/gi,"TechGeekBuzz");
document.write(new_string) ;

Output:

Welcome to TechGeekBuzz, TechGeekBuzz provide you everything you need to know

Using Split and Join Method (with Regular Expression):

With the help of JavaScript split and join method we can replace the substring from a string.

**split(): **This method is used to split the string into a list or array of strings. It takes an argument and split the string from the passed argument.

**join(): **This method is just opposite of split() method, it is used to join a list and make it a string, we can also pass argument in the join method and join the list element with that passed argument.

** Replace all the occurrence of the substring(Case Insensitive) using split and join methods.**

Regular expression syntax:

/substring/gi

Example:

const string = "Welcome to TGB, TGB provide you everything you need to know";
const new_string = string.split(/tgb/gi,).join("TechGeekBuzz");
document.write(new_string);

Output:

Welcome to TechGeekBuzz, TechGeekBuzz provide you everything you need to know

Summary:

To replace a substring from a string you can use any of these techniques, here the important thing is a regular expression which we have used to find the correct substring from the string. Though we suggest you use the replace() method rather than split and join because replace() is a string method and it is very fast as compared to split and join.

If you want to learn JavaScript you can visit BitDegree, they are providing the best JavaScript tutorials at very affordable pricing.

Top comments (0)