¿Cómo recuperar parámetros GET de JavaScript?

«OBTENER»

Cuando visitas cualquier sitio web, alguna vez pensaste qué significa el signo de interrogación ‘?’ está haciendo en la barra de direcciones. Averigüemos cuál es el uso de este signo de interrogación ‘?’.

El signo de interrogación actúa como un separador y lo que sigue después es una string de consulta que tiene la forma de pares de valores clave. Varios pares de valores clave están separados por el símbolo ‘&’.

Ejemplo:

geeksforgeeks.org/web-development?page=2&name=gfg

La imagen de arriba muestra la dirección. El contenido seguido por el ‘?’ es la string de consulta que tiene dos pares clave-valor que se muestran a continuación:

• Par 1: página = 2
• Par 2: nombre = gfg

Nuestra tarea es obtener los valores respectivos de cada par, que también se conocen como parámetros GET.

Usando las claves especificadas en la dirección: la clase URLSearchParams toma la dirección del sitio web y busca el valor asociado con la clave proporcionada.

Aquí está el código para el enfoque anterior:

// Arrow function to get the parameter
// of the specified key
getParameter = (key) => {
  
    // Address of the current window
    address = window.location.search
  
    // Returns a URLSearchParams object instance
    parameterList = new URLSearchParams(address)
  
    // Returning the respected value associated
    // with the provided key
    return parameterList.get(key)
}
  
// Gets the value associated with the key "ie"
console.log(getParameter("ie"))

Producción:

2

Usando la propiedad forEach de la clase URLSearchParams para recuperar todos los parámetros GET.

// Arrow function to get all the GET parameters
getParameters = () => {
  
    // Address of the current window
    address = window.location.search
  
    // Returns a URLSearchParams object instance
    parameterList = new URLSearchParams(address)
  
    // Created a map which holds key value pairs
    let map = new Map()
  
    // Storing every key value pair in the map
    parameterList.forEach((value, key) => {
        map.set(key, value)
    })
  
    // Returning the map of GET parameters
    return map
}
  
// Gets all the getParameters
console.log(getParameters())

Producción:

{"page" => "2", "name" => "gfg"}