javascript - recibir - ¿Cómo obtener el valor de los parámetros GET?

pug variables

Question

Tengo una URL con algunos parámetros GET de la siguiente manera:

www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 

Necesito obtener todo el valor de c . Intenté leer la URL, pero solo tengo m2 . ¿Cómo hago esto usando JavaScript?

Answer 1

Aquí está el código fuente de angularJs para analizar parámetros de consulta de url en un objeto:

function tryDecodeURIComponent(value) {
  try {
    return decodeURIComponent(value);
  } catch (e) {
    // Ignore any invalid uri component
  }
}

function isDefined(value) {return typeof value !== ''undefined'';}

function parseKeyValue(keyValue) {
  keyValue = keyValue.replace(/^/?/, '''');
  var obj = {}, key_value, key;
  var iter = (keyValue || "").split(''&'');
  for (var i=0; i<iter.length; i++) {
    var kValue = iter[i];
    if (kValue) {
      key_value = kValue.replace(//+/g,''%20'').split(''='');
      key = tryDecodeURIComponent(key_value[0]);
      if (isDefined(key)) {
        var val = isDefined(key_value[1]) ? tryDecodeURIComponent(key_value[1]) : true;
        if (!hasOwnProperty.call(obj, key)) {
          obj[key] = val;
        } else if (isArray(obj[key])) {
          obj[key].push(val);
        } else {
          obj[key] = [obj[key],val];
        }
      }
    }
  };
  return obj;
}

alert(JSON.stringify(parseKeyValue(''?a=1&b=3&c=m2-m3-m4-m5'')));

Puedes agregar esta función a window.location :

window.location.query = function query(arg){
  q = parseKeyValue(this.search);
  if (!isDefined(arg)) {
    return q;
  }      
  if (q.hasOwnProperty(arg)) {
    return q[arg];
  } else {
    return "";
  }
}

// assuming you have this url :
// http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5

console.log(window.location.query())

// Object {a: "1", b: "3", c: "m2-m3-m4-m5"}

console.log(window.location.query(''c''))

// "m2-m3-m4-m5"

Answer 2

Aquí está mi solución. Según lo aconsejado por Andy E al responder a esta pregunta , no es bueno para el rendimiento de su script si está creando repetidamente varias cadenas de expresiones regulares, ejecutando bucles, etc. solo para obtener un valor único. Por lo tanto, se me ocurrió un script más simple que devuelve todos los parámetros GET en un solo objeto. Debe llamarlo solo una vez, asignar el resultado a una variable y luego, en cualquier momento en el futuro, obtener el valor que desee de esa variable usando la clave apropiada. Tenga en cuenta que también se encarga de la decodificación de URI (es decir, cosas como% 20) y reemplaza + con un espacio:

 function getUrlQueryParams(url) {
  var queryString = url.split("?")[1];
  var keyValuePairs = queryString.split("&");
  var keyValue = [];
  var queryParams = {};
  keyValuePairs.forEach(function(pair) {
    keyValue = pair.split("=");
    queryParams[keyValue[0]] = decodeURIComponent(keyValue[1]).replace(//+/g, " ");
});
  return queryParams;
}

Entonces, aquí hay algunas pruebas del script para que las veas:

// Query parameters with strings only, no special characters.
var currentParams = getUrlQueryParams("example.com/foo?number=zero");
alert(currentParams["number"]); // Gives "zero".

// For the URL you stated above...
var someParams = getUrlQueryParams("www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5 ");
alert(someParams["c"]); // Gives "m2-m3-m4-m5".

// For a query params with URI encoding...
var someParams = getUrlQueryParams("www.example.com/t.html?phrase=a%20long%20shot&location=Silicon+Valley%2C+USA");
alert(someParams["phrase"]); // Gives "a long shot".
alert(someParams["location"]); // Gives "Silicon Valley, USA".

Answer 3

Aquí estoy publicando un ejemplo. Pero está en jQuery. Espero que ayude a otros

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.url.js"></script>

<!-- URL:  www.example.com/correct/?message=done&year=1990-->

<script type="text/javascript">
$(function(){
    $.url.attr(''protocol'')  // --> Protocol: "http"
    $.url.attr(''path'')          // --> host: "www.example.com"
    $.url.attr(''query'')         // --> path: "/correct/"
    $.url.attr(''message'')   // --> query: "done"
    $.url.attr(''year'')      // --> query: "1990"
});
</script>

Answer 4

Aquí hay una solución recursiva que no tiene expresiones regulares y tiene una mutación mínima (solo el objeto params está mutado, lo que creo que es inevitable en JS).

Es impresionante porque:

• Es recursivo
• Maneja múltiples parámetros del mismo nombre.
• Trata bien con cadenas de parámetros mal formados (valores perdidos, etc.)
• No se rompe si ''='' está en el valor
• Realiza decodificación de URL
• Y por último, es impresionante porque ... argh !!!

Código:

var get_params = function(search_string) {

  var parse = function(params, pairs) {
    var pair = pairs[0];
    var parts = pair.split(''='');
    var key = decodeURIComponent(parts[0]);
    var value = decodeURIComponent(parts.slice(1).join(''=''));

    // Handle multiple parameters of the same name
    if (typeof params[key] === "undefined") {
      params[key] = value;
    } else {
      params[key] = [].concat(params[key], value);
    }

    return pairs.length == 1 ? params : parse(params, pairs.slice(1))
  }

  // Get rid of leading ?
  return search_string.length == 0 ? {} : parse({}, search_string.substr(1).split(''&''));
}

var params = get_params(location.search);

// Finally, to get the param you want
params[''c''];

Answer 5

Encontré esto hace años, muy fácil:

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,    
    function(m,key,value) {
      vars[key] = value;
    });
    return vars;
  }

Entonces llámalo así:

var fType = getUrlVars()["type"];

Answer 6

Escribí una solución más simple y elegante.

var arr = document.URL.match(/room=([0-9]+)/)
var room = arr[1];

Answer 7

Esta pregunta tiene demasiadas respuestas, así que estoy agregando otra.

/**
 * parses and returns URI query parameters 
 * 
 * @param {string} param parm
 * @param {bool?} asArray if true, returns an array instead of a scalar 
 * @returns {Object|Array} 
 */
function getURIParameter(param, asArray) {
    return document.location.search.substring(1).split(''&'').reduce(function(p,c) {
        var parts = c.split(''='', 2).map(function(param) { return decodeURIComponent(param); });
        if(parts.length == 0 || parts[0] != param) return (p instanceof Array) && !asArray ? null : p;
        return asArray ? p.concat(parts.concat(true)[1]) : parts.concat(true)[1];
    }, []);
}

uso:

getURIParameter("id")  // returns the last id or null if not present
getURIParameter("id", true) // returns an array of all ids

esto hace frente a los parámetros vacíos (las claves presentes sin "=value" ), la exposición de una API de recuperación de valores escalar y basada en matrices, así como la decodificación del componente URI adecuado.

Answer 8

Esto es lo que hago:

var uriParams = getSearchParameters();
alert(uriParams.c);


// background functions:

// Get object/associative array of URL parameters
function getSearchParameters () {
  var prmstr = window.location.search.substr(1);
  return prmstr !== null && prmstr !== "" ? transformToAssocArray(prmstr) : {};
}

// convert parameters from url-style string to associative array
function transformToAssocArray (prmstr) {
  var params = {},
      prmarr = prmstr.split("&");

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

Answer 9

Hice una función que hace esto:

var getUrlParams = function (url) {
  var params = {};
  (url + ''?'').split(''?'')[1].split(''&'').forEach(function (pair) {
    pair = (pair + ''='').split(''='').map(decodeURIComponent);
    if (pair[0].length) {
      params[pair[0]] = pair[1];
    }
  });
  return params;
};

Actualización 5/26/2017, aquí hay una implementación de ES7 (se ejecuta con babel preset stage stage 0, 1, 2 o 3):

const getUrlParams = url => `${url}?`.split(''?'')[1]
  .split(''&'').reduce((params, pair) =>
    ((key, val) => key ? {...params, [key]: val} : params)
    (...`${pair}=`.split(''='').map(decodeURIComponent)), {});

Algunas pruebas:

console.log(getUrlParams(''https://google.com/foo?a=1&b=2&c'')); // Will log {a: ''1'', b: ''2'', c: ''''}
console.log(getUrlParams(''/foo?a=1&b=2&c'')); // Will log {a: ''1'', b: ''2'', c: ''''}
console.log(getUrlParams(''?a=1&b=2&c'')); // Will log {a: ''1'', b: ''2'', c: ''''}
console.log(getUrlParams(''https://google.com/'')); // Will log {}
console.log(getUrlParams(''a=1&b=2&c'')); // Will log {}

Actualización 3/26/2018, aquí hay una implementación de Typescript:

const getUrlParams = (search: string) => `${search}?`
  .split(''?'')[1]
  .split(''&'')
  .reduce(
    (params: object, pair: string) => {
      const [key, value] = `${pair}=`
        .split(''='')
        .map(decodeURIComponent)

      return key.length > 0 ? { ...params, [key]: value } : params
    },
    {}
  )

Answer 10

JavaScript en sí no tiene nada integrado para manejar los parámetros de cadena de consulta.

En un navegador (moderno) puede usar el objeto URL ;

var url_string = "http://www.example.com/t.html?a=1&b=3&c=m2-m3-m4-m5"; //window.location.href
var url = new URL(url_string);
var c = url.searchParams.get("c");
console.log(c);

Para navegadores más antiguos (incluido Internet Explorer), puede usar este polyfill o el código de la versión original de esta respuesta que precede a la URL :

Podrías acceder a location.search , que te daría desde el ? el carácter al final de la URL o el inicio del identificador del fragmento (#foo), lo que ocurra primero.

Entonces puedes analizarlo con esto:

function parse_query_string(query) {
  var vars = query.split("&");
  var query_string = {};
  for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    var key = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair[1]);
    // If first entry with this name
    if (typeof query_string[key] === "undefined") {
      query_string[key] = decodeURIComponent(value);
      // If second entry with this name
    } else if (typeof query_string[key] === "string") {
      var arr = [query_string[key], decodeURIComponent(value)];
      query_string[key] = arr;
      // If third or later entry with this name
    } else {
      query_string[key].push(decodeURIComponent(value));
    }
  }
  return query_string;
}

var query_string = "a=1&b=3&c=m2-m3-m4-m5";
var parsed_qs = parse_query_string(query_string);
console.log(parsed_qs.c);

Puede obtener la cadena de consulta desde la URL de la página actual con:

var query = window.location.search.substring(1);
var qs = parse_query_string(query);

Answer 11

La mayoría de las implementaciones que he visto pierden la URL, decodificando los nombres y los valores

Aquí hay una función de utilidad general que también realiza decodificación de URL adecuada:

function getQueryParams(qs) {
    qs = qs.split(''+'').join('' '');

    var params = {},
        tokens,
        re = /[?&]?([^=]+)=([^&]*)/g;

    while (tokens = re.exec(qs)) {
        params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
    }

    return params;
}

//var query = getQueryParams(document.location.search);
//alert(query.foo);

Answer 12

Los proveedores de navegadores han implementado una forma nativa de hacerlo a través de URL y URLSearchParams.

let url = new URL(''http://www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5'');
let searchParams = new URLSearchParams(url.search);
console.log(searchParams.get(''c''));  // outputs "m2-m3-m4-m5"

Actualmente soportado en Firefox, Opera, Safari, Chrome y Edge. Para obtener una lista de soporte de navegador vea aquí .

https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams https://developer.mozilla.org/en-US/docs/Web/API/URL/URL

https://url.spec.whatwg.org/

Eric Bidelman, un ingeniero de Google, recommends usar este polyfill para navegadores no compatibles.

Answer 13

Manera simple

function getParams(url){
        var regex = /[?&]([^=#]+)=([^&#]*)/g,
            params = {},
            match;
        while(match = regex.exec(url)) {
            params[match[1]] = match[2];
        }
        return params;
    }

entonces llámalo como getParams (url)

Answer 14

O si no desea reinventar la rueda de análisis de URI use URI.js

Para obtener el valor de un parámetro llamado foo:

new URI((''''+document.location)).search(true).foo

Lo que eso hace es

1. Convertir document.location en una cadena (es un objeto)
2. Alimenta esa cadena al constructor de la clase URI de URI.js
3. Invoque la función search () para obtener la porción de búsqueda (consulta) de la url
   (Pasando true le dice que genere un objeto)
4. Acceda a la propiedad foo en el objeto resultante para obtener el valor

Aquí hay un violín para esto ... http://jsfiddle.net/m6tett01/12/

Answer 15

Otra sugerencia más.

Ya hay algunas buenas respuestas, pero las encontré innecesariamente complejas y difíciles de entender. Esto es breve, simple y devuelve una matriz asociativa simple con nombres de clave correspondientes a los nombres de token en la URL.

Agregué una versión con comentarios a continuación para aquellos que quieren aprender.

Tenga en cuenta que esto se basa en jQuery ($ .each) para su bucle, que recomiendo en lugar de forEach. Me resulta más sencillo garantizar la compatibilidad entre navegadores con jQuery en todos los ámbitos en lugar de conectar correcciones individuales para admitir las nuevas funciones que no son compatibles con los navegadores más antiguos.

Edit: después de que escribí esto, noté la respuesta de Eric Elliott, que es casi la misma, aunque usa forEach, mientras que en general estoy en contra (por las razones mencionadas anteriormente).

function getTokens(){
    var tokens = [];
    var query = location.search;
    query = query.slice(1);
    query = query.split(''&'');
    $.each(query, function(i,value){    
        var token = value.split(''='');   
        var key = decodeURIComponent(token[0]);     
        var data = decodeURIComponent(token[1]);
        tokens[key] = data;
    });
    return tokens;
}

Versión comentada:

function getTokens(){
    var tokens = [];            // new array to hold result
    var query = location.search; // everything from the ''?'' onward 
    query = query.slice(1);     // remove the first character, which will be the ''?'' 
    query = query.split(''&'');   // split via each ''&'', leaving us an array of something=something strings

    // iterate through each something=something string
    $.each(query, function(i,value){    

        // split the something=something string via ''='', creating an array containing the token name and data
        var token = value.split(''='');   

        // assign the first array element (the token name) to the ''key'' variable
        var key = decodeURIComponent(token[0]);     

        // assign the second array element (the token data) to the ''data'' variable
        var data = decodeURIComponent(token[1]);

        tokens[key] = data;     // add an associative key/data pair to our result array, with key names being the URI token names
    });

    return tokens;  // return the array
}

Para los ejemplos a continuación asumiremos esta dirección:

http://www.example.com/page.htm?id=4&name=murray

Puede asignar los tokens de URL a su propia variable:

var tokens = getTokens();

Luego refiérase a cada token de URL por nombre como este:

document.write( tokens[''id''] );

Esto imprimiría "4".

También puede simplemente referirse a un nombre de token desde la función directamente:

document.write( getTokens()[''name''] );

... que imprimiría "murray".

Answer 16

Para un valor de parámetro único como este index.html? Msg = 1 use el siguiente código,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search.substring(1);
    var varArray = queryString.split("="); //eg. index.html?msg=1

    var param1 = varArray[0];
    var param2 = varArray[1];

}

Para todos los valores de parámetros use el siguiente código,

$(window).load(function(){
    queryString();
});

function queryString()
{
    var queryString = window.location.search;
    var varArray = queryString.split("&");
    for (var i=0;i<varArray.length;i++) {
      var param = varArray[i].split("=");
        //parameter-value pair
    }
} 

Answer 17

Podemos obtener los valores de los parámetros c de una manera más simple sin hacer un bucle de todos los parámetros, consulte la jQuery a continuación para obtener los parámetros.

1. Para obtener el valor del parámetro:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.match(**/(c=)[0-9A-Za-z-]+/ig**)[0].replace(''c='',"")

(o)

url.match(**/(c=)[0-z-]+/ig**)[0].replace(''c='',"")

devuelve como una cadena

"m2-m3-m4-m5"

2. Para reemplazar el valor del parámetro:

var url = "www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5";

url.replace(**/(c=)[0-9A-Za-z-]+/ig, "c=m2345"**)

Answer 18

Puede obtener la cadena de consulta en location.search , luego puede dividir todo después del signo de interrogación:

var params = {};

if (location.search) {
    var parts = location.search.substring(1).split(''&'');

    for (var i = 0; i < parts.length; i++) {
        var nv = parts[i].split(''='');
        if (!nv[0]) continue;
        params[nv[0]] = nv[1] || true;
    }
}

// Now you can get the parameters you want like so:
var abc = params.abc;

Answer 19

Solución ECMAScript 6:

var params = window.location.search
  .substring(1)
  .split("&")
  .map(v => v.split("="))
  .reduce((map, [key, value]) => map.set(key, decodeURIComponent(value)), new Map())

Answer 20

Tuve la necesidad de leer una variable URL GET y completar una acción basada en el parámetro url. Busqué una solución alta y baja y encontré este pequeño código. Básicamente lee la url de la página actual, realiza alguna expresión regular en la URL y luego guarda los parámetros de la url en una matriz asociativa, a la que podemos acceder fácilmente.

Por ejemplo, si tuviéramos la siguiente url con el javascript en la parte inferior en su lugar.

http://TestServer/Pages/NewsArchive.aspx?year=2013&Month=July

Todo lo que deberíamos hacer para obtener la identificación de los parámetros y la página es llamar a esto:

El Código será:

<script type="text/javascript">
var first = getUrlVars()["year"];
var second = getUrlVars()["Month"];

alert(first);
alert(second);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
</script>

Answer 21

Una forma super simple usando URLSearchParams .

function getParam(param){
  return new URLSearchParams(window.location.search).get(param);
}

Actualmente es compatible con Chrome, Firefox, Safari, Edge y others .

Answer 22

Yo uso la biblioteca parseUri . Te permite hacer exactamente lo que estás pidiendo:

var uri = ''www.test.com/t.html&a=1&b=3&c=m2-m3-m4-m5'';
var c = uri.queryKey[''c''];
// c = ''m2-m3-m4-m5''

Answer 23

yo suelo

function getVal(str) {
    var v = window.location.search.match(new RegExp(''(?:[/?/&]''+str+''=)([^&]+)''));
    return v ? v[1] : null;
}

Answer 24

source

function gup( name, url ) {
    if (!url) url = location.href;
    name = name.replace(/[/[]/,"///[").replace(/[/]]/,"///]");
    var regexS = "[//?&]"+name+"=([^&#]*)";
    var regex = new RegExp( regexS );
    var results = regex.exec( url );
    return results == null ? null : results[1];
}
gup(''q'', ''hxxp://example.com/?q=abc'')

Answer 25

Mira esto

function getURLParameters(paramName)
{
    var sURL = window.document.URL.toString();
    if (sURL.indexOf("?") > 0)
    {
        var arrParams = sURL.split("?");
        var arrURLParams = arrParams[1].split("&");
        var arrParamNames = new Array(arrURLParams.length);
        var arrParamValues = new Array(arrURLParams.length);

        var i = 0;
        for (i = 0; i<arrURLParams.length; i++)
        {
            var sParam =  arrURLParams[i].split("=");
            arrParamNames[i] = sParam[0];
            if (sParam[1] != "")
                arrParamValues[i] = unescape(sParam[1]);
            else
                arrParamValues[i] = "No Value";
        }

        for (i=0; i<arrURLParams.length; i++)
        {
            if (arrParamNames[i] == paramName)
            {
                //alert("Parameter:" + arrParamValues[i]);
                return arrParamValues[i];
            }
        }
        return "No Parameters Found";
    }
}

Answer 26

Esta es una manera fácil de verificar un solo parámetro:

URL de ejemplo:

    http://myserver/action?myParam=2

Ejemplo de Javascript:

    var myParam = location.search.split(''myParam='')[1]

si "myParam" existe en la URL ... la variable myParam contendrá "2", de lo contrario quedará indefinida.

Tal vez quieras un valor predeterminado, en ese caso:

    var myParam = location.search.split(''myParam='')[1] ? location.search.split(''myParam='')[1] : ''myDefaultValue'';

Actualización: Esto funciona mejor:

    var url = "http://www.example.com/index.php?myParam=384&login=admin"; // or window.location.href for current url
    var captured = /myParam=([^&]+)/.exec(url)[1]; // Value is in [1] (''384'' in our case)
    var result = captured ? captured : ''myDefaultValue'';

Y funciona bien incluso cuando la URL está llena de parámetros.

Answer 27

// Read a page''s GET URL variables and return them as an associative array.
function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf(''?'') + 1).split(''&'');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split(''='');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

// Usage for URL: http://my.site.com/location?locationId=53cc272c0364aefcb78756cd&shared=false
var id = getUrlVars()["locationId"];

Recibí desde aquí: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

Answer 28

// http:localhost:8080/path?param_1=a&param_2=b
var getParamsMap = function () {
    var params = window.location.search.split("&");
    var paramsMap = {};
    params.forEach(function (p) {
        var v = p.split("=");
        paramsMap[v[0]]=decodeURIComponent(v[1]);
    });
    return paramsMap;
};

// -----------------------

console.log(getParamsMap()["param_1"]);  // should log "a"     

Answer 29

function getParamValue(param) {
    var urlParamString = location.search.split(param + "=");
    if (urlParamString.length <= 1) return "";
    else {
        var tmp = urlParamString[1].split("&");
        return tmp[0];
    }
}

Esto debería funcionar para su caso, no importa si el parámetro es el último o no.

Answer 30

window.location.href.split("?")

luego ignorar el primer índice

Array.prototype.slice.call(window.location.href.split("?"), 1) 

devuelve una matriz de sus parámetros de url

var paramArray = Array.prototype.slice.call(window.location.href.split(/[?=]+/), 1);
var paramObject = paramArray.reduce(function(x, y, i, a){ (i%2==0) ?  (x[y] = a[i+1]) : void 0; return x; }, {});

Un poco más detallado / funcional pero también funcional, paramObject contiene todos los parámetros asignados como un objeto js