JavaScript: RegExp constructor vs RegEx literal

Solution 1:

The key difference is that literal REGEX can't accept dynamic input, i.e. from variables, whereas the constructor can, because the pattern is specified as a string.

Say you wanted to match one or more words from an array in a string:

var words = ['foo', 'bar', 'orange', 'platypus'];
var str = "I say, foo, what a lovely platypus!";
str.match(new RegExp('\\b('+words.join('|')+')\\b', 'g')); //["foo", "platypus"]

This would not be possible with a literal /pattern/, as anything between the two forward slashes is interpreted literally; we'd have to specify the allowed words in the pattern itself, rather than reading them in from a dynamic source (the array).

Note also the need to double-escape (i.e. \\) special characters when specifying patterns in this way, because we're doing so in a string - the first backslash must be escaped by the second so one of them makes it into the pattern. If there were only one, it would be interpreted by JS's string parser as an escaping character, and removed.

Solution 2:

1. As you can see, the RegExp constructor syntax requires string to be passed. \ in the string is used to escape the following character. Thus,

   new RegExp("\s") // This gives the regex `/s/` since s is escaped.
   

   will produce the regex s.

   Note: to add modifiers/flags, pass the flags as second parameter to the constructor function.

   While, /\s/ - the literal syntax, will produce the regex which is predictable.

2. The RegExp constructor syntax allows to create regular expression from the dynamically.

So, when the regex need to be crafted dynamically, use RegExp constructor syntax otherwise use regex literal syntax.