JavaScript - Improve the URL parameter fetching algorithm

Question

I need to get the URL search paramentes in an object, for eg; http://example.com/?a=x&b=y&d#pqr should yield {a:x, b:y, d:1}

Below is the method i used to get this, How can i improve this? any suggessions...

        var urlParamKeyVals = new Array();
        var pieces          = new Array();
        var UrlParams = {};
        if(window.location.search.length){
            var urlSearchString = window.location.search;
            if(urlSearchString.charAt(0) == '?'){
                urlSearchString = urlSearchString.substr(1);
                urlParamKeyVals = urlSearchString.split("&");
            }
        }
        for (var i = 0; i<urlParamKeyVals .length; i++) {
            pieces = urlParamKeyVals [i].split("=");
            if(pieces.length==1){
                UrlParams[pieces[0]]=1;
            } else {
                UrlParams[pieces[0]]=pieces[1];
            }
        }
        UrlParams;

Christian C. Salvadó · Accepted Answer · 2010-07-19 15:54:51Z

2

I've made some time ago a small function for the same purpose:

Edit: To handle empty keys as 1:

function getQueryStringValues (str) {
  str = str || window.location.search;
  var result = {};

  str.replace(/([^?=&]+)(?:[&#]|=([^&#]*))/g, function (match, key, value) {
    result[key] = value || 1;
  });

  return result;
}


getQueryStringValues("http://example.com/?a=x&b=c&d#pqr");
// returns { a="x",  b="c",  d=1 }

edited Jul 19, 2010 at 15:54

answered Jul 19, 2010 at 15:07

Christian C. Salvadó

831k185 gold badges929 silver badges845 bronze badges

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

3 Comments

Christian C. Salvadó Over a year ago

@sje397: Yes, but I would use decodeURIComponent instead of unescape.

Mithun Sreedharan Over a year ago

getQueryStringValues("http://example.com/?a&b=y&d#pqr") outputs {b:'y'}, it should be {a:1,b:'y':d:1}

Mithun Sreedharan Over a year ago

Now getQueryStringValues("http://example.com/?a&b=c&d#pqr"); outputs correct {a:1,b:'y':d:1}. But getQueryStringValues("http://example.com/?a=x&b=c&d#pqr"); outputs {a:'x', a=x:1,b:'y':d:1}

Rafael · Accepted Answer · 2010-07-19 16:12:37Z

2

function getParams(q){
   var p, reg = /[?&]([^=#&]+)(?:=([^&#]*))?/g, params = {};

   while(p = reg.exec(q)){
      params[decodeURIComponent(p[1])] = p[2] ? decodeURIComponent(p[2]) : 1;
   }
   return params;
}
getParams(location.search);

-- edit I extended the regular expression to match also the &param (no value) and &param= (empty value) cases. In both cases the value 1 is returned. It should also stop extracting on hash (#) character. Decoding values also supported.

edited Jul 19, 2010 at 16:12

answered Jul 19, 2010 at 15:09

Rafael

18.5k5 gold badges60 silver badges67 bronze badges

3 Comments

Rafael Over a year ago

Thanks for the feedback. Please check the new version of the function.

Mithun Sreedharan Over a year ago

After the update getParams('http://example.com?a=x&b=y&d#pqr'); outputs {a:'x', b:'y', d#pqr:'undefined'}

Rafael Over a year ago

Sorry, didn't copy everything from the console. Now it should output 1 for empty 'd' param and empty string for "param=" case.

meder omuraliev · Accepted Answer · 2010-07-19 15:05:33Z

1

jQuery bbq has a nice deparam method if you are trying to look at some very stable code:

answered Jul 19, 2010 at 15:05

meder omuraliev

187k76 gold badges401 silver badges443 bronze badges

Comments

Robusto · Accepted Answer · 2010-07-19 15:06:33Z

1

function getObjectFromSearch() {
  var search = location.search;
  var searchTerms = [];
  var obj = {};
  if (search !== '') {
    search = search.replace(/^\?/,'');
    searchTerms = search.split("&");
  }
  for (var i=0, imax=searchTerms.length; i<imax; i++) {
    var ary = searchTerms[i].split("=");
    obj[ary[0]] = ary[1];
  }
  return obj;
}

answered Jul 19, 2010 at 15:06

Robusto

32k8 gold badges59 silver badges79 bronze badges

Collectives™ on Stack Overflow

JavaScript - Improve the URL parameter fetching algorithm

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related