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?

Michel Ayres
– Michel Ayres

2013-09-10 14:02:06 +00:00
Commented Sep 10, 2013 at 14:02 — Michel Ayres
– Michel Ayres, Commented Sep 10, 2013 at 14:02
possible duplicate of Change URL parameters

Sindre Sorhus
– Sindre Sorhus

2013-11-15 18:19:45 +00:00
Commented Nov 15, 2013 at 18:19 — Sindre Sorhus
– Sindre Sorhus, Commented Nov 15, 2013 at 18:19

Adam Bellaire · Accepted Answer · 2008-09-29 20:05:41Z

12

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, 2008 at 20:05

Adam Bellaire

111k19 gold badges153 silver badges165 bronze badges

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

2 Comments

jskunkle Over a year ago

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 Over a year ago

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

Amr Elgarhy · Accepted Answer · 2010-08-02 13:32:12Z

10

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;
}

answered Aug 2, 2010 at 13:32

Amr Elgarhy

69.2k70 gold badges193 silver badges312 bronze badges

Comments

core · Accepted Answer · 2008-09-29 20:08:22Z

4

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, 2008 at 20:08

core

33.3k45 gold badges141 silver badges196 bronze badges

1 Comment

Pawel Krakowiak Over a year ago

+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).

Chris Jacob · Accepted Answer · 2010-08-02 13:22:52Z

2

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

answered Aug 2, 2010 at 13:22

Chris Jacob

12.3k8 gold badges49 silver badges42 bronze badges

Comments

score 1 · Accepted Answer · 2008-12-31 17:24:07Z

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.

Sunil Marwaha · Accepted Answer · 2012-08-07 11:24:48Z

  *$(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); 
        });*

I answer wrong - have fun · Accepted Answer · 2012-09-26 20:11:30Z

1

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

answered Sep 26, 2012 at 20:11

I answer wrong - have fun

2,8392 gold badges26 silver badges36 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related