我应该使用什么 JavaScript 库来解析 URL 参数？

Question

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.

Answer 1

jQuery URL Utils or jQuery URL Parser .

Answer 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");

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

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.

Answer 7

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.

Answer 8

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

Answer 9

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.