Get querystring from URL using jQuery

Navigating through multiple parameters

Got a URL crowded with multiple query parameters? Here's how we unpack and put them to work:

const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
    console.log(key, value); // Logs key-value pairs in the console for each query parameter
});


Just a quick loop and voila! Each parameter is at your jQuery-coding fingertips.

Decoding special characters

When life gives you query parameters with special characters or spaces:

let myParam = decodeURIComponent(params.get('myParam'));


Use decodeURIComponent! It ensures your parameters are legible and posed for action.

Linking query parameter to UI action

Need to take your user on a gentle scroll to a specific div based on query parameter? Here's the jQuery magic:

let scrollToDiv = params.get('targetDiv');
if (scrollToDiv) {
    $('html, body').animate({ scrollTop: $('#' + scrollToDiv).offset().top }, 'slow');
}


This snippet animates a nice scroll to the target element determined by the query - a smooth experience gift-wrapped in a URL!

Having a backup for IE

When URLSearchParams gets the cold shoulder from Internet Explorer, we've got an alternative:

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

It's like a meme: "Keep Calm and Extract Parameters". This function ensures compatibility across all browsers.

Traveling light and avoiding dependencies

Our journey doesn't always need the company of external libraries. Previous methods allow you to work with query strings using plain ol' JavaScript - travel light and travel far ;)

Dealing with edge cases

Query strings could sometimes throw a curveball with complex data structures or repeated values. That's when jQuery and JavaScript join forces for some heroic query handling!

Parsing values to specific data types

Parameters aren't always strings. Need to whip them into a different shape?

let page = parseInt(params.get('page'), 10); // Changes the 'page' parameter into an integer


There's a function for that! parseInt ensures parameter is in its Sunday best for your coding needs.