JavaScript query string

Question

Is there any JavaScript library that makes a dictionary out of the query string  ASP NET style   Something which can be used like   var query   window location querystring  query      Is  query string  called something else outside the  NET realm  Why isn t location search broken into a key value collection    EDIT  I have written my own function  but does any major JavaScript library do this

User · Answer

It is worth noting  the library that John Slegers mentioned does have a jQuery dependency  however here is a version that is vanilla Javascript   https   github com EldonMcGuinness querystring js  I would have simply commented on his post  but I lack the reputation to do so      Example   The example below process the following  albeit irregular  query string    foo bar amp foo boo amp roo bar bee bop  ghost  ghost2  amp  checkbox 5B 5D b1 checkbox 5B 5D b2 dd  http http 3A 2F 2Fw3schools com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab amp http http 3A 2F 2Fw3schools2 com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab     x000D   x000D  var qs     foo bar amp foo boo amp roo bar bee bop  ghost  ghost2  amp  checkbox 5B 5D b1 checkbox 5B 5D b2 dd  http http 3A 2F 2Fw3schools com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab amp http http 3A 2F 2Fw3schools2 com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab   x000D    var qs       amp     x000D    var qs      x000D   x000D  var results   querystring qs   x000D   x000D   document getElementById  results    innerHTML  JSON stringify results  null  2   x000D   lt script  x000D  src  https   rawgit com EldonMcGuinness querystring js master dist querystring min js  gt  lt  script gt  x000D   lt pre id  results  gt RESULTS  Waiting    lt  pre gt  x000D   x000D   x000D

User · Answer

Or you could use the library sugar js   From sugarjs com      Object fromQueryString   str   deep   true        Converts the query string of a URL into an object  If deep is false    conversion will only accept shallow params  ie  no object or arrays   with    syntax  as these are not universally supported    Object fromQueryString  foo bar amp broken wear    gt   foo   bar   broken   wear   Object fromQueryString  foo   1 amp foo   2    gt   foo   1 2      Example   var queryString   Object fromQueryString location search   var foo   queryString foo

User · Answer

How about this function queryString qs        var queryStr   qs substr 1  split   amp    obj         for var i 0  i  lt  queryStr length i            obj queryStr i  split      0     queryStr i  split      1       return obj        Usage  var result   queryString location search

User · Answer

Building on the answer by  CMS I have the following  in CoffeeScript which can easily be converted to JavaScript    String  to query   - gt     result  re  d              amp          amp     g  decodeURIComponent    while match   re exec if   match       then   substring 1  else        result d match 1      d match 2     result   You can easily grab what you need with   location search to query    my param     The win here is an object-oriented interface  instead of functional  and it can be done on any string  not just location search    If you are already using a JavaScript library this function make already exist  For example here is Prototype s version

User · Answer

After finding this post  when looking myself I thought I should add that I don t think the most up-voted solution is the best  It doesn t handle array values  such as  a foo amp a bar - in this case I would expect getting a to return   foo    bar     It also as far as I can tell doesn t take into account encoded values - such as hex character encoding where  20 represents a space  example   a Hello 20World  or the plus symbol being used to represent a space  example   a Hello World    Node js offers what looks like a very complete solutions to querystring parsing  It would be easy to take out and use in your own project as its fairly well isolated and under a permissive licence   The code for it can be viewed here  https   github com joyent node blob master lib querystring js  The tests that Node has can be seen here  https   github com joyent node blob master test simple test-querystring js I would suggest trying some of these with the popular answer to see how it handles them   There is also a project that I was involved in to specifically add this functionality  It is a port of the Python standard lib query string parsing module  My fork can be found here  https   github com d0ugal jquery qeeree

User · Answer

Function I wrote for a requirement similar to this with pure javascript string manipulation   http   www google lk  Name John amp Age 20 amp Gender Male   function queryize sampleurl       var tokens   url split      1  split   amp         var result            for var i 0  i lt tokens length  i             result tokens i  split      0     tokens i  split      1              return result      Usage   queryize window location href   Name     returns John queryize window location href   Age     returns 20 queryize window location href   Gender     returns Male

User · Answer

Okay  since everyone is ignoring my actual question  heh  I ll post mine too  Here s what I have   location querystring    function             The return is a collection of key value pairs      var queryStringDictionary               Gets the query string  starts with          var querystring   unescape location search           document location search is empty if no query string      if   querystring            return                   Remove the     via substring 1       querystring   querystring substring 1             amp   seperates key value pairs      var pairs   querystring split   amp             Load the key values of the return collection      for  var i   0  i  lt  pairs length  i              var keyValuePair   pairs i  split               queryStringDictionary keyValuePair 0     keyValuePair 1                 Return the key value pairs concatenated      queryStringDictionary toString   function              if  queryStringDictionary length    0                return                        var toString                 for  var key in queryStringDictionary                toString    key         queryStringDictionary key                      return toString                 Return the key value dictionary      return queryStringDictionary          And the tests   alert window location querystring toString      for  var key in location querystring        alert key         location querystring key        Mind you thought  JavaScript isn t my native tongue    Anyway  I m looking for a JavaScript library  e g  jQuery  Prototype  that already has one written

User · Answer

tl dr solution on a single ish  line of code using vanilla javascript  var queryDict      location search substr 1  split   amp    forEach function item        queryDict item split      0     item split      1       For querystring  a 1 amp b 2 amp c 3 amp d amp eit returns    gt  queryDict a   1  b   2  c   3  d  undefined e  undefined   multi-valued keys and encoded characters   See the original answer at How can I get query string values in JavaScript     a 1 amp b 2 amp c 3 amp d amp e amp a 5 amp a t 20e 20x 20t amp e http 3A 2F 2Fw3schools com 2Fmy 20test asp 3Fname 3Dst  le 26car 3Dsaab   gt  queryDict a    1    5    t e x t   b    2   c    3   d   undefined  e   undefined   http   w3schools com my test asp name st  le amp car saab

User · Answer

function decode s        try           return decodeURIComponent s  replace   r n  r  n g    r n          catch  e            return             function getQueryString win        var qs   win location search      var multimap           if  qs length  gt  1            qs   qs substr 1           qs replace                   g  function match  hfname  hfvalue                var name   decode hfname               var value   decode hfvalue               if  name length  gt  0                    if   multimap hasOwnProperty name                         multimap name                                          multimap name  push value                                       return multimap    var keys   getQueryString window   for  var i in keys        if  keys hasOwnProperty i             for  var z   0  z  lt  keys i  length    z                alert i         keys i  z

User · Answer

I like to keep it simple  readable and small   function searchToObject search        var pairs   search substring 1  split   amp             obj       pair       for  var i in pairs            if  pairs i          continue          pair   pairs i  split               obj decodeURIComponent pair 0      decodeURIComponent pair 1              return obj     searchToObject location search     Example   searchToObject   query myvalue    query       spits out   myvalue

User · Answer

If you are using lodash   ES6  here is a one line solution     object window location search replace              split   amp    map keyVal   gt  keyVal split

User · Answer

You can extract the key value pairs from the location search property  this property has the part of the URL that follows the   symbol  including the   symbol   function getQueryString       var result       queryString   location search slice 1         re        amp          amp     g  m     while  m   re exec queryString         result decodeURIComponent m 1      decodeURIComponent m 2           return result            var myParam   getQueryString    myParam

User · Answer

If you have the querystring on hand  use this            param qry the querystring     param name name of parameter     returns the parameter specified by name     author eduardo medeirospereira gmail com      function getQueryStringParameter qry name       if typeof qry     undefined  amp  amp  qry                  var keyValueArray   qry split   amp             for   var i   0  i  lt  keyValueArray length  i                  if keyValueArray i  indexOf name  gt -1                   return keyValueArray i  split      1                                     return

User · Answer

The code  This Gist by Eldon McGuinness is by far the most complete implementation of a JavaScript query string parser that I ve seen so far   Unfortunately  it s written as a jQuery plugin    I rewrote it to vanilla JS and made a few improvements    function parseQuery str      var qso         var qs    str    document location search        Check for an empty querystring   if  qs              return qso           Normalize the querystring   qs   qs replace              replace    g    amp       while  qs indexOf   amp  amp       -1        qs   qs replace   amp  amp  g    amp           qs   qs replace      amp                  Break the querystring into parts   qs   qs split   amp          Build the querystring object   for  var i   0  i  lt  qs length  i          var qi   qs i  split           qi   qi map function n          return decodeURIComponent n              if  typeof qi 1       undefined           qi 1    null            if  typeof qso qi 0        undefined               If a key already exists then make this an object       if  typeof  qso qi 0        string             var temp   qso qi 0            if  qi 1                     qi 1    null                    qso qi 0                 qso qi 0   push temp           qso qi 0   push qi 1             else if  typeof  qso qi 0        object             if  qi 1                     qi 1    null                    qso qi 0   push qi 1                  else            If no key exists just set it as a string       if  qi 1                   qi 1    null                qso qi 0     qi 1               return qso      How to use it  var results   parseQuery   foo bar amp foo boo amp roo bar bee bop  ghost  ghost2  amp  checkbox 5B 5D b1 checkbox 5B 5D b2 dd  http http 3A 2F 2Fw3schools com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab amp http http 3A 2F 2Fw3schools2 com 2Fmy 20test asp 3Fname 3Dst C3 A5le 26car 3Dsaab      Output       foo     bar    boo        roo    bar      bee    bop           ghost    ghost2       checkbox       b1    b2       dd   null     http          http   w3schools com my test asp name st  le amp car saab        http   w3schools2 com my test asp name st  le amp car saab          See also this Fiddle

User · Answer

Maybe http   plugins jquery com query-object    This is the fork of it https   github com sousk jquery parsequery readme

[javascript] JavaScript query string

Example:

Examples related to javascript

Examples related to query-string