4 Examples of Replace All in JavaScript You Should Know

JavaScript , 0 Comments

In this article, we will learn about replace all in JavaScript with 6 types of examples simple to RegExp (regular expression).

There are a lot of ways to replace the value in JavaScript.

But, JavaScript already has an inbuilt array method replace but, with using simple, It only replaced the first matched value. For example below:

#1 Simple Example

var a = 'can i replace all the replace word with no using replace method';
a = a.replace('replace', 'no')
// OUTPUT: "can i no all the replace word with no using replace method"

As you saw in the above example, there are 3 replace words in the given sentence and I tried to replace the replace word with no and it replaced the first word only.

#1.1 Replace number

As strings in the above example, it works well with numbers too. For example:

var b = 'here we are gonna replace 2 with 3 so we need more 2';
b = b.replace('2', '3')
// OUTPUT: "here we are gonna replace 3 with 3 so we need more 2"

Did you see it replaced only first 2 in the given sentence?

Definition

So, the replace method in JavaScript returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp (Regular Expression).

source

Wait, you said all matches in definition but, replace method is replacing only the first match? what’s going on?

Let me explain to you, In the replace method the first parameter you can pass is a pattern and in the pattern you can pass string or a RegExp (Regular Expression).

So whenever you pass a string, it is going to replace the first match in the string with the replacement that you passed in the second parameter of the replace method.

And If you want to replace all the matching matches you have to pass the RegExp.

Let’s see how in the below example:

#2 Replace all

#2.1 Replace all in JavaScript

We can also replace all matched values in the replace method using RegExp, For example:

var c = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

var regex = /dog/gi;

c = c.replace(regex, 'ferret');
// output: "The quick brown fox jumps over the lazy ferret. If the ferret reacted, was it really lazy?"

Did you noticed this time with RegExp replace method replaced all the matching dog words with ferret.

Explanation

In the variable p we had a string sentence.

The variable called regex we stored the RegExp pattern to match dog.

Inside regex the two forward slashes indicate the start and end of the regular expression.

g is a flag that indicates it is a global search so it will not return after the first match.

i is a flag same as g but it means insensitive (case insensitive match).

#2.2 Sensitive replace all in JavaScript

As I think RegExp is powerful and you can modify RegExp as your needs. Here we are gonna modify RegExp for the sensitive match case.

var d = 'The quick brown fox jumps over the lazy dog. If the Dog reacted, was it really lazy?';

var regex = /dog/g;

d = d.replace(regex, 'ferret');
// output: The quick brown fox jumps over the lazy ferret. If the Dog reacted, was it really lazy?

I made the second capital D in the second Dog word and remove the i flag from the regex that indicates the insensitive match.

See the output in the above example. It only replaced the first dog word because the second dog word contains capital D. That simple!

#2.3 Creating Dynamic RegExp

Just in case, If you want to match a dynamic keyword with RegExp. Here you can do like the example below:

var find = 'abc';
str = 'a very nice abcline here'
var re = new RegExp(find, 'g');

str.replace(re, '');
// Output: "a very nice line here"

In the above example, I have created a variable called find that can contain dynamic value.

#2.4 Generic replace all method

In the below example I’m gonna create a generic replace all method that takes a string in the first parameter and value to find in the second parameter and the replacement value in the third parameter.

function replaceAll(str, find, replace) {
    return str.replace(new RegExp(find, 'g'), replace);
}

replaceAll('the line of', 'of', 'here')
// Output: "the line here"

Note: Regular expressions contain special (meta) characters, and as such it is dangerous to blindly pass an argument in the find function above without pre-processing it to escape those characters. This is covered in the Mozilla Developer Network‘s JavaScript Guide on Regular Expressions,

Conclusion

replace method replaced first matched value if you passed the string in the first parameter but if you use RegExp you can replace all matches and you can customize match as your needs.

Thank you for reading, please share with love. If you got the typo or any other mistake please let me know.

Spread the love

Leave a Reply

avatar
  Subscribe  
Notify of