Obtener valores de cadena de consulta en JavaScript

En una URL, los valores de cadena de consulta a menudo brindan información sobre la solicitud, como parámetros para una búsqueda o la ID de un objeto que está utilizando. Si alguno de los negocios...

En una URL, los valores de cadena de consulta a menudo brindan información sobre la solicitud, como parámetros para una búsqueda o la ID de un objeto que está utilizando. Si parte de la lógica comercial o de solicitud se maneja en la interfaz, es importante saber cómo recuperar los valores de la cadena de consulta de la URL. Hay varias maneras de lograr esto, algunas de las cuales veremos aquí.

Parámetros de búsqueda de URL

La interfaz URLSearchParams es compatible con todas las principales versiones de navegador excepto IE 11. Funciona analizando la cadena de consulta de una URL y proporcionando una forma de acceder a los valores. Por ejemplo:

1
2
3
let params = new URLSearchParams('q=node&page=2');
params.get('q'); // 'node'
params.get('page'); // '2'

Una de las desventajas de esta interfaz es que debe pasarle solo la cadena de consulta de una URL. Si está trabajando con la URL del navegador actual, eso es fácil de hacer ya que simplemente puede pasar window.location.search. Si está trabajando con cualquier otra URL, deberá analizar y pasar la cadena de consulta por separado.

Para analizar los parámetros de consulta en un objeto, utilice el método .entries() de URL.searchParams, que devuelve un Iterador de pares clave/valor, y Object.fromEntries para convertirlo en un objeto .

1
2
3
let params = new URLSearchParams('q=node&page=2');
let entries = params.entries();
Object.fromEntries(entries); // {q: 'node', page: '2'}

Objeto URL

La API URL también es compatible con todas las principales versiones de navegador, excepto IE 11. Ofrece una forma más flexible de analizar las URL y también proporciona una forma de acceder a los valores de la cadena de consulta. Por ejemplo:

1
2
3
4
5
const url = new URL('https://wikihtp.com/search?q=node&page=2');
const searchParams = url.searchParams;

searchParams.get('q'); // 'node'
searchParams.get('page'); // '2'

url.searchParams es el mismo tipo de objeto de instancia devuelto por URLSearchParams.

El objeto url anterior también tiene todas las partes de la URL divididas en sus partes. Por ejemplo:

1
2
3
4
5
6
7
8
9
url.href; // 'https://wikihtp.com/search?q=node&page=2'
url.origin; // 'https://wikihtp.com'
url.protocol; // 'https:'
url.host; // 'wikihtp.com'
url.hostname; // 'wikihtp.com'
url.port; // ''
url.pathname; // '/search'
url.search; // '?q=node&page=2'
url.hash; // ''

JavaScript puro

Si por algún motivo no puede acceder a las API anteriores o desea tener más control sobre el análisis, puede usar el siguiente código para analizar la cadena de consulta en un objeto.

1
2
3
4
5
6
7
8
9
function getQueryParams(url) {
    const paramArr = url.slice(url.indexOf('?') + 1).split('&');
    const params = {};
    paramArr.map(param => {
        const [key, val] = param.split('=');
        params[key] = decodeURIComponent(val);
    })
    return params;
}

Nota: Hay muchas formas de analizar parámetros de consulta en JS simple, algunas más complicadas (y sólidas) que otras. Esta es solo una forma y fue adaptada de esta esencia.

Luego podemos usar esta función simple de JS para analizar un solo parámetro de consulta en una cadena:

1
2
getQueryParams('https://wikihtp.com/search?q=node&page=2')
// { q: 'node', page: '2' }