What's the best way to extract URL parameters in JavaScript?

Other Questions JavaScript
1

Hey everyone! I’m working on a project where I need to grab the values from the URL parameters (you know, the stuff after the question mark in a web address). I’m wondering if there’s a straightforward way to do this using plain JavaScript, without relying on any external libraries or plugins.

I’ve heard jQuery might have a solution, but I’m not sure. If there isn’t a built-in method, are there any lightweight tools or functions you’d recommend for this task? I’m trying to keep my code as clean and efficient as possible.

Here’s a quick example of what I’m trying to achieve:

// Let's say our URL is: https://example.com?name=John&age=30

function getUrlParam(paramName) {
  // Some magic happens here
  return paramValue;
}

console.log(getUrlParam('name')); // Should output: 'John'
console.log(getUrlParam('age')); // Should output: '30'

Any tips or code snippets would be super helpful. Thanks in advance!

2

While URLSearchParams is indeed a great modern solution, there’s another approach worth considering if you want to avoid potential compatibility issues. You can create a simple function using the split() method and a reduce() operation. Here’s how it might look:

function getUrlParams() {
return window.location.search
.substring(1)
.split(‘&’)
.reduce((params, pair) => {
const [key, value] = pair.split(‘=’);
params[decodeURIComponent(key)] = decodeURIComponent(value);
return params;
}, {});
}

This function will return an object with all parameters, which you can then access like this: const params = getUrlParams(); console.log(params.name); // ‘John’

It’s a bit more verbose than URLSearchParams, but it works reliably across all browsers and doesn’t require any polyfills or external libraries.

3

I’ve dealt with this exact issue in several projects, and I can tell you that the URLSearchParams API is your best bet. It’s built into modern browsers and makes parsing URL parameters a breeze.

Here’s a quick example of how you can use it:

const urlParams = new URLSearchParams(window.location.search);
const name = urlParams.get('name');
const age = urlParams.get('age');

console.log(name); // 'John'
console.log(age); // '30'

This approach is clean, efficient, and doesn’t require any external libraries. It’s also more robust than manual string parsing, handling edge cases like multiple parameters with the same name.

If you need to support older browsers, you might want to use a polyfill or fall back to a more traditional approach using regex. But for most modern web applications, URLSearchParams is the way to go.

4

yo, u can also use the good ol’ regex method. it’s pretty straightforward:

function getUrlParam(param) {
const regex = new RegExp([?&]${param}=([^&]*));
const match = window.location.search.match(regex);
return match ? decodeURIComponent(match[1]) : null;
}

works like a charm and doesn’t need any fancy APIs. just pure js magic!