replaceall string javascript

String ReplaceAll() Method in JavaScript With Regex

by

Are you ready to master the power of the string replaceAll() method in JavaScript?

In this article, you’ll learn how to use it with both strings and regular expressions (regex), along with examples and explanations.

You’ll also understand the difference between replace() and replaceAll().

Let’s get started to master string manipulation and enhance your skills in JavaScript.

What is string ReplaceAll() method in JavaScript?

The replaceAll() method in JavaScript is a string method that allows you to replace all occurrences of a specified string or regular expression with another string.

Syntax

string.replaceAll(pattern, replacement)✅

Parameter

pattern (Required)

This can be a string or a RegExp (regular expression). If it’s a RegExp, it must have the global (g) flag set.

replacement (Required)

This can be a string or a function. If it’s a function, it will be called for each match.

Return value

The replaceAll() method returns a new string with all matches of the pattern replaced by the replacement.

The original string remains as it was and is not altered.

Here’s an example:

let sampleString = "Hi, this is Codes! This is Codes, Hi!";
let newSampleString = sampleString.replaceAll("Codes", "Itsourcecodes"); ✅
console.log(newSampleString);

As you can see, replaceAll() method replaces all instances of “Codes” with “Itsourcecodes.”

📌 Please note that if you’re using a string as the pattern, replaceAll() automatically replaces all instances of that string the same as the given example above.

However, if you’re using a regular expression (regex) as the pattern, you must include the global (g) flag.

If the global flag is not included, replaceAll() will throw a TypeError. 


let sampleString = "Hi, welcome to itsourcecodes!";
let newSampleString = sampleString.replaceAll(/i/g, "I"); ✅
console.log(newSampleString);

In our second example, we are using a regular expression /i/g as the pattern. The “g” after the /i/ is the global flag, which tells replaceAll() to replace all instances of “i” in the string.

The “i” is replaced with the big letter “I” in the new string.

Output:

HI, welcome to Itsourcecodes!

This method does not change the original string but returns a new string with the replacements.

It’s a handy method when you need to make multiple replacements in a string.

How to use replaceAll() with regex JavaScript?

Here’s an example code using replaceAll() with a regular expression in JavaScript:

let sampleString = "Welcome to codes!Codes offers free sourcecode";
let newSampleString = sampleString.replaceAll(/codes/gi, "Itsourcecode"); ✅
console.log(newSampleString);

We used a regular expression /codes/gi as the pattern. The “g” after the /codes/ is the global flag, which tells replaceAll() to replace all instances of “codes” in the string.

Meanwhile, the “i” flag makes the pattern case-insensitive. So, “codes” is replaced with “Itsourcecode” in the new string.

Output:

Welcome to Itsourcecode!Itsourcecode offers free sourcecode

What is the difference between replace() and replaceAll() in JavaScript?

In JavaScript, we have two methods for replacing parts of a string which is the replace() and replaceAll() method.

The replace() method only makes one change at a time. It finds the first instance of your specified pattern in the string and replaces it.

If you want to replace all instances of the pattern, you need to tell it explicitly by using a global regular expression (regex) with the “g” flag.

Here’s an illustration:

let sampleString = "Hi welcome to Codes. Codes is my favorite website.";

console.log(sampleString.replace("Codes", "Itsourcecode")); ✅

Output:

Hi welcome to Itsourcecode. Codes is my favorite website.

On the other hand, replaceAll() method changes everything at once. It finds all instances of your specified pattern in the string and replaces them.

If you used replaceAll() with a regex pattern, you need to include the “g” flag, otherwise it gets confused and throws an error.

But if you used the replaceAll() with string pattern, it automatically replaces all instances of that string in the original string.

Here’s an illustration:

let sampleString = "Hi welcome to Codes. Codes is my favorite website.";

console.log(sampleString.replaceAll("Codes", "Itsourcecode"));  ✅

Output:

Hi welcome to Itsourcecode. Itsourcecode is my favorite website.

Conclusion

In conclusion, the replaceAll() method in JavaScript is used to replace all occurrences of a specified string or regular expression with another string.

This method is particularly useful when you need to make multiple replacements in a string.

The replaceAll() method differs from the replace() method in that it replaces all instances of the pattern, whereas replace() only replaces the first instance unless a global regular expression is used.

We hope this article has provided you with enough information to understand how to replaceall string in JavaScript.

If you want to explore more JavaScript topics, check out the following articles:

Thank you for reading Itsourcecoders 😊.

Leave a Comment