Parsing URL Query String to an Array

Question

I want to build a function that parses the URL query string (parameters and values) out of the current URL (e.g. document.location) and stores each key value pair (parameter=value) as an individual element within an array.

So for example, if the URL is: http://example.com?product=shoes&price=59.99&color=red

Then it returns: parameters = ["product=shoes","price=59.99",”color=red"];

Any suggestions?

Thanks,

Do you really just want strings like "name=value" in your array? Or do you want actual object values that can be referenced? — Kevin Boucher
– Kevin Boucher, Commented Apr 27, 2018 at 17:47
Just the strings, but i want the array to have a name that can be referenced. Also I want to function to have a name. — cap
– cap, Commented Apr 27, 2018 at 18:00
If you're using location.href you could use location.search.slice(1).split('&') instead. — Stephen P
– Stephen P, Commented Apr 27, 2018 at 18:00

Kevin Boucher · Accepted Answer · 2018-04-27 18:09:50Z

1

Depending on your browser requirements, you can use the URLSearchParams object:

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

var params = new URLSearchParams(location.search);

Or if you need to do it manually, you can split the location.search string:

var qs = location.search.replace('?', '');  // get querystring and remove question marks
var pairs = qs.split('&');                  // split on ampersand
var items = {};                             // declare object to store key/value pairs

// Loop through pairs and extract the key and the value (and append them to the object)
for (var i = 0; i < pairs.length; i++) {
    items[pairs[i].split('=')[0]] = pairs[i].split('=')[1];
}

console.log(items);

edited Apr 27, 2018 at 18:09

answered Apr 27, 2018 at 18:02

Kevin Boucher

16.8k3 gold badges51 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Usman · Accepted Answer · 2018-04-27 18:06:24Z

0

You can use .slice() and .split() methods of String:

let str = 'http://example.com?product=shoes&price=59.99&color=red';

let parser = url => url.slice(url.indexOf('?') + 1).split('&');
               
console.log(parser(str));

You can also create an object with key/value pairs by using .reduce():

let str = 'http://example.com?product=shoes&price=59.99&color=red';

let parser = url => url.slice(url.indexOf('?') + 1)
                       .split('&')
                       .reduce((a, c) => {
                         let [key, value] = c.split('=');
                         a[key] = value;
                         return a;
                       }, {});

console.log(parser(str));

Docs:

edited Apr 27, 2018 at 18:06

answered Apr 27, 2018 at 17:48

Mohammad Usman

39.6k20 gold badges99 silver badges101 bronze badges

3 Comments

cap Over a year ago

Thanks, this is great. But how do I give a name to the function, and to the array?

Evert Over a year ago

This is problematic for urls with a fragment identifier #

Mohammad Usman Over a year ago

@Evert Yes, you are right but my answer is specific to the format mentioned by OP.

Collectives™ on Stack Overflow

Parsing URL Query String to an Array

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related