Cómo obtener valores de una cadena de consulta en JavaScript

Cuando estás trabajando en una página web, puede ser útil obtener ciertos valores de una cadena de consulta para ejecutar acciones en función de esos valores. Una cadena de consulta es la parte de una URL que viene después del signo de interrogación (?) y que contiene pares de claves y valores separados por el signo igual (=) y separados entre sí por el signo ampersand (&).

En este artículo, te mostraremos cómo obtener los valores de una cadena de consulta en JavaScript. Cubriremos diferentes opciones que puedes usar dependiendo del tipo de valor que necesitas obtener y cómo usarlos de manera efectiva en tu código.

Cómo obtener valores de una cadena de consulta en JavaScript

1. window.location.search

La forma más sencilla de obtener una cadena de consulta en JavaScript es utilizando el objeto location y su propiedad search. Esta propiedad devuelve toda la cadena de consulta, incluyendo el signo de interrogación (?).


let querystring = window.location.search;
console.log(querystring);


2. URLSearchParams.get()

Si necesitas obtener un valor específico de una cadena de consulta, puedes utilizar la interfaz URLSearchParams y su método get(). Este método toma como argumento el nombre de la clave que estás buscando y devuelve su valor correspondiente.


let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let value = urlParams.get('clave');
console.log(value);


3. RegExp

Si necesitas extraer valores de una cadena de consulta que no están en un formato clave=valor, puedes utilizar expresiones regulares para buscar los valores que necesitas.


let querystring = window.location.search;
let matches = querystring.match(/valor/g);
console.log(matches);


Ejemplos de uso

Aquí hay algunos ejemplos de cómo puedes utilizar los métodos mencionados anteriormente para obtener y utilizar valores de una cadena de consulta en JavaScript:

• Mostrar el valor de una clave específica en un elemento HTML:
  
let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let value = urlParams.get('clave');
document.getElementById('elemento').innerText = value;

• Redirigir a una página con valores de una cadena de consulta específicos:
  
let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let value = urlParams.get('clave');
window.location.replace('/nueva-pagina?clave=' + value);


Conclusión

Obtener y utilizar valores de una cadena de consulta en JavaScript es una habilidad importante que te permitirá crear páginas web más interactivas y dinámicas. Ya sea que estés mostrando información personalizada a los usuarios o redirigiéndolos a páginas específicas en función de sus elecciones, saber cómo trabajar con una cadena de consulta en JavaScript es esencial para la programación web.

Preguntas frecuentes

1. ¿Puedo obtener los valores de una cadena de consulta en JavaScript sin usar la propiedad location?

No es posible obtener una cadena de consulta sin utilizar la propiedad location o alguna otra manera de acceder a la URL de la página actual en JavaScript.

2. ¿Qué sucede si trato de obtener un valor que no existe en la cadena de consulta?

Si intentas obtener un valor que no existe en la cadena de consulta utilizando los métodos mencionados anteriormente, el valor devuelto será null. Es importante verificar que los valores que se obtienen no sean null antes de intentar utilizarlos en tu código.

3. ¿Puedo utilizar las expresiones regulares para obtener valores en un formato diferente de clave=valor?

Sí, puedes usar expresiones regulares para buscar valores en cualquier formato de cadena de consulta. Sin embargo, ten en cuenta que esto puede requerir una expresión regular más complicada que busque patrones específicos en la cadena de consulta.

Cómo calcular porcentaje en JavaScript

Añadiendo y eliminando elementos HTML con JavaScript

Crear una lista de objetos en JavaScript

Cómo agregar atributos a un elemento del DOM con JavaScript

Dividir una cadena y obtener el último elemento de la matriz en JavaScript

Convertir un objeto a una cadena de consulta utilizando JavaScript

Cómo cambiar el color del texto en JavaScript

Cómo llamar a una función de JavaScript en HTML

Cómo deshabilitar o habilitar botones con JavaScript y jQuery