What is the easiest way to read/manipulate query string params using javascript?

Question

The examples I've seen online seem much more complex than I expected (manually parsing &/?/= into pairs, using regular expressions, etc). We're using asp.net ajax (don't see anything in their client side reference) and would consider adding jQuery if it would really help.

I would think there is a more elegant solution out there - so far this is the best code I've found but I would love to find something more along the lines of the HttpRequest.QueryString object (asp.net server side). Thanks in advance,

Shane

possible duplicate of [How can I get query string values?](http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values) — Michel Ayres, Sep 10 '13 at 14:02
possible duplicate of [Change URL parameters](http://stackoverflow.com/questions/1090948/change-url-parameters) — Sindre Sorhus, Nov 15 '13 at 18:19

score 13 · Accepted Answer · answered Sep 29 '08 at 20:05

13

There is indeed a QueryString plugin for jQuery, if you're willing to install the jQuery core and the plugin it could prove useful.

answered Sep 29 '08 at 20:05

Adam Bellaire

108,003
19
148
163

After a bit of work we're slowly porting our asp.net apps to jquery. The library has really impressed us and soon to be distributed by Microsoft so if you are facing similar JS issues/questions I recommend checking out jQuery – jskunkle Dec 04 '08 at 15:00
5

Over a year later - we've jumped into jquery with both feet and we highly recommend it for parsing the querystring or just about any client side task – jskunkle Jan 18 '10 at 18:29

score 9 · Answer 2 · answered Aug 02 '10 at 13:32

I am using this function in case i don't want to use a plugin:

function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) {
            return pair[1];
        }
    }
    return null;
}

score 3 · Answer 3 · answered Sep 29 '08 at 20:08

3

Take a look at my post, as it tells you exactly how to do this:

http://seattlesoftware.wordpress.com/2008/01/16/javascript-query-string/

answered Sep 29 '08 at 20:08

core

32,451
45
138
193

+1 because it doesn't use any 3rd party librariers, sometimes you just can't import them (e.g. when working on a widget/gadget). – Pawel Krakowiak Apr 03 '09 at 09:10

score 2 · Answer 4 · answered Aug 02 '10 at 13:22

For jQuery I suggest jQuery BBQ: Back Button & Query Library By "Cowboy" Ben Alman

jQuery BBQ leverages the HTML5 hashchange event to allow simple, yet powerful bookmarkable #hash history. In addition, jQuery BBQ provides a full .deparam() method, along with both hash state management, and fragment / query string parse and merge utility methods.

Example:

// Parse URL, deserializing query string into an object.
// http://www.example.com/foo.php?a=1&b=2&c=hello#test
// search is set to ?a=1&b=2&c=hello
// myObj is set to { a:"1", b:"2", c:"hello" }
var search = window.location.search;
var myObj = $.deparam.querystring( search );

score 1 · Answer 5 · answered Aug 07 '12 at 11:24

  *$(document).ready(function () {
            $("#a").click(function () {
                window.location.href = "secondpage.aspx?id='0' & name='sunil'& add='asr' & phone='1234'";
            });
        });*


**then read the query string parameters on another using split method . Here as follows:**


  *$(document).ready(function () {
            var a = decodeURI(window.location.search);
            var id = window.location.search = "id=" + $().val();
            var name = a.split("name=")[1].split("&")[0].split("'")[1];
            var phone = a.split("phone=")[1].split("&")[0].split("'")[1];
            var add = a.split("add=")[1].split("&")[0].split("'")[1];
            alert(id+','+name+','+add+','+phone); 
        });*

score 1 · Answer 6 · answered Sep 26 '12 at 20:11

If there's any possibility of encountering repeated parameters (e.g. ?tag=foo&tag=bar), most libraries out there won't be sufficient. In that case, you might want to consider this library that I developed from Jan Wolter's very comprehensive parser. I added .plus() and .minus() functions and roundtripping:

https://github.com/timmc/js-tools/blob/master/src/QueryString.js

score 1 · Answer 7 · 2008-12-31T17:24:07.583

Use the String utility from prototypejs.org, called toQueryParams().

Example from their site: http://prototypejs.org/api/string/toQueryParams

'section=blog&id=45'.toQueryParams();
// -> {section: 'blog', id: '45'}
'section=blog;id=45'.toQueryParams();
// -> {section: 'blog', id: '45'}
'http://www.example.com?section=blog&id=45#comments'.toQueryParams();
// -> {section: 'blog', id: '45'}
'section=blog&tag=javascript&tag=prototype&tag=doc'.toQueryParams();
// -> {section: 'blog', tag: ['javascript', 'prototype', 'doc']}
'tag=ruby%20on%20rails'.toQueryParams();
// -> {tag: 'ruby on rails'}
'id=45&raw'.toQueryParams();
// -> {id: '45', raw: undefined}

Also, you may use the alias parseQuery() to obtain the same results.

window.location.search.parseQuery();

Since window.location returns an object, you must obtain the string.

What is the easiest way to read/manipulate query string params using javascript?

7 Answers7

Linked