por - ¿Cómo recuperar los parámetros GET de javascript?

obtener parametros url jquery

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cómo puedo obtener valores de cadena de consulta en JavaScript? 73 respuestas

http://domain.com/page.html?returnurl=%2Fadmin

Para js dentro de page.html , ¿cómo puede recuperar los parámetros GET ?

Para el ejemplo simple anterior, func(''returnurl'') debe ser /admin

Pero también debería funcionar para consultas complejas ...

Answer 1

tl; solución de dr en una sola línea de código usando javascript de vainilla

var queryDict = {}
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})

Esta es la solución más simple . Lamentablemente , no maneja claves multivalor ni caracteres codificados.

"?a=1&a=%2Fadmin&b=2&c=3&d&e"
> queryDict
a: "%2Fadmin"  //overriden with last value, not decoded.
b: "2"
c: "3"
d: undefined
e: undefined

¿Claves multivalor y caracteres codificados ?

Vea la respuesta original en ¿Cómo puedo obtener valores de cadena de consulta en JavaScript?

"?a=1&b=2&c=3&d&e&a=5&a=t%20e%20x%20t&e=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dståle%26car%3Dsaab&a=%2Fadmin" > queryDict a: ["1", "5", "t e x t", "/admin"] b: ["2"] c: ["3"] d: [undefined] e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"] En tu ejemplo, accederías al valor así:

"?returnurl=%2Fadmin"
> qd.returnurl    // ["/admin"]
> qd[''returnurl''] // ["/admin"]
> qd.returnurl[0] // "/admin"

Answer 2

Éste usa expresiones regulares y devuelve nulo si param no existe o no tiene ningún valor:

function getQuery(q) {
   return (window.location.search.match(new RegExp(''[?&]'' + q + ''=([^&]+)'')) || [, null])[1];
}

Answer 3

Aquí hay otro ejemplo basado en el ejemplo de Kat y Bakudan anterior, pero haciéndolo un poco más genérico.

function getParams ()
{
    var result = {};
    var tmp = [];

    location.search
        .substr (1)
        .split ("&")
        .forEach (function (item) 
        {
            tmp = item.split ("=");
            result [tmp[0]] = decodeURIComponent (tmp[1]);
        });

    return result;
}

location.getParams = getParams;

console.log (location.getParams());
console.log (location.getParams()["returnurl"]);

Answer 4

Aquí he hecho este código para transformar los parámetros GET en un objeto para usarlos más fácilmente.

//Get Nav Url
function getNavUrl() {
    //Get Url
    return window.location.search.replace("?", "");
};
function getParameters(url) {
    //Params obj
    var params = {};
    //To lowercase
    url = url.toLowerCase();
    //To array
    url = url.split(''&'');

    //Iterate over url parameters array
    var length = url.length;
    for(var i=0; i<length; i++) {
        //Create prop
        var prop = url[i].slice(0, url[i].search(''=''));
        //Create Val
        var value = url[i].slice(url[i].search(''='')).replace(''='', '''');
        //Params New Attr
        params[prop] = value;
    }
    return params;
};
//Call To getParameters
console.log(getParameters(getNavUrl()));

Answer 5

Con el objeto developer.mozilla.org/en/DOM/window.location . Este código te da GET sin el signo de interrogación.

window.location.search.substr(1)

De su ejemplo devolverá returnurl=%2Fadmin

EDITAR : Me tomé la libertad de cambiar la respuesta de Qwerty , que es realmente buena , y como él señaló, seguí exactamente lo que el OP le preguntó:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    location.search
        .substr(1)
        .split("&")
        .forEach(function (item) {
          tmp = item.split("=");
          if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
        });
    return result;
}

Eliminé la ejecución de la función duplicada de su código, reemplazándola por una variable (tmp) y también agregué decodeURIComponent , exactamente como pidió OP. No estoy seguro de si esto puede o no ser un problema de seguridad.

O de lo contrario, con plano para ciclo, que funcionará incluso en IE8:

function findGetParameter(parameterName) {
    var result = null,
        tmp = [];
    var items = location.search.substr(1).split("&");
    for (var index = 0; index < items.length; index++) {
        tmp = items[index].split("=");
        if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
    }
    return result;
}

Answer 6

Esta solución maneja la decodificación de URL:

var params = function() {
    function urldecode(str) {
        return decodeURIComponent((str+'''').replace(//+/g, ''%20''));
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = urldecode(tmparr[1]);
        }
        return params;
    }

    var prmstr = window.location.search.substr(1);
    return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}();

Uso:

console.log(''someParam GET value is'', params[''someParam'']);

Answer 7

He creado una función simple de Javascript para acceder a los parámetros GET desde la URL.

Simplemente incluya esta fuente de Javascript y podrá acceder get parámetros de get . Ej .: en http://example.com/index.php?language=french , se puede acceder a la variable de language como $_GET["language"] De manera similar, una lista de todos los parámetros se almacena en una variable $_GET_Params como una matriz. Tanto el Javascript como el HTML se proporcionan en el siguiente fragmento de código:

<!DOCTYPE html>
<html>
  <body>
    <!-- This script is required -->
    <script>
    function $_GET() {
      // Get the Full href of the page e.g. http://www.google.com/files/script.php?v=1.8.7&country=india
      var href = window.location.href;
 
      // Get the protocol e.g. http
      var protocol = window.location.protocol + "//";
 
      // Get the host name e.g. www.google.com
      var hostname = window.location.hostname;
 
      // Get the pathname e.g. /files/script.php
      var pathname = window.location.pathname;
 
      // Remove protocol part
      var queries = href.replace(protocol, '''');
 
      // Remove host part
      queries = queries.replace(hostname, '''');
 
      // Remove pathname part
      queries = queries.replace(pathname, '''');
 
      // Presently, what is left in the variable queries is : ?v=1.8.7&country=india
 
      // Perform query functions if present
      if (queries != "" && queries != "?") {
 
     // Remove question mark ?
        queries = queries.slice(1);
 
        // Split all the different queries
        queries = queries.split("&");
  
        // Get the number of queries
        var length = queries.length;
  
        // Declare global variables to store keys and elements
        $_GET_Params = new Array();
        $_GET = {};
 
        // Perform functions per query
        for (var i  = 0; i < length; i++) {
   
          // Get the present query
          var key = queries[i];
   
          // Split the query and the value
          key = key.split("=");
   
          // Assign value to the $_GET variable
          $_GET[key[0]] = [key[1]];
   
          // Assign value to the $_GET_Params variable
          $_GET_Params[i] = key[0];
        }
      }
    }

    // Execute the function
    $_GET();
    </script>
    <h1>GET Parameters</h1>
    <h2>Try to insert some get parameter and access it through javascript</h2>
  </body>
</html>

Answer 8

Hola, aquí está la respuesta correcta para 2016:

some = new URLSearchParams("https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8&q=mdn%20query%20string")
var q = some.get(''q'') // ''mdn query string''
var ie = some.has(''ie'') // true
some.append(''new'',''here'')

console.log(q)
console.log(ie)
console.log(some)

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://polyfill.io/v2/docs/features/

Answer 9

Lo hago así (para recuperar un parámetro específico de obtención, aquí ''ParameterName''):

var parameterValue = decodeURIComponent(window.location.search.match(/(/?|&)parameterName/=([^&]*)/)[2]);

Answer 10

Mi solución se expande en @ tak3r ''s

Devuelve un objeto vacío cuando no hay parámetros de consulta y admite la notación de matriz ?a=1&a=2&a=3 :

function getQueryParams () {
  function identity (e) { return e; }
  function toKeyValue (params, param) {
    var keyValue = param.split(''='');
    var key = keyValue[0], value = keyValue[1];

    params[key] = params[key]?[value].concat(params[key]):value;
    return params;
  }
  return decodeURIComponent(window.location.search).
    replace(/^/?/, '''').split(''&'').
    filter(identity).
    reduce(toKeyValue, {});
}

Answer 11

Para obtener los parámetros como un objeto JSON:

alert(getUrlParameters().toSource())

function explode(delim, str)
{
    return str.split(delim);
}

function getUrlParameters()
{
    var out = {};
    var str = window.location.search.replace("?", "");
    var subs = explode(''&'', str);
    for(var i = 0; i < subs.length; ++i)
    {
        var vals = explode(''='', subs[i]);
        out[vals[0]] = vals[1];
    }
    return out;
}

Answer 12

Puede utilizar la función de búsqueda disponible en el objeto de ubicación. La función de búsqueda da la parte del parámetro de la URL. Los detalles se pueden encontrar aquí: http://www.javascriptkit.com/jsref/location.shtml

Deberá analizar la cadena resultante para obtener las variables y sus valores, por ejemplo, dividiéndolas en ''=''

Answer 13

Si está usando angularjs, puede usar $routeParams usando el módulo ngRoute

Tienes que añadir módulo en tu aplicación.

angular.module(''myApp'', [''ngRoute''])

Ahora puedes usar service $routeParams

.controller(''AppCtrl'', function($routeParams) {
  console.log($routeParams); //json object 
}

Answer 14

Si no le importa usar una biblioteca en lugar de rodar su propia implementación, visite https://github.com/jgallen23/querystring .

Answer 15

Una forma más elegante de hacerlo: :)

var options = window.location.search.slice(1)
                      .split(''&'')
                      .reduce(function _reduce (/*Object*/ a, /*String*/ b) {
                        b = b.split(''='');
                        a[b[0]] = decodeURIComponent(b[1]);
                        return a;
                      }, {});

Answer 16

window.location.search devolverá todo desde el? en. Este código a continuación eliminará el?, Use split para separar en matrices clave / valor, luego asigne propiedades con nombre al objeto params:

function getSearchParameters() {
      var prmstr = window.location.search.substr(1);
      return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
}

function transformToAssocArray( prmstr ) {
    var params = {};
    var prmarr = prmstr.split("&");
    for ( var i = 0; i < prmarr.length; i++) {
        var tmparr = prmarr[i].split("=");
        params[tmparr[0]] = tmparr[1];
    }
    return params;
}

var params = getSearchParameters();

Luego puede obtener el parámetro de prueba desde http://myurl.com/?test=1 llamando a params.test .

Answer 17

var getQueryParam = function(param) {
    var found;
    window.location.search.substr(1).split("&").forEach(function(item) {
        if (param ==  item.split("=")[0]) {
            found = item.split("=")[1];
        }
    });
    return found;
};