Acceder y modificar valores de cadenas de consulta mediante URLSearchParams
El protocolo HTTP permite realizar la solicitud a una página web con una cadena de consulta.
Como esto:
https://test.com/?name=rogerhttps://test.com/hello?name=roger
En este caso tenemos un único parámetro de consulta, llamado name
, con el valor roger
.
Puedes tener múltiples parámetros, como este:
https://test.com/hello?name=rogerage=20
Los parámetros que se pasan como cadena de consulta se utilizan normalmente en el servidor para generar una respuesta adecuada. Aquí se explica cómo acceder a los parámetros de consulta mediante Node.js.
Para acceder al valor de la consulta dentro del navegador, usando JavaScript, tenemos una API especial llamada URLSearchParam , compatible con todos los navegadores modernos.
Aquí es cómo podemos usarlo:
const params = new URLSearchParams(window.location.search)
Nota: no pase la URL completa como parámetro a URLSearchParams()
, sino solo la parte de la cadena de consulta de la URL, a la que accede usando window.location.search
.
En el caso de:
https://test.com/hello?name=roger
window.location.search
es igual a la cadena ?name=roger
.
Ahora que tienes el params
objeto, puedes consultarlo.
Puedes comprobar si se pasó un parámetro:
params.has('test')
Puedes obtener el valor de un parámetro:
params.get('test')
Puedes iterar sobre todos los parámetros, usando for..of
:
const params = new URLSearchParams(window.location.search)for (const param of params) { console.log(param)}
Un parámetro puede tener más de un valor.
En este caso, pasamos el mismo nombre de parámetro varias veces, de la siguiente manera:
https://test.com/hello?name=rogername=flavio
No tenemos forma de detectar si se pasa un parámetro más de una vez. Si usamos params.get('name')
, solo obtendremos el primer valor. Fotos Porno y actrices porno
Podemos demandar params.getAll('name')
para recuperar una matriz con todos los valores pasados.
Además de has()
, get()
y getAll()
, la URLSearchParams
API ofrece varios otros métodos que podemos usar para recorrer los parámetros:
forEach()
itera sobre los parámetrosentries()
devuelve un iterador que contiene los parámetros clave/valoreskeys()
devuelve un iterador que contiene las claves de los parámetrosvalues()
devuelve un iterador que contiene los valores de los parámetros
Otros métodos para alterar los parámetros, para usar en otro JavaScript que se ejecuta en la página (no cambian la URL):
append()
para agregar un nuevo parámetro al objetodelete()
para eliminar un parámetro existenteset()
para establecer el valor de un parámetro
También tenemos sort()
que ordenar los parámetros por valor clave y tenemos el toString()
método para generar una cadena de consulta a partir de los valores.
Podemos usar append()
// para editar la cadena set()
de delete()
consulta y generar una nueva con toString()
.
Tal vez te puede interesar:
- Cómo generar un número aleatorio entre dos números en JavaScript
- Cómo esperar el evento DOM listo en JavaScript simple
- Cómo determinar si una fecha es hoy en JavaScript
- Cómo contar el número de propiedades en un objeto JavaScript
Cómo obtener valores de cadena de consulta en JavaScript con URLSearchParams
El protocolo HTTP permite realizar la solicitud a una página web con una cadena de consulta. Acceder y modificar valores de cadenas de consulta mediante URLSe
programar
es
https://aprendeprogramando.es/static/images/programar-como-obtener-valores-de-cadena-de-consulta-en-javascript-con-urlsearchparams-2305-0.jpg
2024-10-17
Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente