There are two ways of declaring pattern of regular expression in Javascript.

Regular expression literal syntax:

The literal syntax allows us to specify the pattern to match in between the two slashes like /hello/g

2. RegExp constructor syntax:

When we don’t know the pattern to match against For ex. If we are getting the pattern as user input or when the pattern may change, then we can use the RegExp constructor syntax

It takes the pattern as first parameter and flags as second parameter like
new RegExp("hello", "g")

Let’s say we have an input box where user enters phone number in format (123) 456–7890 and we want to get only digits from the string to store in database so we can do that using expression literal syntax as shown below

let phone = "(123) 456-7890";// match one or more occurrence or non-digit character
let pattern = /[^\d]+/g;console.log(phone.replace(pattern, '')); // prints 1234567890

Now let’s use RegExp constructor syntax

let phone = "(123) 456-7890";// match one or more occurrence or non-digit character
let pattern = new RegExp("[^\d]+", "g");console.log(phone.replace(pattern, '')); // prints empty string

Why it didn’t worked here?

This is because when using RegExp constructor syntax, we need to add an extra slash if we are using escape character like \d as in our example.

let phone = "(123) 456-7890";// match one or more occurrence or non-digit character
let pattern = new RegExp("[^\\d]+", "g");console.log(phone.replace(pattern, '')); // prints 1234567890

Now, it works as expected!

Let’s understand this through one more example.

Suppose, we have a string with extra spaces inside it and we want to remove the extra spaces, we can do that as shown below

Literal syntax:

let str = "This     is     some       text";
let pattern = /\s+/g; // match one or more occurrence of space// replace multiple spaces with single space
console.log(str.replace(pattern,' '));// output: This is some text

2. Constructor syntax:

let str = "This     is     some       text";
let pattern = new RegExp("\s+","g");  // match one or more occurrence of space// replace multiple spaces with single space
console.log(str.replace(pattern,' '));//output:  Thi      i       ome       text

What happened here is that, the the expression just replaced s with space which is not what we expected because it took \s as literal s when used inside constructor syntax.

To be able to get the correct output, we need to use two slashes.

let str = "This     is     some       text";
let pattern = new RegExp("\\s+","g");  // match one or more occurrence of space// replace multiple spaces with single space
console.log(str.replace(pattern,' '));// output: This is some text

Now, the output is as expected

Conclusion:

When using RegExp constructor syntax for regular expression match, we need to add extra slash to get the correct output.

That’s it for today. I hope you learned something new.

This article was originally published by Yogesh chavan on medium.