JavaScript RegEx with non-capturing group exhibiting bewildering behavior

Question

My question is very simple. Thank God because Regex's can be complex...

I have a query parameter in the url, given by ?id=0061ecp6cf0q.

I would like to match it, but only capture the part after the equals sign.

I have a regex as such:

(?:\?id=){1}([a-z0-9])+

When, in JavaScript, I have a string containing the query parameter and do a .match() on it with a regular expression object constructed from the regex above, I am returned an array of length 1 with the entry: "?id=0061ecp6cf0q".

When I do a .exec() on the regex with the query string as a parameter, I am returned an array of length 2:

array[0] = "?id=0061ecp6cf0q"
array[1] = "q"

1) Why is my non-capturing group seemingly capturing? 2) Why is "q" being captured, of all things?

Might be worth looking at this answer: http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript it has a handy utility function for grabbing query string parameters by name — Kyle Muir, Mar 09 '15 at 22:20

score 2 · Accepted Answer · answered Mar 09 '15 at 22:11

Your non-capture group is not capturing. The 0th element of the array is always the full value. If you want to capture just the value, you have to put parenthesis around what you want to capture:

> /(?:\?id=){1}([a-z0-9]+)/.exec('?id=0061ecp6cf0q')
["?id=0061ecp6cf0q", "0061ecp6cf0q"]

EDIT:

You put parenthesis around just ([a-z0-9]), which will match one character (in this case q), not the whole thing including the +.

score 1 · Answer 2 · answered Mar 09 '15 at 22:16

1

The + to match all of the alphanumeric characters wants to be inside the capturing group.

(?:\?id=){1}([a-z0-9]+)

answered Mar 09 '15 at 22:16

wnbates

743
7
16

score 0 · Answer 3 · answered Mar 09 '15 at 22:17

A couple things.

Turns out my regex needed to look like this:

(?:\?id=){1}([a-z0-9]+)

with the final "+" on the inside of the capture group!! That explains why it was capturing "q". The reason string.prototype.match wasn't working as I thought it should, was because I was doing

new RegExp("(?:\\?id=){1}([a-z0-9]+)", "g")

That "g" flag (global) apparently keeps it from returning an array of the capture groups and will instead return just the match(es). Without the "g" flag it behaves like RegExp.prototype.exec http://speakingjs.com/es5/ch19.html#String.prototype.match

score 0 · Answer 4 · edited May 23 '17 at 12:23

Copied from: How can I get query string values in JavaScript?

You don't need jQuery for that purpose. You can use just some pure JavaScript:

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

Usage:

var prodId = getParameterByName('prodId');

JavaScript RegEx with non-capturing group exhibiting bewildering behavior

4 Answers4