HOWTO · jQuery

jQuery Obtener parámetro de URL

En la publicación de hoy, aprenderemos cómo obtener parámetros de URL en jQuery.

En esta página

En la publicación de hoy, aprenderemos cómo obtener parámetros de URL en jQuery.

Obtener parámetros de URL en jQuery

En JavaScript, la propiedad Search de la interfaz Location es una cadena de búsqueda, también conocida como cadena de consulta; es decir, una cadena que contiene un ? seguido de los parámetros de URL.

Los navegadores modernos tienen URLSearchParams y URL.SearchParams para que sea menos difícil analizar los parámetros de las cadenas de preguntas. La técnica get() de la interfaz URLSearchParams devuelve el valor primario asociado con el parámetro search especificado.

Sintaxis:

get(name)

Entendámoslo con el siguiente ejemplo sencillo.

let dummyURL =
    'https://delftstack.com/howto/jquery/?technology=jquery&post=urlParameter'
const extractURLParameter = (searchParam) => {
  const searchPageURL = dummyURL.split('?')[1];
  const searchURLVariables = searchPageURL.split('&');
  let searchParameterName;

  for (let i = 0; i < searchURLVariables.length; i++) {
    searchParameterName = searchURLVariables[i].split('=');

    if (searchParameterName[0] === searchParam) {
      return searchParameterName[1] === undefined ?
          true :
          decodeURIComponent(searchParameterName[1]);
    }
  }
  return false;
};


console.log(extractURLParameter('technology'));
console.log(extractURLParameter('post'));

const params =
    new URLSearchParams(window.location.search);  // pass the dummyURL here
const name = params.get('editor_console');
console.log(name)

En el ejemplo anterior, definimos una función general que extrae el parámetro de URL de la URL de la ubicación actual. Las propiedades de búsqueda de la interfaz location extraen los parámetros de la URL y el valor separados por ?.

El siguiente paso es dividir los parámetros con &. Ahora podemos iterar a través de cada uno de los parámetros y verificar si el parámetro solicitado existe o no.

Podemos separar el parámetro y la clave por =.

La segunda alternativa es utilizar directamente la interfaz URLSearchParams, que proporciona la lista de todos los parámetros de consulta. El método Get extrae el valor asociado al parámetro solicitado.

Esta es una solución eficiente si el navegador admite URLSearchParams.

Intente ejecutar el fragmento de código anterior en cualquier navegador que admita jQuery. Se muestra el siguiente resultado.

jquery
urlParameter

Manifestación