9

How do I parse URL parameters in JavaScript? (These are the parameters I would ordinarily call GET parameters or CGI parameters, but in this case the page is basically submitting to itself, not a server, so there is no GET request and definitely no CGI program.)

I've seen a number of routines on the net that I can copy, but I have no idea how robust any of them are. I'm used to other languages like Perl and Java where I can rely on an extremely well-tested and robust library that I know will handle millions of little edge-cases in the standard. I would like the same here, rather than just cutting and pasting an example.

Improve this question
2
  • How many "edge-cases" are you expecting with simple GET data?! Commented Sep 1, 2009 at 14:10
  • 1
    Josh - like skip says, millions of little ones. Commented Sep 3, 2009 at 6:35

9 Answers 9

Reset to default
4

jQuery URL Utils or jQuery URL Parser.

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

2 Comments

I wanted to go this route, but it was too much to learn and get working today. It's my preferred answer for anyone with enough competence and who can handle the overhead of the jQuery framework.
"jQuery URL Parser." link is broken.
2

Here's are two simple functions that do the job : http://adamv.com/dev/javascript/querystring

Here is a sample of the API Reference :

var qs = new Querystring();

// Parse a given querystring
var qs2 = new Querystring("name1=value1&name2=value2");

var v1 = qs2.get("name1");
var v3 = qs2.get("name3", "default value");
Improve this answer

5 Comments

Thank you. That was lightweight and minimal yet still accomplished what I wanted: a library, rather than examples to copy. I wanted to use JQuery, but couldn't seem to figure it all out today, so that'll have to wait for another time.
The reason I posted these instead of jQuery is because you don't need a whole framework to manage such simple tasks.
Yes, and today it was nice to not have to rely on the whole framework.
The provided link is dead.
@ChristosBatzilis No surprise given it was posted ~12 years ago. I've now updated the link to use the Wayback machine instead.
1

If it's "submitting to itself," do you need to do GET parameters?

But if you do, most browsers now have the decodeURIComponent function which will handle individual parameters; your job is to split them on & (String#split will do that nicely). If you want a library, jQuery and Prototype are both well-used and tested.

Improve this answer

Comments

1

The best way I have found is to simply do it yourself and funnel the params into a global key/value object.

Getting quer params is simple...

just take a couple of .split()'s

var myquery = thewholeurl.split("?")[1]; //will get the whole querystring with the ?

then you can do a

myparams = myquery.split("&")

then you can do 

for each param in myparams
{
temp = param.split("=");

mykeys.push(temp[0]);
myvalues.push(temp[1]);

OR

myObject[temp[0]] = temp[1];
}

It's just a matter of style.

This is not perfect code, just psuedo stuff to give you the idea.

Improve this answer

1 Comment

If you do that, you'll need to run both the keys and values through decodeURIComponent.
1

I use the parseUri library available here: http://stevenlevithan.com/demo/parseuri/js/

It allows you to do exactly what you are asking for:

var uri = 'http://google.com/?q=stackoverflow';
var q = uri.queryKey['q'];
// q = 'stackoverflow'

I've been using it for a while so far and haven't had any problems.

Improve this answer

Comments

0

I found this useful for simple url parsing, modifying url (like adding new query params): https://github.com/derek-watson/jsUri

Improve this answer

1 Comment

How is the browser compatibility for jsUri?
0

I recommend query-string library

Installing:

npm install query-string

Usage:

import queryString from 'query-string';

console.log(location.search);
//=> '?foo=bar'

const parsed = queryString.parse(location.search);
console.log(parsed);
//=> {foo: 'bar'}

parsed.foo = 'unicorn';
parsed.ilike = 'pizza';

const stringified = queryString.stringify(parsed);
//=> 'foo=unicorn&ilike=pizza'

location.search = stringified;
// note that `location.search` automatically prepends a question mark
console.log(location.search);
//=> '?foo=unicorn&ilike=pizza'

https://www.npmjs.com/package/query-string

Improve this answer

Comments

-1

Javascript has no built in support for URL parameters.

Anyway, the location.search property returns the portion of current page URL starting from the question mark ('?').

From this, you can write your own parameter parser or you can make use of one of those available in most common Javascript frameworks, such as JQuery and similar.

Improve this answer

Comments

-1

I think this library would work quite well, it is independent so you can use it with JQuery or with YAHOO or Dojo, another advantage is that it is pretty well documented.

http://www.openjsan.org/doc/t/th/theory/HTTP/Query/0.03/lib/HTTP/Query.html

You can use HTTP.Query to do all of the work for you in this case. It is only like 1.2 KB compressed so you could even include it in a bigger library if you wanted.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.