Cómo obtener valores de cadena de consulta en JavaScript

Los valores de las cadenas de consulta en una URL frecuentemente proporcionan información sobre la solicitud, como los parámetros de búsqueda. Se puede usar una cadena de consulta para solicitar una página web que utiliza el protocolo HTTP. De vez en cuando es posible que necesite obtener atributos de cadena de consulta en su script. Además, saber cómo extraer los datos de la cadena de consulta de la URL es esencial si se maneja alguna lógica comercial o de solicitud en el front -end.

Este blog definirá el procedimiento para obtener los valores de la cadena de consulta en JavaScript.

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

Para obtener los valores de la cadena de consulta en JavaScript, use los siguientes métodos:

• Use la API de URL con el método get ()
• URLSearchParams con el método get ()
• URLSearchParams con el método valores ()

Método 1: Obtener valores de cadena de consulta utilizando la API de URL con el método get ()

Utilizar el "API de URL" con el "conseguir()Método para obtener los valores de cadena de consulta en JavaScript. Una URL (localizador de recursos uniformes) es una forma de encontrar un recurso de Internet específico. Por lo general, se compone de un protocolo (como "http" o "https"), Un nombre de dominio (como"ejemplo.comunicarse"), Y un camino (como"/Path/to/Resource"). Las URL se utilizan para acceder a páginas web, descargar archivos y acceder a otros recursos, incluidos los valores de las cadenas de consulta en Internet.

Ejemplo
Cree una variable que almacene la URL con cadenas de consulta:

var urlqueryString = "https: // www.ejemplo.com/página.html?Palabra clave = SearchText & FullName = jennyconvey & click = enviar ";

Llame al objeto URL pasando el "Urlquerytring":

var QueryString = new URL (urlqueryString);

Use el método get () pasando la clave "palabra clave"De la consulta para obtener su valor con el atributo de SearchParams. La propiedad SearchParams del objeto URL en JavaScript representa la cadena de consulta de una URL. Proporciona una forma de manipular la cadena de consulta de una URL como objeto en lugar de una cadena:

valor var1 = QueryString.Searchparams.Get ("Palabra clave");
consola.log ("Valor de la palabra clave:" + valor1);

Obtenga el segundo valor de la cadena de consulta pasando su clave al método get () e imprime en la consola:

VAR VALOR2 = QUERYTRING.Searchparams.Get ("FullName");
consola.log ("Valor de FullName:" + Value2);

Del mismo modo, obtenga el tercer valor en la cadena:

Vare value3 = QueryString.Searchparams.Get ("Haga clic");
consola.log ("Valor de Click:" + Value3);

Se puede ver que los valores de la cadena de consulta se han recuperado con éxito:

Método 2: Obtener valores de cadena de consulta usando URLSearchParams con el método get ()

El "UrlsearchParamsLa interfaz se puede usar en JavaScript para recuperar los valores de la cadena de consulta. Evalúa la cadena de consulta de una URL y ofrece un medio para acceder a los valores. Tenga en cuenta que solo debe enviar la parte de cadena de consulta de la URL, que puede recuperar utilizando el "ventana.ubicación.buscar"Como parámetro para URLSearchParams ().

Ejemplo
Cree una variable que almacene la cadena de consulta:

var urlqueryString = "Keyword = SearchText & FullName = JennyConvey & Click = Envitar";

Pasar la cadena al "UrlsearchParams" interfaz:

var QueryString = new URLSearchParams (urlqueryString);

Obtenga el valor de la clave "nombre completo"De la cadena de consulta usando el"conseguir()" método:

valor var1 = QueryString.Get ("FullName");
consola.log ("Valor de FullName:" + Value1);

Producción

Nota: Usar "const querystring = new URLSearchParams (ventana.ubicación.buscar)"Para obtener la URL en vivo/actual.

Después de obtener la URL actual, obtenga la cadena de consulta, cree una instancia de URLSearchParams y pase la cadena de consulta. Finalmente, obtenga el valor de un parámetro específico en la cadena de consulta usando el método get ().

Método 2: Obtener valores de cadena de consulta usando URLSearchParams con el método valores ()

También puedes usar el "valores()Método "con la interfaz URLSearchParams para recuperar los valores de la cadena de consulta. Ayuda a acceder a todos los valores de la cadena a la vez.

Ejemplo
Pase la cadena de consulta a la interfaz URLSearchParams y guárdela en una variable "consulta":

var QueryString = new URLSearchParams (urlqueryString);

Llame al método valores () en el "paraLuce para obtener todos los valores de la cadena de consulta:

para (valor const de consulta .valores())
consola.log (valor);

Se puede observar que todos los valores de cadena se han obtenido:

Se trata de obtener los valores de las cadenas de consulta en JavaScript.

Conclusión

Para obtener los valores de la cadena de consulta, use el "API de URL" con el "conseguir()"Método y"búsqueda de parlotes" atributo. La propiedad SearchParams del objeto URL en JavaScript representa la cadena de consulta de una URL. También puedes usar el "UrlsearchParams"Interfaz con el"conseguir()"Método o"valores()" método. Este blog describió el procedimiento para obtener los valores de la cadena de consulta en JavaScript.