What is the difference between using "new RegExp" and using forward slash notation to create a regular expression?

Question

Is there any difference between using new RegExp("regex"); and /same_regex/ to test against a target string? I am asking this question because I got different validating result while use these two approaches. Here is the snippet I used to validate an email field:


var email="didxga@gmail.comblah@foo.com";

var regex1 = new RegExp("^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$"); 

var regex2 = /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/;

//using RegExp object
if(regex1.test(email))  {
       console.log("email matched regex1");    
  } else {
       console.log("email mismatched regex1");   
  }
//using slash notation
if(regex2.test(email))  {
       console.log("email matched regex2");   
  } else {  
       console.log("email mismatched regex2");
  }

I got two inconsistent results:


email matched regex1
email mismatched regex2

I am wondering if there is any difference here or I omitted something in this specific example?
For an executable example please refer to here

score 15 · Accepted Answer · answered May 27 '11 at 08:44

15

If you use the constructor to create a new RegExp object instead of the literal syntax, you need to escape the \‍ properly:

new RegExp("^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$")

This is necessary as in JavaScript any unknown escape sequence \x is interpreted as x. So in this case the \. is interpreted as ..

answered May 27 '11 at 08:44

Gumbo

643,351
109
780
844

In the slash notation ` \ ` and ` / ` out of char class definition must be escaped also. – Phillip Kovalev May 27 '11 at 08:46
@Philipp: Yes to `/` but no to the backslash. – Tim Pietzcker May 27 '11 at 08:48

score 13 · Answer 2 · answered May 27 '11 at 08:47

/.../ is called a regular expression literal. new RegExp uses the RegExp constructor function and creates a Regular Expression Object.

From Mozilla's developer pages

Regular expression literals provide compilation of the regular expression when the script is evaluated. When the regular expression will remain constant, use this for better performance.

Using the constructor function provides runtime compilation of the regular expression. Use the constructor function when you know the regular expression pattern will be changing, or you don't know the pattern and are getting it from another source, such as user input.

score 4 · Answer 3 · answered May 27 '11 at 08:44

this will be a help for you http://www.regular-expressions.info/javascript.html see the 'How to Use The JavaScript RegExp Object' section

if you are using RegExp(regx) regx should be in string format ex:- \w+ can be created as regx = /\w+/ or as regx = new RegExp("\\w+").

score 2 · Answer 4 · answered May 27 '11 at 08:46

2

Difference is in escaping at least in your case. When you use / / notation, you have to escape '/' with '\/', when you're using Regexp notation you escape quotes

answered May 27 '11 at 08:46

petho

677
4
10

` / ` out of char class definition must be escaped also – Phillip Kovalev May 27 '11 at 08:48

What is the difference between using "new RegExp" and using forward slash notation to create a regular expression?

4 Answers4

Linked

Related