7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. JavaScript

Cómo obtener la cadena de consulta en JavaScript

Scroll to top
Read Time: 5 mins

Spanish (Español) translation by Charles (you can also view the original English article)

En este artículo rápido, discutiremos un par de maneras diferentes que podrías utilizar para obtener la cadena de consulta en JavaScript.

Cuando trabajas con JavaScript, a veces necesitas acceder a los parámetros de la cadena de consulta en tu script. No hay una forma directa de conseguirlo, ya que no hay ninguna función o método de JavaScript incorporado que permita hacerlo. Por supuesto, puedes encontrar un montón de scripts de utilidad de terceros que cumplen con tus requisitos, pero es mejor si puedes implementarlo con vanilla JavaScript.

En este post, discutiremos cómo puedes construir una función personalizada para obtener parámetros de cadenas de consulta en vanilla JavaScript. Más adelante, también exploraremos la interfaz URLSearchParams para entender cómo funciona y cómo puede ayudar con los parámetros de la cadena de consulta...

Cómo obtener la cadena de consulta en Vanilla JavaScript

En esta sección, veremos cómo se pueden obtener los valores de la cadena consulta con JavaScript de vainilla.

Veamos el siguiente ejemplo de JavaScript.

Hemos creado la función getQueryStringValues, que puedes utilizar para obtener el valor del parámetro de la cadena de consulta disponible en la URL.

Repasemos la función para ver cómo funciona.

El siguiente fragmento es uno de los más importantes de la función.

En primer lugar, hemos utilizado el método indexOf para encontrar la posición del carácter ? en la URL. A continuación, hemos utilizado el método slice  para extraer la parte de la cadena de consulta en la URL. Finalmente, hemos utilizado el método split para dividir la cadena de consulta por el carácter &. Así, la variable url se inicializa con un array de parámetros de la cadena de consulta.

A continuación, hacemos un bucle a través de todos los elementos de array url. En el bucle, utilizamos el método split para dividir el valor del array por el carácter =. Y con eso, la variable arrParamInfo se inicializa con un array, donde la clave del array es el nombre del parámetro y el valor del array es el valor del parámetro. Puedes verlo en el siguiente fragmento.

A continuación, lo comparamos con el argumento que se pasa en la función. Si coincide con el argumento entrante, pondremos el valor del parámetro en el array arrParamValues. Como puedes ver, hemos cubierto tanto los parámetros simples como los array.

Finalmente, si la variable arrParamValues contiene valores, la devolveremos, en caso contrario se devuelve null.

Puedes seguir adelante y probar la función getQueryStringValues con diferentes valores.

Como se muestra en el ejemplo anterior, lo hemos llamado con diferentes valores y hemos registrado la salida con la función console.log. Es importante tener en cuenta que si el parámetro que has pasado en la función getQueryStringValues existe como un array en la cadena de consulta, obtendrías un array en respuesta, y devolvería todos los valores de ese parámetro.

El camino de URLSearchParams

Es una de las formas más sencillas de obtener los valores de la cadena de consulta en JavaScript. La interfaz URLSearchParams proporciona métodos de utilidad para trabajar con la cadena de consulta de una URL. Puedes comprobar el soporte del navegador con Can I use.

Veamos rápidamente cómo funciona.

Una vez que hayas inicializado el objeto URLSearchParams con la cadena de consulta, estarás listo para utilizar los métodos de utilidad proporcionados por el objeto URLSearchParams.

Veamos un par de métodos útiles en el contexto de este artículo.

El método get

Como su nombre indica, el método get  se utiliza para obtener el valor del parámetro de la cadena de consulta.

Intentemos entenderlo con el siguiente ejemplo.

En el ejemplo anterior, hemos obtenido el valor del parámetro de la cadena de consulta de la keyword, y daría como salida el Texto de búsqueda.

De este modo, puedes utilizar el método get  para obtener el valor de cualquier parámetro de la cadena de consulta.

El método has

El método has  se utiliza para comprobar la existencia de un parámetro en la cadena de consulta.

En el ejemplo anterior, hemos utilizado el método has para comprobar la existencia de los diferentes parámetros.

El método getAll

El método getAll se utiliza para obtener todos los valores de un parámetro si existe varias veces.

Vamos a comprobarlo con el siguiente ejemplo.

Como puedes ver, cuando usamos el método getAll, devuelve todos los valores asociados al parámetro.

Conclusión

Hoy hemos hablado de las diferentes formas que puedes utilizar para obtener la cadena de consulta en JavaScript. Junto con el JavaScript de vainilla, también discutimos cómo se puede utilizar la interfaz URLSearchParams para obtener las variables de la cadena de consulta.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.