Cómo obtener parámetros de cadena de consulta en JavaScript

En un artículo anterior, vimos cómo agregar y actualizar parámetros de cadena de consulta usando URLSearchParams en JavaScript. Hoy, aprenderá cómo obtener parámetros de cadena de consulta de la URL en JavaScript.

Para obtener la cadena de consulta completa de la URL actual del navegador, puede usar window.location.search :

// URL: http://example.com?size=M&size=XL&price=29&sort=desc

console.log(window.location.search);
// ?size=M&size=XL&price=29&sort=desc

Para crear una instancia de URLSearchParams , simplemente pase la cadena de consulta completa a su constructor:

const params = new URLSearchParams(window.location.search);

URLSearchParams proporciona varios métodos que puede utilizar para manipular los parámetros de la cadena de consulta:

// get parameter
params.get('price');    // 29

// get multi-valued parameter
params.getAll('size');    // [ 'M', 'XL' ]

// check if parameter exists
params.has('sort');    // true

// iterate over all parameters
for (const p of params) {
    console.log(p);
    
}

// [ 'size', 'M' ]
// [ 'size', 'XL' ]
// [ 'price', '29' ]
// [ 'sort', 'desc' ]

Mientras que URLSearchParams es una solución ideal para trabajar con cadenas de consulta, no es compatible con todos los navegadores. Si desea admitir navegadores antiguos como Internet Explorer, hay un polyfill disponible.

Alternativamente, podría escribir una pequeña función de JavaScript que tome el nombre de un parámetro de cadena de consulta y devuelva su valor:

function queryParam(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(window.location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
}

queryParam('price');    // 29
queryParam('sort');    // desc