lunes, 13 de noviembre de 2023

Obtener Search Params desde JavaScript

#Javascript #Tip

Un resumen de cómo obtener Search Params (o Query Params) desde una URL en JavaScript.

Search Params

Los Search Params son parte de la cadena de consulta (query string) de una URL y generalmente se utilizan para enviar información adicional al momento de navegar hacia una página web.

La cadena de consulta es la parte de una URL que sigue al signo de interrogación (?) y puede contener uno o más pares de clave-valor separados por el signo de igual (=) y ampersand (&).

Veamos como ejemplo la siguiente URL:

https://www.ejemplo.com/pagina.html?nombre=Juan&edad=25

Los Search Params (o Query Params) son nombre=Juan y edad=25. Pensando en pares de clave valor identificamos nombre y edad como las claves, y Juan y 25 sus respectivos valores.

Acceder al string

Para acceder a los valores contenidos en la URL de la página actual, podemos hacerlo a través a del objeto window.location. Dentro de este objeto tenemos una propiedad específica window.location.search que incluye sólo la porción de Search Params de la URL.

// dentro de https://www.ejemplo.com/pagina.html?nombre=Juan&edad=25
const searchParams = window.location.search;
console.log(searchParams) // Imprime: '?nombre=Juan&edad=25'

Usando URLSearchParams

Podemos usar el objeto URLSearchParams de JavaScript para trabajar de manera más cómoda con los Search Params. Para esto, podemos construir un nuevo objeto, usando como parámetro el valor de window.location.search.

Este objeto URLSearchParams tiene métodos para obtener los valores de manera directa.

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

// Obtener el valor del parámetro 'nombre'
const nombre = urlSearchParams.get('nombre');
console.log(nombre); // Imprime: 'Juan'

// Obtener el valor del parámetro 'edad'
const edad = urlSearchParams.get('edad');
console.log(edad); // Imprime: '25'

Opcional: convertir en Object

Como paso adicional, podemos convertir un objeto del tipo URLSearchParams en un objeto tradicional de JavaScript

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

const urlObject = Object.fromEntries(urlSearchParams);
console.log(urlObject); // Imprime: { nombre: 'Juan', edad: 25 }