Javascript Regular Expression multiple match

Question

I'm trying to use javascript to do a regular expression on a url (window.location.href) that has query string parameters and cannot figure out how to do it. In my case, there is a query string parameter can repeat itself; for example "quality", so here I'm trying to match "quality=" to get an array with the 4 values (tall, dark, green eyes, handsome):

http://www.acme.com/default.html?id=27&quality=tall&quality=dark&quality=green eyes&quality=handsome

Those parameters makes no sense. – Anders Oct 31 '11 at 13:06 — Anders, Oct 31 '11 at 13:06

alex · Accepted Answer · 2011-10-31T23:25:51.133

34

You can use a regex to do this.

var qualityRegex = /(?:^|[&;])quality=([^&;]+)/g,
    matches,
    qualities = [];

while (matches = qualityRegex.exec(window.location.search)) {
    qualities.push(decodeURIComponent(matches[1]));   
}

jsFiddle.

The qualities will be in qualities.

edited Oct 31 '11 at 23:25

answered Oct 31 '11 at 13:00

alex

479,566
201
878
984

Use `window.location.search`, not pathname or href. – kojiro Oct 31 '11 at 13:02
@kojiro Yeah, fixed that almost immediately :) – alex Oct 31 '11 at 13:05
Where is *quantities* defined? :P – kojiro Oct 31 '11 at 13:10
2

I'd have to suggest adding `$` to the ending class, and `^\?` to the beginning one, to account for `quality`'s at the beginning and end of the query string: `/[^\?&;]?quality=([^&;$]+)/g` – Ryan Kinal Oct 31 '11 at 13:10
@RyanKinal Inside of a character class `^` (unless the first) and `$` are taken literally. I'd need to use `(?:$|[&;])`. Also, [my code works](http://jsfiddle.net/mLBhG/) *as is* if the `quality` GET param is at the start or end. – alex Oct 31 '11 at 13:16
This works perfectly and solves the problems I was having!! So I think what's happening is that [^\?&;] matches either a ? or a &(and the ? needs to be escaped), but I'm not sure what the ; is for. And than following this is the quality= followed by what we are trying to match. The () instructs this to be added to the returned array and inside the () is the reqular expression that matches the end: either a & of the $ meaning the end; but I'm not sure I understand the ^ and ; inside the [^&;$]. And I guess the plus is needed to provide for the possibility of multiple occurences. Thank you again – user815460 Oct 31 '11 at 13:32
@user You are close, but not exactly correct. The `;` is because it is a valid delimiter for GET params. – alex Oct 31 '11 at 13:34
I used your first response to get the array I needed, which I don't see anymore: var window.location.search.match(/[^\?&;]?quality=([^&;$]+)/g); It works fine for me as far as I can tell; is there a problem with this? I use the value to the right of the equal sign in each array element the aformentioned statement returns. I ask because I see your current solution is a little different than the one line solution I first saw. Thanks!! – user815460 Oct 31 '11 at 19:48
@user815460 It shouldn't really matter, only I made that capturing group optional so it may match something like `prefixquality`. Now it won't. – alex Oct 31 '11 at 21:39
The given solution doesn't capture the quality parameter if it's the first parameter. – DylanYoung Apr 02 '20 at 19:31

score -2 · Answer 2 · edited Apr 03 '20 at 05:39

-2

A slight variation of @alex 's answer for those who want to be able to match non-predetermined parameter names in the url.

var getUrlValue = function(name, url) {
  var valuesRegex = new RegExp('(?:^|[&;?])' + name + '=([^&;?]+)', 'g')
  var matches;
  var values = [];

  while (matches = valuesRegex.exec(url)) {
      values.push(decodeURIComponent(matches[1]));   
  }

  return values;
}

var url = 'http://www.somedomain.com?id=12&names=bill&names=bob&names=sally';

// ["bill", "bob", "sally"]
var results = getUrlValue('names', url);

jsFiddle

edited Apr 03 '20 at 05:39

DylanYoung

2,423
27
30

answered May 16 '16 at 15:16

Antoine Dahan

574
2
9
23

[This code has numerous issues parsing query strings](http://zzzzbov.com/blag/querystring-hell). – zzzzBov May 16 '16 at 15:22
@zzzzBov The code assumes a query string where the parameters begin with a `?` and each are seperated with `&` or `;` (the same format as the asker specified). Handling the many edge cases you describe in your blog post wouldn't be worth the complexity it added. Off course if you want to handle those edge cases jquery has a function for parsing a url into an object instead of implementing your own with DOM (like the asker specified). – Antoine Dahan May 16 '16 at 16:15
My main point is: don't reinvent the wheel, use a library that does it correctly (or at least mostly correctly). – zzzzBov May 16 '16 at 16:56

Javascript Regular Expression multiple match

2 Answers2

Linked