JavaScript Tips - Parse QueryString to Dictionary

orig.Link

The following code can be used to read what the full QueryString value is from the current pages URL:

var queryString = document.location.search;

Although, the QueryString value can be accessed from JavaScript, it isn’t parsed and separated out into any kind of Key/Value pairs automatically. This parsing must be done manually. Below is an example parsing function and it’s example usage:

// get raw QueryString value
var queryString = document.location.search;
var dict = parseQueryStringToDictionary(queryString);

// Enumerate through all the Key/Value pairs in the Dictionary object
for(var item in dict) {
    var key = item;
    var value = dict[item];
    alert('Key: ' + key + '\nValue: ' + value);
}
// Get Value by Key directly
alert(dict['name']);


/* Parse QueryString using String Splitting */
function parseQueryStringToDictionary(queryString) {
    var dictionary = {};

    // remove the '?' from the beginning if it exists
    if (queryString.indexOf('?') === 0) {
        queryString = queryString.substr(1);
    }

    // Step 1: separate out each key/value pair
    var parts = queryString.split('&');
    for(var i = 0; i < parts.length; i++) {
        var p = parts[i];
        // Step 2: Split Key/Value pair
        var keyValuePair = p.split('=');
        // Step 3: Add Key/Value pair to Dictionary object
        var key = keyValuePair[0];
        var value = keyValuePair[1];
        // decode URI encoded string
        value = decodeURIComponent(value);
        value = value.replace(/\+/g, ' ');
        // Key/Value Pair
        dictionary[key] = value;
    }
    // Step 4: Return Dictionary Object
    return dictionary;
}
/**
 * Assemble a full URL from its components.
 * @param {string} path.
 * @param {Object.<string, string>|null} queryDict Keys and Values for the query part.
 * @param {Object.<string, string>|null} fragDict Keys and Values for the fragment part.
 * @return {string} The final URL.
 */
function assembleURL(path, queryDict, fragDict) {
  var key,
  url = path,
  querys = [],
  frags = [];
  for (key in queryDict) {
    if (queryDict[key] == null) {
      queries.push(key + '');
    } else {
      queries.push(key + '=' + encodeURIComponent(queryDict[key]));
    }
  }
  for (key in fragDict) {
    if (fragDict[key] == null) {
      frags.push(key + '');
    } else {
      frags.push(key + '=' + encodeURIComponent(fragDict[key]));
    }
  }
  if (queries.length > 0) {
    url = url + '?' + queries.join('&');
  }
  if(frags.length > 0) {
    url = url + '#' + frags.join('&');
  }
  return url;
};

/**
 * Turn a full URL into components.
 * @param {string} url.
 * @return {Array} [path, dict of query string, dict of fragment].
 */
function parseURL(url) {
  var parseToDict = function(str) {
    var ret = {};
    var tokens = str.split('&');
    for (var i in tokens) {
      var pos = tokens[i].indexOf('=');
      if (pos >= 0) {
        ret[tokens[i].substring(0, pos)] = decodeURIComponent(tokens[i].substring(pos + 1));
      } else {
        ret[tokens[i]] = null;
      }
    }
    return ret;
  };

  var fragDict = {};
  var pos = url.indexOf('#');
  if (pos >= 0) {
    fragDict = parseToDict(url.substring(pos + 1));
    url = url.substring(0, pos);
  }
  var queryDict = {};
  pos = url.indexOf('?');
  if (pos >= 0) {
    queryDict = parseToDict(url.substring(pos + 1));
    url = url.substring(0, pos);
  }
  return [url, queryDict, fragDict];
};
Written on February 25, 2016