Something similar to the /x flag

[csdude55]

I'm pretty sure that I know the answer to this, but is there a way to make JavaScript or jQuery regex more readable? Or apply comments?

I use the /x flag in other languages, but it doesn't work in JavaScript.

I thought I'd be slick and create a variable that's spaced out all pretty like and then just remove the spaces; but JavaScript doesn't like that, either.

var foo = 'lorem ipsum';
var exp = '/
 lorem |
 ipsum
/';

exp = exp.replace(/\s/, '');

if (exp.test(foo))
 // do stuff

I came across XRegExp:

[xregexp.com...]

but I really don't want to have to import a whole extra thing just for this one little detail.

Any other suggestions?

[robzilla]

There's this option:

/*
 * break JSON.stringify(rx_token.source)
 * into multiline constructor-form for readability
 */
const rx_token = new RegExp(
  "^("
  + "(\\s+)"
  + "|([a-zA-Z_$][a-zA-Z0-9_$]*)"
  + "|[(){}\\[\\],:;'\"~`]"
  + "|\\?\\.?"
  + "|=(?:==?|>)?"
  + "|\\.+"
  + "|[*\\/][*\\/=]?"
  + "|\\+[=+]?"
  + "|-[=\\-]?"
  + "|[\\^%]=?"
  + "|&[&=]?"
  + "|\\|[|=]?"
  + "|>{1,3}=?"
  + "|<<?=?"
  + "|!(?:!|==?)?"
  + "|(0|[1-9][0-9]*)"
  + ")(.*)$"
);

From [mail.mozilla.org...]

[lucy24]

exp = exp.replace(/\s/, '');

Did you forget the /g at the end? (“Replace all of them, not just the first one you meet.”)

[csdude55]

@lucy24, yes I did! LOL But my test script never made it that far anyway, I'm getting an error at the var exp = '/ line: Uncaught SyntaxError: Invalid or unexpected token

@robzilla, I might have to go that route, thanks! I've gotten spoiled with the /x flag in server side programming, so I was REALLY hoping that JS might have something similar. Oh well.

[lucy24]

I'm also not sure about the quotation mark in

var exp = '/

I don't use them myself when making a /blahblah/ expression, but can't remember if it's an actual error, or just not required.

[csdude55]

I tried it with a single quote, double quote, tick mark, and no quote at all, with and without new RegExp[(), but all of them threw an error.

But now I see that JSFiddle doesn't think that .replace() is a function, either, so maybe I'm doing something totally wrong?

[jsfiddle.net...]

[lucy24]

Does it really say

exp.replace(/\s/g, '');

and-that's-all? In the example from your first post, it was
exp=exp.replace et cetera.

Dosn't the do-stuff bit after an "if" have to be in braces? Or is that only when there are multiple lines? I have a nasty feeling I'm reading the jsfiddle version inside-out, causing much confusion. This is what I see:

var foo = 'lorem ipsum',
exp = /lorem|ipsum/;

exp.replace(/\s/g, '');

if (exp.test(foo))
console.log('yes');

[csdude55]

Sorry, I was playing to see if I could make it understand the replace() function. I originally had exp = exp.replace(/\s/g, ''); and it threw an error, so I changed it for testing.

This one is fixed:

[jsfiddle.net...]

You're right, in JS the { } is only required if there are multiple lines.

[lucy24]

Ohh. Is THAT what you meant by /x. Nope, not a javascript flag; in fact I had to go to RegExInfo to see what the heck it means. Regular Expressions in javascript are, well, not especially robust.

:: detour to experiment ::

I think the problem is a more fundamental one: you can't have physical line breaks in a variable declaration. You'd have to go to the format robzilla posted above, with the + "blahblah" on each line. I experimented and found this works both in slash-delimited /blahblah/ form and "new RegExp" form ... but either way it gets you pretty far from your original plan, which was to make the whole thing more readable!

[csdude55]

Hahaha, I would have bet money that YOU were the one that first told me about it! LOL

In other languages I can make regex nice and purty using /x:

# typed but not tested, don't hold me to any typos
if ($blah =~ m/
 foo | # comment
 bar | # another one
 lorem
/x) {
 // do this
}

Oh well, it's not a tragedy. It'd have been nice, though!

[Fotiman]

In your examples, you're not accounting for the newline characters.

A couple of options: use individual strings (to be able to add comments on each item), add the individual strings in an array, and the call .join('') on the array to combine into 1 big string. With this approach, there's no newlines or whitespace to worry about:

var foo = 'lorem ipsum';
var exp = new RegExp([
 'lorem', // 1st Alternative lorem matches the characters lorem literally (case sensitive)
 '|',
 'ipsum' // 2nd Alternative ipsum matches the characters ipsum literally (case sensitive)
].join(''));

if (exp.test(foo))
 // do stuff

This gives you the ability to add comments. However, it's still not ideal since each item needs to be wrapped in quotes.

Alternatively, you could use a backtick string to wrap the entire thing, and then replace the newlines and spaces. But the problem here is that you can't add comments to the lines:

var foo = 'lorem ipsum';
var exp = new RegExp(`
 lorem
 |
 ipsum
`.replace(/\n/g,'').replace(/\s/g,''));

if (exp.test(foo))
 // do stuff

But with a little additional RegExp, you could replace the comments as well:

var foo = 'lorem ipsum';
var exp = new RegExp(`
 lorem // 1st Alternative lorem matches the characters lorem literally (case sensitive)
 |
 ipsum // 2nd Alternative ipsum matches the characters ipsum literally (case sensitive)
`.replace(/\/\/.*\n/g,'').replace(/\s/g,''));

if (exp.test(foo))
 // do stuff