Regular Expressions (also called RegEx or RegExp) are a powerful way to analyze text. With RegEx, you can match strings at points that match specific characters (for example, JavaScript) or patterns (for example, NumberStringSymbol - 3a&).

The .replace method is used on strings in JavaScript to replace parts of string with characters. It is often used like so:

const str = 'JavaScript';
const newStr = str.replace("ava", "-");
// J-Script

As you can see above, the replace method accepts two arguments: the string to be replaced, and what the string would be replaced with.

Here is where Regex comes in.

The use of .replace above is limited: the characters to be replaced are known - "ava". What if we're concerned with a pattern instead? Maybe, a number, two letters, and the word "foo" or three symbols used together?

The .replace method used with RegEx can achieve this. RegEx can be effectively used to recreate patterns. So combining this with .replace means we can replace patterns and not just exact characters.

How to use RegEx with .replace in JavaScript

To use RegEx, the first argument of replace will be replaced with regex syntax, for example /regex/. This syntax serves as a pattern where any parts of the string that match it will be replaced with the new substring.

Here's an example:

// matches a number, some characters and another number
const reg = /\d.*\d/
const str = "Java3foobar4Script"
const newStr = str.replace(reg, "-");
// "Java-Script"

The string 3foobar4 matches the regex /\d.*\d/, so it is replaced.

What if we wanted to perform replacements at multiple places?

Regex already offers that with the g (global) flag, and the same can be used with replace. Here's how:

const reg = /\d{3}/g
const str = "Java323Scr995ip4894545t";
const newStr = str.replace(reg, "");
// JavaScrip5t
// 5 didn't pass the test :(

The regex matches parts of the string that are exactly 3 consecutive numbers. 323 matches it, 995 matches it, 489 matches it, and 454 matches it. But the last 5 does not match the pattern.

The result is that JavaScrip5t shows how the patterns are correctly matched and replaces with the new substring (an empty string).

The case flag - i can also be used. This means you can replace case-insensitive patterns. Here's how it is used:

const reg1 = /\dA/
const reg2 = /\dA/i
const str = "Jav5ascript"
const newStr1 = str.replace(reg1, "--");
const newStr2 = str.replace(reg2, "--");
console.log(newStr1) // Jav5ascript
console.log(newStr2) // Jav--script

..5a.. does not match the first syntax because RegEx is by default case-sensitive. But with the usage of the i flag, as seen in the second syntax, the string is as expected - replaced.

How to use Split with Regular Expressions

split also uses RegEx. Which means you can split a string not just at substrings that match exact characters, but also patterns.

Here's a quick look:

const regex = /\d{2}a/;
const str = "Hello54 How 64aare you";
// ["Hello54 How ", "are you"]

The string was split at 64a because that substring matches the regex specified.

Note that the global flag - g - in split is irrelevant, unlike the i flag and other flags. This is because split splits the string at the several points the regex matches.

Wrapping up

RegEx makes replaceing strings in JavaScript more effective, powerful, and fun.

You're not only restricted to exact characters but patterns and multiple replacements at once. In this article, we've seen how they work together using a few examples.

Cheers to RegEx ?