How can I concatenate regex literals in JavaScript?

Question

Is it possible to do something like this?

var pattern = /some regex segment/ + /* comment here */
    /another segment/;

Or do I have to use new RegExp() syntax and concatenate a string? I'd prefer to use the literal as the code is both more self-evident and concise.

It's easier to deal with escaped regex characters if you use String.raw(): `let regexSegment1 = String.raw\`\s*hello\s*\`` — iono, Aug 03 '19 at 08:14

score 222 · Accepted Answer · edited Aug 16 '23 at 18:30

222

Here is how to create a regular expression without using the regular expression literal syntax. This lets you do arbitrary string manipulation before it becomes a regular expression object:

var segment_part = "some bit of the regexp";
var pattern = new RegExp("some regex segment" + /*comment here */
              segment_part + /* that was defined just now */
              "another segment");

If you have two regular expression literals, you can in fact concatenate them using this technique:

var regex1 = /foo/g;
var regex2 = /bar/y;
var flags = (regex1.flags + regex2.flags).split("").sort().join("").replace(/(.)(?=.*\1)/g, "");
var regex3 = new RegExp(regex1.source + regex2.source, flags);
// regex3 is now /foobar/gy

It's just more wordy than just having expression one and two being literal strings instead of literal regular expressions.

edited Aug 16 '23 at 18:30

Kevin Stolp

48
1
6

answered Oct 09 '08 at 00:54

Jerub

41,746
15
73
90

2

Keep in mind that each segment must be a valid regular expression when using this approach. Constructing an expression such as `new RegExp(/(/.source + /.*/.source + /)?/.source);` doesn't seem to work. – Sam Apr 24 '13 at 12:49
This solution does not work in the case of back-matching groups. See my answer for a working solution in that case. – Mikaël Mayer Nov 28 '14 at 15:03
If you need to escape a char, then use double backslashes: new Regexp('\\$' + "flum") – Jeff Lowery Nov 20 '15 at 22:29
You can access the flags if you have to with ".flags", so theoretically you could combine them as well. – bnunamak Jul 14 '17 at 09:13
2

Where are you getting `expression_one` from? Do you mean `regex1`? – TallOrderDev May 07 '19 at 02:11

score 45 · Answer 2 · edited Dec 10 '19 at 13:05

45

Just randomly concatenating regular expressions objects can have some adverse side effects. Use the RegExp.source instead:

var r1 = /abc/g;
var r2 = /def/;
var r3 = new RegExp(r1.source + r2.source, 
                   (r1.global ? 'g' : '') 
                   + (r1.ignoreCase ? 'i' : '') + 
                   (r1.multiline ? 'm' : ''));
console.log(r3);
var m = 'test that abcdef and abcdef has a match?'.match(r3);
console.log(m);
// m should contain 2 matches

This will also give you the ability to retain the regular expression flags from a previous RegExp using the standard RegExp flags.

jsFiddle

edited Dec 10 '19 at 13:05

Flimm

136,138
45
251
267

answered Mar 20 '14 at 19:39

Japheth Salva

473
4
6

1

This can be improved using `RegExp.prototype.flags` – Parzh from Ukraine Jan 26 '17 at 14:26
Why just check flags of r1? – aderchox Jan 17 '23 at 23:30

score 23 · Answer 3 · answered Jan 14 '10 at 16:17

I don't quite agree with the "eval" option.

var xxx = /abcd/;
var yyy = /efgh/;
var zzz = new RegExp(eval(xxx)+eval(yyy));

will give "//abcd//efgh//" which is not the intended result.

Using source like

var zzz = new RegExp(xxx.source+yyy.source);

will give "/abcdefgh/" and that is correct.

Logicaly there is no need to EVALUATE, you know your EXPRESSION. You just need its SOURCE or how it is written not necessarely its value. As for the flags, you just need to use the optional argument of RegExp.

In my situation, I do run in the issue of ^ and $ being used in several expression I am trying to concatenate together! Those expressions are grammar filters used accross the program. Now I wan't to use some of them together to handle the case of PREPOSITIONS. I may have to "slice" the sources to remove the starting and ending ^( and/or )$ :) Cheers, Alex.

I like the use of the source-property. If you - like me - use jslint it will nag if you do something like this: `var regex = "\.\..*"` — Nils-o-mat, Jun 03 '15 at 15:34
"*I don't quite agree with the `eval` option.*" - where did you get that from? — Bergi, Jun 20 '23 at 12:12

score 9 · Answer 4 · answered Nov 28 '14 at 15:01

Problem If the regexp contains back-matching groups like \1.

var r = /(a|b)\1/  // Matches aa, bb but nothing else.
var p = /(c|d)\1/   // Matches cc, dd but nothing else.

Then just contatenating the sources will not work. Indeed, the combination of the two is:

var rp = /(a|b)\1(c|d)\1/
rp.test("aadd") // Returns false

The solution: First we count the number of matching groups in the first regex, Then for each back-matching token in the second, we increment it by the number of matching groups.

function concatenate(r1, r2) {
  var count = function(r, str) {
    return str.match(r).length;
  }
  var numberGroups = /([^\\]|^)(?=\((?!\?:))/g; // Home-made regexp to count groups.
  var offset = count(numberGroups, r1.source);    
  var escapedMatch = /[\\](?:(\d+)|.)/g;        // Home-made regexp for escaped literals, greedy on numbers.
  var r2newSource = r2.source.replace(escapedMatch, function(match, number) { return number?"\\"+(number-0+offset):match; });
  return new RegExp(r1.source+r2newSource,
      (r1.global ? 'g' : '') 
      + (r1.ignoreCase ? 'i' : '')
      + (r1.multiline ? 'm' : ''));
}

Test:

var rp = concatenate(r, p) // returns  /(a|b)\1(c|d)\2/
rp.test("aadd") // Returns true

Yes (I won't modify it up here though). This function is associative, so you can use the following code: `function concatenateList() { var res = arguments[0]; for(var i = 1; i < arguments.length; i++) { res = concatenate(res, arguments[i]); } return res; }` — Mikaël Mayer, Apr 17 '15 at 09:42

antoni · Answer 5 · 2017-01-26T09:59:42.067

Providing that:

you know what you do in your regexp;
you have many regex pieces to form a pattern and they will use same flag;
you find it more readable to separate your small pattern chunks into an array;
you also want to be able to comment each part for next dev or yourself later;
you prefer to visually simplify your regex like /this/g rather than new RegExp('this', 'g');
it's ok for you to assemble the regex in an extra step rather than having it in one piece from the start;

Then you may like to write this way:

var regexParts =
    [
        /\b(\d+|null)\b/,// Some comments.
        /\b(true|false)\b/,
        /\b(new|getElementsBy(?:Tag|Class|)Name|arguments|getElementById|if|else|do|null|return|case|default|function|typeof|undefined|instanceof|this|document|window|while|for|switch|in|break|continue|length|var|(?:clear|set)(?:Timeout|Interval))(?=\W)/,
        /(\$|jQuery)/,
        /many more patterns/
    ],
    regexString  = regexParts.map(function(x){return x.source}).join('|'),
    regexPattern = new RegExp(regexString, 'g');

you can then do something like:

string.replace(regexPattern, function()
{
    var m = arguments,
        Class = '';

    switch(true)
    {
        // Numbers and 'null'.
        case (Boolean)(m[1]):
            m = m[1];
            Class = 'number';
            break;

        // True or False.
        case (Boolean)(m[2]):
            m = m[2];
            Class = 'bool';
            break;

        // True or False.
        case (Boolean)(m[3]):
            m = m[3];
            Class = 'keyword';
            break;

        // $ or 'jQuery'.
        case (Boolean)(m[4]):
            m = m[4];
            Class = 'dollar';
            break;

        // More cases...
    }

    return '<span class="' + Class + '">' + m + '</span>';
})

In my particular case (a code-mirror-like editor), it is much easier to perform one big regex, rather than a lot of replaces like following as each time I replace with a html tag to wrap an expression, the next pattern will be harder to target without affecting the html tag itself (and without the good lookbehind that is unfortunately not supported in javascript):

.replace(/(\b\d+|null\b)/g, '<span class="number">$1</span>')
.replace(/(\btrue|false\b)/g, '<span class="bool">$1</span>')
.replace(/\b(new|getElementsBy(?:Tag|Class|)Name|arguments|getElementById|if|else|do|null|return|case|default|function|typeof|undefined|instanceof|this|document|window|while|for|switch|in|break|continue|var|(?:clear|set)(?:Timeout|Interval))(?=\W)/g, '<span class="keyword">$1</span>')
.replace(/\$/g, '<span class="dollar">$</span>')
.replace(/([\[\](){}.:;,+\-?=])/g, '<span class="ponctuation">$1</span>')

score 5 · Answer 6 · answered Sep 17 '19 at 19:23

5

You can concat regex source from both the literal and RegExp class:

var xxx = new RegExp(/abcd/);
var zzz = new RegExp(xxx.source + /efgh/.source);

answered Sep 17 '19 at 19:23

Jeff Lowery

2,492
2
32
40

score 4 · Answer 7 · answered Jul 25 '12 at 01:52

4

It would be preferable to use the literal syntax as often as possible. It's shorter, more legible, and you do not need escape quotes or double-escape backlashes. From "Javascript Patterns", Stoyan Stefanov 2010.

But using New may be the only way to concatenate.

I would avoid eval. Its not safe.

answered Jul 25 '12 at 01:52

Jonathan Wright

49
1

1

I think complex regular expressions are more legible when broken up and commented like in the question. – Sam Apr 24 '13 at 12:30

score 4 · Answer 8 · answered Mar 24 '17 at 23:38

4

You could do something like:

function concatRegex(...segments) {
  return new RegExp(segments.join(''));
}

The segments would be strings (rather than regex literals) passed in as separate arguments.

answered Mar 24 '17 at 23:38

Neil Strain

586
4
4

score 2 · Answer 9 · answered Apr 22 '14 at 21:08

Use the constructor with 2 params and avoid the problem with trailing '/':

var re_final = new RegExp("\\" + ".", "g");    // constructor can have 2 params!
console.log("...finally".replace(re_final, "!") + "\n" + re_final + 
    " works as expected...");                  // !!!finally works as expected

                         // meanwhile

re_final = new RegExp("\\" + "." + "g");              // appends final '/'
console.log("... finally".replace(re_final, "!"));    // ...finally
console.log(re_final, "does not work!");              // does not work

score 1 · Answer 10 · answered Oct 09 '08 at 01:00

1

No, the literal way is not supported. You'll have to use RegExp.

answered Oct 09 '08 at 01:00

Aupajo

5,885
6
30
28

score 1 · Answer 11 · answered Nov 06 '19 at 14:36

1

the easier way to me would be concatenate the sources, ex.:

a = /\d+/
b = /\w+/
c = new RegExp(a.source + b.source)

the c value will result in:

/\d+\w+/

answered Nov 06 '19 at 14:36

Daniel Aragão

116
4

Александр Липухин · Answer 12 · 2023-06-23T08:04:31.503

1

If you need concatenation in a regular expression, don't write wild code, just use RegEXP, backslashes and concatenation.

What do you need:

const cookieName = 'my-cookie';
const regex = /(?:(?:^|.*;\s*)cookieName\s*\=\s*([^;]*).*$)|^.*$/;

How to implement:

const cookieName = 'my-cookie';
const regex = new RegExp('(?:(?:^|.*;\\s*)' + cookieName + '\\s*\\=\\s*([^;]*).*$)|^.*$');
console.log(regex);

Good luck!

edited Jun 23 '23 at 08:04

answered Jun 20 '23 at 11:46

Александр Липухин

11
3

score -3 · Answer 13 · answered Apr 15 '09 at 15:12

-3

I prefer to use eval('your expression') because it does not add the /on each end/ that ='new RegExp' does.

answered Apr 15 '09 at 15:12

Praesagus

2,029
5
30
48

How can I concatenate regex literals in JavaScript?

13 Answers13

Linked

Related