window.location.search query as JSON

Viewed 32333

Is there a better way to convert a URL's location.search as an object? Maybe just more efficient or trimmed down? I'm using jQuery, but pure JS can work too.

var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = {};
$.each(queryPairs, function() { queryJSON[this.split('=')[0]] = this.split('=')[1]; });
11 Answers

Probably the shortest solution for simple cases:

location.search
  .slice(1)
  .split('&')
  .map(p => p.split('='))
  .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});

My approach, simple and clean

var params = "?q=Hello World&c=Awesome";

params = "{\"" + 
         params
         .replace( /\?/gi, "" )
         .replace( /\&/gi, "\",\"" )
         .replace( /\=/gi, "\":\"" ) +
         "\"}";
  
params = JSON.parse( params );

alert( decodeURIComponent( params.q ) );
alert( decodeURIComponent( params.c ) );

Building on @rafaelbiten's ES6 work, I added support for params that have no value and query param arrays of the duplicate entry style.

JSFiddle: https://jsfiddle.net/w922xefs/

const queryStringToJSObject = searchString => {
  if (!searchString) return null;

  return searchString
    .replace(/^\?/, '') // Only trim off a single leading interrobang.
    .split('&')
    .reduce((result, next) => {
      if (next === "") {
        return result;
      }
      let pair = next.split('=');
      let key = decodeURIComponent(pair[0]);
      let value = typeof pair[1] !== "undefined" && decodeURIComponent(pair[1]) || undefined;
      if (result.hasOwnProperty(key)) { // Check to see if this property has been met before.
        if (Array.isArray(result[key])) { // Is it already an array?
          result[key].push(value);
        }
        else { // Make it an array.
          result[key] = [result[key], value];
        }
      }
      else { // First time seen, just add it.
        result[key] = value;
      }

      return result;
    }, {}
  );
};

// Simple read of query string
const searchData = queryStringToJSObject(window.location.search);

Note --No doubt above solution works, but it wont cover all the operators

Guess you would want something like this-

var search = location.search;
var trimmedSearch = search.substring(1);

var searchObj = trimmedSearch?JSON.parse(
   '{"' + trimmedSearch.replace(/&/g, '","').replace(/=/g,'":"') + '"}', 
    function(key, value) { 
       return key===""?value:decodeURIComponent(value) 
    }
)
:
{}

console.log(searchObj);

ex -

Override search @1st line with

search = "abc=foo&def=%5Basf%5D&xyz=5&foo=b%3Dar";

Output you get is

Object {abc: "foo", def: "[asf]", xyz: "5", foo: "b=ar"}

In case someone is looking just to access the search query parameters, use this function:

function getQueryStringValue (key)
{
    return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"))
}

Easy to use just call getQueryStringValue(term)

I improved @Carlo Zottmann's solution for multiple value for a key. For example you have query like this:

?fruit=apple&fruit=orange&vegetable=parsley

it produces the result:

{ fruit: ['apple', 'orange'], vegetable: 'parsley' }

Solution:

function searchToObject() {
var pairs = window.location.search.substring(1).split("&"),
  obj = {},
  pair,
  i;

for ( i in pairs ) {
  if ( pairs[i] === "" ) continue;

  pair = pairs[i].split("=");

  const objectKey = decodeURIComponent(pair[0]);
  const objectValue = decodeURIComponent(pair[1]);
  if (obj[objectKey]) {
    obj[objectKey] = [
        obj[objectKey],
        objectValue
    ]
  } else {
    obj[objectKey] = objectValue;
  }
}

// refreshing reference
return { ...obj }; }
Related