Cómo obtener los PARÁMETROS de la url con javascript

Obtener los parámetros de la URL en ocasiones se hace necesario. Puede ser por muchas razones: Valores dinámicos, establecer condiciones, incrementar funcionalidad, etc.

Hace poco tuve la necesidad de realizar de obtener los valores pasados a la URL. Requería acceso a los mismos a través de JavaScript. Antes lo había hecho, pero la verdad, no de la forma más optima.

JavaScript nos provee funcionalidad especifica para hacer esto de forma sencilla.

Sin más, te cuento cómo hacerlo, en este nuevo artículo, de tips rápidos.

Cómo obtener los parámetros de la URL usando JavaScript.

Asumiendo que tienes la siguiente URL:

https://example.com/?producto=camiseta&color=azul&talla=s

Nos interesa obtener los valores:

producto=camiseta&color=azul&talla=s

Para logar esto, usaremos la propiedad window.location.search de JavaScript:

const valores = window.location.search;

//Mostramos los valores en consola:
console.log(valores);

//Resultado:
//producto=camiseta&color=azul&talla=s

Para acceder a los parámetros crearemos un objeto de tipo URLSearchParams y usaremos el método get() para obtener cada uno de los valores, usando su nombre.

//Creamos la instancia
const urlParams = new URLSearchParams(valores);

//Accedemos a los valores
var producto = urlParams.get('producto');

Hay una serie de funciones adicionales para complementar y hacer más robusto el proceso.

Comprobar si existen los valores:

//Verificar si existe el parámetro
console.log(urlParams.has('producto'));

//Puedes recorrer los valores, claves y pares completos.
const
  keys = urlParams.keys(),
  values = urlParams.values(),
  entries = urlParams.entries();

for (const value of values) console.log(value);
//camiseta, azul, s

Acá puedes ver la compatibilidad de estas funciones con los diferentes navegadores:

Como te habrás dado cuenta, manipular los valores de la URL con JavaScript es un proceso bastante simple.

Personalmente amo la simplicidad al momento de programar con JavaScript y sobre todo, lo optimo que pueden resultar muchas cosas.

¡Compartir es amor!

#HappyCoding.