Como obtener los queryparams de un URL con JavaScript
Los query params o URLSearchParams son la parte final del URL y se utilizan para enviar datos adicionales al servidor.
¿Cómo identificar un query param?
Puedes identificarlos porque vienen al final del URL y comienzan con el símbolo ?. Por ejemplo en el url https://fmontes.com?search=webdesign&page=2 los query params son search=webdesign&page=2.
- El símbolo ? no es parte de los query params es usado para separar los parámetros del url
- El símbolo & por otro lado, se usa para separar multiples query params, en este caso tenemos dos:
- search=webdesign
- page=2
Obtener los queryparams de un URL con JavaScript
Para obtener los queryparams vamos a echar mano de dos API del navegador, el URL y el URLSearchParams.
Los primero que tenemos que hacer usar la API de URL:
Dentro del objeto resultante podemos obtener el objeto URLSearchParams en la propiedad searchParams:
El objeto URLSearchParams
Este objeto es como una caja de herramientas para interactuar con los query params y tiene varios métodos para agregar, editar o eliminar parámetros, por ejemplo
El método toString te regresa los query params como un string:
Si necesitas obtener el valor de un query param puedes hacer pasando el key al método get
Puedes agregar un nuevo query param con el método append:
Y claro, también puedes eliminar pasándole el key al método delete
Y como esto hay muchos métodos más que puedes ver en la documentación oficial.
Conclusión
En resumen, los query params o URLSearchParams se usan para enviar datos adicionales al servidor a través de la URL. Se identifican porque vienen al final del URL y comienzan con el símbolo ?. Con la API de URL y URLSearchParams en JavaScript, es fácil obtener, agregar, editar y eliminar query params de una URL.