Extracting Query String Parameters from URLs

Extracting query string parameters from URLs is a common task in web development, especially when working with dynamic content or client-side routing. In this tutorial, we will explore how to extract query string parameters from URLs using JavaScript and jQuery.

Understanding Query Strings

A query string is the part of a URL that comes after the ? character. It contains key-value pairs separated by & characters. For example, in the URL http://example.com?name=John&age=30, the query string is name=John&age=30.

Extracting Query String Parameters

There are several ways to extract query string parameters from URLs using JavaScript and jQuery. Here are a few approaches:

1. Using the location.search Property

The location.search property returns the query string of the current URL, including the leading ? character.

console.log(location.search); // Output: ?name=John&age=30

To extract individual parameters, you can use a function like this:

function getUrlParams(urlOrQueryString) {
  if ((i = urlOrQueryString.indexOf('?')) >= 0) {
    const queryString = urlOrQueryString.substring(i + 1);
    if (queryString) {
      return _mapUrlParams(queryString);
    }
  }

  return {};
}

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;
    }, {});
}

const urlParams = getUrlParams(location.search);
console.log(urlParams); // Output: { name: "John", age: 30 }

2. Using jQuery

You can use jQuery to extract query string parameters like this:

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); // Output: { name: "John", age: "30" }

3. Using a Regular Expression

You can use a regular expression to extract individual parameters from the query string:

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, " "));
}

const thequerystring = getParameterByName("name");
console.log(thequerystring); // Output: John

Using Extracted Parameters

Once you have extracted the query string parameters, you can use them to perform various actions on your web page. For example, you can use them to animate scrolling to a specific element:

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

Conclusion

Extracting query string parameters from URLs is an essential task in web development. By using JavaScript and jQuery, you can extract these parameters and use them to perform various actions on your web page. In this tutorial, we explored several approaches to extracting query string parameters, including using the location.search property, jQuery, and regular expressions.