¿Cómo obtener los parámetros de solicitud "GET" en JavaScript?

Respuestas:

185

Todos los datos están disponibles en

window.location.search

tienes que analizar la cadena, por ejemplo.

function get(name){
   if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
      return decodeURIComponent(name[1]);
}

simplemente llame a la función con el nombre de variable GET como parámetro, por ejemplo.

get('foo');

esta función devolverá el valor de las variables o indefinido si la variable no tiene valor o no existe

Rafael
fuente
@Daniel Silveira: sí, podría / debería decodificar el valor (y codificar el nombre). Editaré mi publicación en unos momentos
Rafael
2
Tenga en cuenta que decodeURIComponent no decodifica / todos / los posibles escapes de URI. En particular, "+" no se decodificará como "". (Olvidé en qué navegador estaba. ¿FF, tal vez?) La especificación requiere que solo descodifiquen exactamente lo que codifica encodeUIRComponent, y codificará "" como "% 20", por lo que "+" se deja solo.
Jesse Rusak
Es por eso que me gusta PHP
ymakux
2
@volocuga, a diferencia de PHP, tratar con URL en JavaScript es una operación bastante rara, por lo que los proveedores de navegadores nunca se enfocaron realmente en estas características.
Rafael
Respondió brillantemente Rafael;)
Jalal Sordo
36

Podrías usar jquery.urlme gustó esto:

var xyz = jQuery.url.param("param_in_url");

Verifique el código fuente

Fuente actualizada: https://github.com/allmarkedup/jQuery-URL-Parser

Kaos
fuente
1
Gran respuesta, pero su enlace está muerto
Adam Casey
@Adam, parece que sí. Creo que esta es la URL actualizada: github.com/allmarkedup/jQuery-URL-Parser Una búsqueda en Google de Mark Perkins jquery.url me llevó a una actualización. Tengo la fuente de cuando publiqué esta respuesta si la necesita.
Kaos
3
Entonces, ¿se requiere un complemento?
JohnK
var xyz = jQuery.url().param("param_in_url");es la sintaxis correcta donde jQuery.url()da la URL de la página actual. Realice la corrección.
Ahmed Akhtar
13

Solo para poner mis dos centavos, si quisiera un objeto que contenga todas las solicitudes

function getRequests() {
    var s1 = location.search.substring(1, location.search.length).split('&'),
        r = {}, s2, i;
    for (i = 0; i < s1.length; i += 1) {
        s2 = s1[i].split('=');
        r[decodeURIComponent(s2[0]).toLowerCase()] = decodeURIComponent(s2[1]);
    }
    return r;
};

var QueryString = getRequests();

//if url === "index.html?test1=t1&test2=t2&test3=t3"
console.log(QueryString["test1"]); //logs t1
console.log(QueryString["test2"]); //logs t2
console.log(QueryString["test3"]); //logs t3

Tenga en cuenta que la clave para cada parámetro de obtención se establece en minúsculas. Entonces, hice una función de ayuda. Así que ahora no distingue entre mayúsculas y minúsculas.

function Request(name){
    return QueryString[name.toLowerCase()];
}
FabianCook
fuente
1
Realmente me gusta este método. +1
Ben Racicot
11

pruebe el siguiente código, le ayudará a obtener los parámetros GET de la URL. para más detalles.

 var url_string = window.location.href; // www.test.com?filename=test
    var url = new URL(url_string);
    var paramValue = url.searchParams.get("filename");
    alert(paramValue)
VISHNU Radhakrishnan
fuente
no funciona en el ejemplo localhost: 8080 / # /? access_token = 111 debido a la parte location.hash. Si aparece el símbolo '#' location.search está vacío
Maksim Tikhonov
url con el símbolo "#" no es compatible, así que tenemos que eliminarlo. intente esto: var url_string = window.location.href; // www.test.com?filename=test var url = new URL (url_string.replace ("# /", "")); var paramValue = url.searchParams.get ("access_token"); alerta (paramValue)
VISHNU Radhakrishnan
NO es compatible con Internet Explorer
Sebastian Scholle
5

Puede utilizar la URL para adquirir las variables GET. En particular, window.location.searchda todo después (e incluido) del '?'. Puede leer más sobre window.location aquí .

Dan Lew
fuente
3

Hoy necesitaba obtener los parámetros de solicitud de la página en una matriz asociativa, así que reuní lo siguiente, con un poco de ayuda de mis amigos . También maneja parámetros sin un =as true.

Con un ejemplo:

// URL: http://www.example.com/test.php?abc=123&def&xyz=&something%20else

var _GET = (function() {
    var _get = {};
    var re = /[?&]([^=&]+)(=?)([^&]*)/g;
    while (m = re.exec(location.search))
        _get[decodeURIComponent(m[1])] = (m[2] == '=' ? decodeURIComponent(m[3]) : true);
    return _get;
})();

console.log(_GET);
> Object {abc: "123", def: true, xyz: "", something else: true}
console.log(_GET['something else']);
> true
console.log(_GET.abc);
> 123
Mate
fuente
2

Puede analizar la URL de la página actual para obtener los parámetros GET. La URL se puede encontrar usando location.href.

Thomas Owens
fuente
Tenga en cuenta que esto no es del todo confiable, ya que es posible que el servidor lo haya redirigido a otro lugar. Pero es lo mejor que puedes hacer.
Joel Coehoorn
2

Una solución de reducción de mapas:

var urlParams = location.search.split(/[?&]/).slice(1).map(function(paramPair) {
        return paramPair.split(/=(.+)?/).slice(0, 2);
    }).reduce(function (obj, pairArray) {            
        obj[pairArray[0]] = pairArray[1];
        return obj;
    }, {});

Uso:

For url: http://example.com?one=1&two=2
console.log(urlParams.one) // 1
console.log(urlParams.two) // 2
Lavi Avigdor
fuente
1
¿Podría explicar por qué utilizaría una solución de reducción de mapas para esto? Por lo que tengo entendido, map-reduce es eficiente cuando se manejan conjuntos de datos realmente grandes. Como esto es solo una solicitud HTTP, no veo el punto de usar una solución de reducción de mapas.
JorgeGRC
en realidad map/reducees solo un mecanismo de procesamiento de colecciones: se puede utilizar con datos de cualquier tamaño. es más famoso por big data debido a su disposición a ser paralelizado
StephenBoesch
1

A diferencia de otras respuestas, el UrlSearchParamsobjeto puede evitar el uso de expresiones regulares u otra manipulación de cadenas y está disponible en la mayoría de los navegadores modernos:

var queryString = location.search
let params = new URLSearchParams(queryString)
// example of retrieving 'id' parameter
let id = parseInt(params.get("id"))
console.log(id)
Grindlay
fuente
¿Podría agregar alguna explicación para diferenciar esta respuesta un poco más de otras?
Giulio Caccin
0

La función aquí devuelve el parámetro por nombre. Con pequeños cambios, podrá devolver la URL base, el parámetro o el ancla.

function getUrlParameter(name) {
    var urlOld          = window.location.href.split('?');
    urlOld[1]           = urlOld[1] || '';
    var urlBase         = urlOld[0];
    var urlQuery        = urlOld[1].split('#');
    urlQuery[1]         = urlQuery[1] || '';
    var parametersString = urlQuery[0].split('&');
    if (parametersString.length === 1 && parametersString[0] === '') {
        parametersString = [];
    }
    // console.log(parametersString);
    var anchor          = urlQuery[1] || '';

    var urlParameters = {};
    jQuery.each(parametersString, function (idx, parameterString) {
        paramName   = parameterString.split('=')[0];
        paramValue  = parameterString.split('=')[1];
        urlParameters[paramName] = paramValue;
    });
    return urlParameters[name];
}
Demasiado grande.
fuente
0

Funciona para mi en

url: http: // localhost: 8080 / # /? access_token = 111

function get(name){
  const parts = window.location.href.split('?');
  if (parts.length > 1) {
    name = encodeURIComponent(name);
    const params = parts[1].split('&');
    const found = params.filter(el => (el.split('=')[0] === name) && el);
    if (found.length) return decodeURIComponent(found[0].split('=')[1]);
  }
}
Maksim Tikhonov
fuente