What extra care should be taken when using Regular expressions in Javascript
Learn the tricky behavior when working with regular expressions
Yogesh Chavan
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 likenew 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.
Upvote
Yogesh Chavan
Freelancer and a Full Stack Developer with 10+ years of professional experience in designing, developing, and maintaining amazing web applications and websites using React, JavaScript, Node.js, HTML and CSS.

Related Articles