InstagramTwitterYoutubeGithubLinkedInStackOverflow

Como obtener los queryparams de un URL con JavaScript

Freddy Montes - Frontend Developer, Designer and TeacherFreddy Montes|

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.

Twitter

Gracias por leer esta entrada del blog. Cualquier comentario o pregunta llegame a mi Twitter.

Tweet Me

Copyright © 2023. Design and code by myself with Next.js. Fork it and create yours