jQuery Obtener parámetro de URL

Shraddha Paghdar 12 octubre 2023
jQuery Obtener parámetro de URL

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

Shraddha Paghdar avatar Shraddha Paghdar avatar

Shraddha is a JavaScript nerd that utilises it for everything from experimenting to assisting individuals and businesses with day-to-day operations and business growth. She is a writer, chef, and computer programmer. As a senior MEAN/MERN stack developer and project manager with more than 4 years of experience in this sector, she now handles multiple projects. She has been producing technical writing for at least a year and a half. She enjoys coming up with fresh, innovative ideas.

LinkedIn