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

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. Traté de leer la URL, pero solo obtuve m2. ¿Cómo hago esto usando JavaScript?

El propio JavaScript no tiene nada incorporado para manejar los parámetros de la cadena de consulta.

El código que se ejecuta en un navegador (moderno) puede usar el URLobjeto (que es parte de las API proporcionadas por los navegadores a JS):

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 anterior a URL:

Podrías acceder location.search, lo que te daría desde el ?carácter hasta el final de la URL o el comienzo del identificador de 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 de la URL de la página actual con:

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

La mayoría de las implementaciones que he visto pierden URL-decodificación de los nombres y los valores.

Aquí hay una función de utilidad general que también hace una 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);

fuente

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')

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

URL de ejemplo:

    http://myserver/action?myParam=2

Javascript de ejemplo:

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

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

Quizás desee 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.

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 compatible con Firefox, Opera, Safari, Chrome y Edge. Para obtener una lista de compatibilidad con el navegador, consulte 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, ingeniero de Google, recomienda usar este polyfill para navegadores no compatibles.

Encontré esto hace mucho tiempo, 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"];

Puede obtener la cadena de consulta 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;

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

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

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 otros .

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 asombroso porque:

• Es recursivo
• Maneja múltiples parámetros del mismo nombre
• Trata bien con cadenas de parámetros mal formadas (valores faltantes, etc.)
• No se rompe si '=' está en el valor
• Realiza decodificación de URL
• Y por último, es increíble 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'];

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 las etapas preestablecidas de babel 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 26/03/2018, aquí hay una implementación de Typecript:

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
    },
    {}
  )

Actualización 2/13/2019, aquí hay una implementación actualizada de TypeScript que funciona con TypeScript 3.

interface IParams { [key: string]: string }

const paramReducer = (params: IParams, pair: string): IParams => {
  const [key, value] = `${pair}=`.split('=').map(decodeURIComponent)

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

const getUrlParams = (search: string): IParams =>
  `${search}?`.split('?')[1].split('&').reduce<IParams>(paramReducer, {})

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";
    }
}

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())

yo suelo

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

Yo uso la biblioteca parseUri . Le permite hacer exactamente lo que está 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'

Aquí está mi solución. Como aconsejó 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. Entonces, 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 cualquier valor que desee de esa variable usando la tecla 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 de la secuencia de comandos para que vea:

// 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".

O si no desea reinventar la rueda de análisis 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. Convierta document.location en una cadena (es un objeto)
2. Alimente esa cadena al constructor de clase URI de URI.js
3. Invoque la función de búsqueda () para obtener la parte de búsqueda (consulta) de la URL
   (pasar verdadero 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/

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 el valor de todos los 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
    }
} 

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>

El camino más corto:

new URL(location.href).searchParams.get("my_key");

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 (esas claves presentes sin "=value"), la exposición de una API de recuperación de valores escalar y basada en una matriz, así como la decodificación de componentes URI adecuada.

La forma más fácil de usar el replace()método:

De la urlStrcadena:

paramVal = urlStr.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

o desde la URL actual :

paramVal = document.URL.replace(/.*param_name=([^&]*).*|(.*)/, '$1');

Explicación:

• document.URL - La interfaz devuelve la ubicación del documento (URL de la página) como una cadena.
• replace()- El método devuelve una nueva cadena con algunas o todas las coincidencias de un patrón reemplazado por un reemplazo .
• /.*param_name=([^&]*).*/- el patrón de expresión regular encerrado entre barras que significa:
  • .* - cero o más de cualquier personaje,
  • param_name= - nombre del parámetro que está serched,
  • () - grupo en expresión regular,
  • [^&]*- uno o más de los caracteres &, excepto
  • | - alternancia,
  • $1 - referencia al primer grupo en expresión regular.

var urlStr = 'www.test.com/t.html?a=1&b=3&c=m2-m3-m4-m5';
var c = urlStr.replace(/.*c=([^&]*).*|(.*)/, '$1');
var notExisted = urlStr.replace(/.*not_existed=([^&]*).*|(.*)/, '$1');
console.log(`c === '${c}'`);
console.log(`notExisted === '${notExisted}'`);

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 claves correspondientes a los nombres de token en la URL.

Agregué una versión con comentarios a continuación para aquellos que quieran 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 utilizando jQuery en todos los ámbitos en lugar de conectar soluciones individuales para admitir las nuevas funciones que no se admiten en los navegadores más antiguos.

Editar: Después de escribir esto, noté la respuesta de Eric Elliott, que es casi la misma, aunque se usa para cada uno, mientras que generalmente 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, consulte cada token de URL por nombre de esta manera:

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

Esto imprimiría "4".

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

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

... que imprimiría "murray".

// 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"];

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

Manera simple

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

luego llámalo como getParams (url)

Tuve la necesidad de leer una variable GET de URL 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.

Entonces, como 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 los parámetros id y 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>

// 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"     

Este Gist de Eldon McGuinness es, con mucho, la implementación más completa de un analizador de cadenas de consulta JavaScript que he visto hasta ahora.

Desafortunadamente, está escrito como un complemento jQuery.

Lo reescribí a vanilla JS e hice algunas mejoras:

function parseQuery(str) {
  var qso = {};
  var qs = (str || document.location.search);
  // Check for an empty querystring
  if (qs == "") {
    return qso;
  }
  // Normalize the querystring
  qs = qs.replace(/(^\?)/, '').replace(/;/g, '&');
  while (qs.indexOf("&&") != -1) {
    qs = qs.replace(/&&/g, '&');
  }
  qs = qs.replace(/([\&]+$)/, '');
  // Break the querystring into parts
  qs = qs.split("&");
  // Build the querystring object
  for (var i = 0; i < qs.length; i++) {
    var qi = qs[i].split("=");
    qi = qi.map(function(n) {
      return decodeURIComponent(n)
    });
    if (typeof qi[1] === "undefined") {
      qi[1] = null;
    }
    if (typeof qso[qi[0]] !== "undefined") {

      // If a key already exists then make this an object
      if (typeof (qso[qi[0]]) == "string") {
        var temp = qso[qi[0]];
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]] = [];
        qso[qi[0]].push(temp);
        qso[qi[0]].push(qi[1]);

      } else if (typeof (qso[qi[0]]) == "object") {
        if (qi[1] == "") {
          qi[1] = null;
        }
        qso[qi[0]].push(qi[1]);
      }
    } else {
      // If no key exists just set it as a string
      if (qi[1] == "") {
        qi[1] = null;
      }
      qso[qi[0]] = qi[1];
    }
  }
  return qso;
}

// DEMO
console.log(parseQuery("?foo=bar&foo=boo&roo=bar;bee=bop;=ghost;=ghost2;&;checkbox%5B%5D=b1;checkbox%5B%5D=b2;dd=;http=http%3A%2F%2Fw3schools.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab&http=http%3A%2F%2Fw3schools2.com%2Fmy%20test.asp%3Fname%3Dst%C3%A5le%26car%3Dsaab"));

Ver también este violín .

Solución de estilo elegante y funcional.

Creemos un objeto que contenga nombres de parámetros de URL como claves, luego podemos extraer fácilmente el parámetro por su nombre:

// URL: https://example.com/?test=true&orderId=9381  

// Build an object containing key-value pairs
export const queryStringParams = window.location.search
  .split('?')[1]
  .split('&')
  .map(keyValue => keyValue.split('='))
  .reduce<QueryStringParams>((params, [key, value]) => {
    params[key] = value;
    return params;
  }, {});

type QueryStringParams = {
  [key: string]: string;
};


// Return URL parameter called "orderId"
return queryStringParams.orderId;

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;
}