Question

I have a long regex that is generated to match URLs like

/^\/([^\/.?]+)(?:\/([^\/.?]+)(?:\/([^\/.?]+)(?:\.([^\/.?]+))?)?)?$/

Would match:

/foo/bar/1.html

as ['foo', 'bar', '1', 'html']

In Javascript I would like to get the parts that match as the user types the url (like a typeahead). For example if they typed:

/foo

It would tell me that /foo was matched, but the whole regexp hasn’t been satisfied. Ruby can return an array with only the matching partial elements like : ['foo', nil, nil, nil] is this possible, or easy to do in Javascript?

Answer 1

@minitech basically gave half the answer: use ? after each group, and then you’ll be able to match the regex even if they’re missing. Once you can do that, then just check the groups of the regex result to see which bits have been matched and which haven’t.

For example:

/^\/([^\/.?]+)?(?:\/([^\/.?]+)?(?:\/([^\/.?]+)?(?:\.([^\/.?]+))?)?)?$/.exec('/ab/c')

Would return:

["/ab:c", "ab:c", "c", undefined, undefined]

By checking and seeing that the fourth value returned is undefined, you could then figure out which chunks were/were not entered.

As a side note, if you’re going to be working lots of regexs like this, you can easily lose your sanity just trying to keep track of which group is which. For this reason I strongly recommend using “named group” regular expressions. These are otherwise normal regular expressions that you can create if you use the XRegxp library (http://xregexp.com/), like so:

var result = XRegExp.exec('/ab/c', /^\/(?<fooPart>[^\/.?]+)?(?<barPart>?:\/([^\/.?]+)?(?:\/([^\/.?]+)?(?:\.([^\/.?]+))?)?)?$/)
var fooPart = result.fooPart

That library also has other handy features like comments that can similarly help keep regular expression under control. If you’re only using this one regex it’s probably overkill, but if you’re doing lots of JS regexp work I can’t recommend that library enough.