javascript - Get querystring from URL using jQuery

ID : 10204

viewed : 20

Tags : javascriptjqueryquery-stringjavascript

Top 5 Answer for javascript - Get querystring from URL using jQuery

vote vote

99

From: http://jquery-howto.blogspot.com/2009/09/get-url-parameters-values-with-jquery.html

This is what you need :)

The following code will return a JavaScript Object containing the URL parameters:

// Read a page's GET URL variables and return them as an associative array. function getUrlVars() {     var vars = [], hash;     var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');     for(var i = 0; i < hashes.length; i++)     {         hash = hashes[i].split('=');         vars.push(hash[0]);         vars[hash[0]] = hash[1];     }     return vars; } 

For example, if you have the URL:

http://www.example.com/?me=myValue&name2=SomeOtherValue 

This code will return:

{     "me"    : "myValue",     "name2" : "SomeOtherValue" } 

and you can do:

var me = getUrlVars()["me"]; var name2 = getUrlVars()["name2"]; 
vote vote

89

To retrieve the entire querystring from the current URL, beginning with the ? character, you can use

location.search 

https://developer.mozilla.org/en-US/docs/DOM/window.location

Example:

// URL = https://example.com?a=a%20a&b=b123 console.log(location.search); // Prints "?a=a%20a&b=b123"  

In regards to retrieving specific querystring parameters, while although classes like URLSearchParams and URL exist, they aren't supported by Internet Explorer at this time, and should probably be avoided. Instead, you can try something like this:

/**  * Accepts either a URL or querystring and returns an object associating   * each querystring parameter to its value.   *  * Returns an empty object if no querystring parameters found.  */ function getUrlParams(urlOrQueryString) {   if ((i = urlOrQueryString.indexOf('?')) >= 0) {     const queryString = urlOrQueryString.substring(i+1);     if (queryString) {       return _mapUrlParams(queryString);     }    }      return {}; }  /**  * Helper function for `getUrlParams()`  * Builds the querystring parameter to value object map.  *  * @param queryString {string} - The full querystring, without the leading '?'.  */ function _mapUrlParams(queryString) {   return queryString         .split('&')      .map(function(keyValueString) { return keyValueString.split('=') })     .reduce(function(urlParams, [key, value]) {       if (Number.isInteger(parseInt(value)) && parseInt(value) == value) {         urlParams[key] = parseInt(value);       } else {         urlParams[key] = decodeURI(value);       }       return urlParams;     }, {}); } 

You can use the above like so:

// Using location.search let urlParams = getUrlParams(location.search); // Assume location.search = "?a=1&b=2b2" console.log(urlParams); // Prints { "a": 1, "b": "2b2" }  // Using a URL string const url = 'https://example.com?a=A%20A&b=1'; urlParams = getUrlParams(url); console.log(urlParams); // Prints { "a": "A A", "b": 1 }  // To check if a parameter exists, simply do: if (urlParams.hasOwnProperty('parameterName')) {    console.log(urlParams.parameterName); }  
vote vote

71

An easy way to do this with some jQuery and straight JavaScript, just view your console in Chrome or Firefox to see the output...

  var queries = {};   $.each(document.location.search.substr(1).split('&'),function(c,q){     var i = q.split('=');     queries[i[0].toString()] = i[1].toString();   });   console.log(queries); 
vote vote

67

Have a look at this Stack Overflow answer.

 function getParameterByName(name, url) {      if (!url) url = window.location.href;      name = name.replace(/[\[\]]/g, "\\$&");      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),          results = regex.exec(url);      if (!results) return null;      if (!results[2]) return '';      return decodeURIComponent(results[2].replace(/\+/g, " "));  } 

You can use the method to animate:

I.e.:

var thequerystring = getParameterByName("location"); $('html,body').animate({scrollTop: $("div#" + thequerystring).offset().top}, 500); 
vote vote

58

We do it this way...

String.prototype.getValueByKey = function (k) {     var p = new RegExp('\\b' + k + '\\b', 'gi');     return this.search(p) != -1 ? decodeURIComponent(this.substr(this.search(p) + k.length + 1).substr(0, this.substr(this.search(p) + k.length + 1).search(/(&|;|$)/))) : ""; }; 

Top 3 video Explaining javascript - Get querystring from URL using jQuery

Related QUESTION?