How to find and replace all occurrences of a String in JavaScript

Learn how to find and replace all occurrences of a String in JavaScript. You will learn about the String.replace() method that is available in JavaScript and how it works!


let emailTemplate = `
We, at <company>, believe in
providing the best online education on JavaScript
If you like our content, please hit the like and
subscribe to our YouTube channel
Thank you
<Company> team
let replaced = emailTemplate.replace("<company>", "bonsaiilabs");
let regex = /<company>/gi
let replacedRegEx = emailTemplate.replace(regex, "bonsaiilabs");

Full Transcript

0:00 Hey, it's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today. In this video you will learn how to replace all occurrences of a string, with another string. But when would that be useful? Let's find out with the real world use case. Let's say we have an email template that we use to send an email to all our customers. In this email we have a company tag that we want to replace with our company before sending out email to all our customers. So what do we do? We find the tag and then we find two occurrences of that. And what we do next we say we want to replace that with a pattern. And what is that pattern?

0:41 We replace that with a company of our name. Now if you see all these options here, the one that we want to use is replace all. So what we are doing is we are taking a string with a company tag and we're replacing that with a company of our name. And once we do that we have the company name replace at all the places. Now consider that you have to write a program to perform exactly the similar operation in JavaScript. How would we do that? Let's find out, so over here we have a variable called email template that is an exact copy of the email template that we saw few minutes ago. Now what we need to do is to change all the company tags available in this email template with the company name of our choice. Since email template is a string, we are going to use a method on email template called replace, so we'll call replace and we will tell it what pattern to find.

1:32 In this case the company tag and we will replace that with the bonsaiilabs as the replacement string. Now what we'll do, we'll console.log of this result because replace gives you a new string and let's run it now. We will see that the first replacement has happened. The company has been changed to bonsaiilabs but the second replacement and did not happen. It is still the company tag. Why? If you head over to the documentation of string dot replace, you will find a section where it says if a pattern is a string only the first occurrence will be replaced and that explains why the company tag was replaced just one with the bonsaiilabs and not the second one. Okay, so what do we do so that all the company tags get replaced with the company name of our choice. We are going to make use of regular expressions here. So we'll create a variable called regex and between two forward slash we will identify what pattern we want to find and then we will use the emailtemplate.replace method by passing in the regular expression as the first argument which is what we have to find and bonsaiilabs as the second argument with what we need to replace. We will run the console.log of the new string that is returned by replace and when we run it you will see that the first pattern has been replaced but the second part is still sitting at the company tag.

2:55 It has not been replaced. It is because string dot replace method on regular expression is also changing only the first occurrence and not all of them. So how do we tell the regular expression to make the changes to all the company tags and not just the first one? In order to do that, we will indicate that our regular expression is a global search. You do that by putting a G after the second forward slash on a regular expression, and once we clean and run it again, you would see now that both the patterns have been replaced by the bonsaiilabs as the company name. Now what if our From tags have inconsistencies in the casing? So for example, instead of company as a small C, we have a capital C in the second pattern. Now would this code work? Let's find out. So we clean and when we run it, you would see that the first pattern has been replaced, but the second pattern has not.

3:48 It means that the regular expression in the global search failed to identify the company because of the inconsistency in the naming of the tag. To fix this issue, we tell our regular expression to make the search case insensitive. We do that by putting the letter I after the forward slash. In this example, we are using G and I, which means that this regular expression is doing a global search and is also case insensitive. So now when we go and run this code again, you would see that both patterns have been replaced by bonsaiilabs instead of the company. tag. Isn't that great? So as you see, we use the powerful regular expression in combination to string dot replace to replace all the occurrences of a string with another string. And that's it. I hope you learned something new today. If you liked the video, please hit the subscribe button on our channel to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. See you next time.