Como obter o valor dos parâmetros GET?

Eu tenho uma URL com alguns parâmetros GET da seguinte maneira:

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

Eu preciso obter todo o valor de c. Tentei ler o URL, mas consegui apenas m2. Como faço isso usando JavaScript?

O próprio JavaScript não possui nada embutido para manipular parâmetros de cadeia de consulta.

Código em execução em um navegador (moderno), você pode usar o URLobjeto (que faz parte das APIs fornecidas pelos navegadores para 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 mais antigos (incluindo o Internet Explorer), você pode usar este polyfill ou o código da versão original desta resposta anterior URL:

Você poderia acessar location.search, o que forneceria do ?caractere até o final da URL ou o início do identificador de fragmento (#foo), o que ocorrer primeiro.

Então você pode analisá-lo com isso:

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

Você pode obter a string de consulta no URL da página atual com:

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

A maioria das implementações que vi perder a decodificação de URL dos nomes e valores.

Aqui está uma função de utilitário geral que também faz decodificação de URL adequada:

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

fonte

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

Essa é uma maneira fácil de verificar apenas um parâmetro:

URL de exemplo:

    http://myserver/action?myParam=2

Exemplo de Javascript:

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

se "myParam" existir no URL ... a variável myParam conterá "2", caso contrário, será indefinida.

Talvez você queira um valor padrão, nesse caso:

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

Atualização: Isso funciona melhor:

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

E funciona bem mesmo quando o URL está cheio de parâmetros.

Os fornecedores de navegadores implementaram uma maneira nativa de fazer isso via URL e 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"

Atualmente suportado no Firefox, Opera, Safari, Chrome e Edge. Para uma lista de suporte ao navegador, clique aqui .

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, engenheiro do Google, recomenda o uso deste polyfill para navegadores não suportados.

Achei isso há muito tempo, muito fácil:

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

Então chame assim:

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

Você pode inserir a string de consulta location.searche dividir tudo após o ponto de interrogação:

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;

Eu escrevi uma solução mais simples e elegante.

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

Uma maneira super simples de usar o URLSearchParams .

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

Atualmente, ele é suportado no Chrome, Firefox, Safari, Edge e outros .

Aqui está uma solução recursiva que não possui regex e tem uma mutação mínima (apenas o objeto params está mutado, o que acredito ser inevitável em JS).

É incrível porque:

• É recursivo
• Lida com vários parâmetros com o mesmo nome
• Lida bem com seqüências de parâmetros malformadas (valores ausentes, etc.)
• Não quebra se '=' estiver no valor
• Executa a decodificação de URL
• E por último, é incrível 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'];

Eu fiz uma função que faz isso:

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

Atualização 26/05/2017, aqui está uma implementação do ES7 (executada com o estágio 0, 1, 2 ou 3 do babel preset):

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

Alguns testes:

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

Atualização 26/26/2018, aqui está uma implementação do 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
    },
    {}
  )

Atualização 13/02/2019, aqui está uma implementação TypeScript atualizada que funciona com o 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, {})

Veja isso

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

Solução 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())

eu uso

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

Eu uso a biblioteca parseUri . Ele permite que você faça exatamente o que está solicitando:

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'

Aqui está a minha solução. Conforme recomendado por Andy E ao responder a essa pergunta , não é bom para o desempenho do seu script se ele estiver criando repetidamente várias seqüências de caracteres de expressões regulares, executando loops etc. apenas para obter um valor único. Então, eu vim com um script mais simples que retorna todos os parâmetros GET em um único objeto. Você deve chamá-lo apenas uma vez, atribuir o resultado a uma variável e, a qualquer momento no futuro, obter qualquer valor desejado dessa variável usando a chave apropriada. Observe que ele também cuida da decodificação de URI (ou seja, coisas como% 20) e substitui + por um espaço:

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

Então, aqui estão alguns testes do script para você ver:

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

Ou, se você não deseja reinventar a roda de análise do URI, use URI.js

Para obter o valor de um parâmetro chamado foo:

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

O que isso faz é

1. Converter document.location em uma string (é um objeto)
2. Alimente essa sequência ao construtor de classe URI.js do URI.js
3. Invoque a função search () para obter a parte de pesquisa (query) do URL
   (passar true diz a ele para gerar um objeto)
4. Acesse a propriedade foo no objeto resultante para obter o valor

Aqui está um violino para isso .... http://jsfiddle.net/m6tett01/12/

Para um valor de parâmetro único como este index.html? Msg = 1 use o seguinte 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 Todo o valor do parâmetro, use o seguinte 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
    }
} 

Aqui estou postando um exemplo. Mas está no jQuery. Espero que ajude os outros:

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

O caminho mais curto:

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

esta pergunta tem muitas respostas, então estou adicionando outra.

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

isso lida com parâmetros vazios (aquelas chaves presentes sem "=value"), a exposição de uma API de recuperação de valor escalar e baseada em matriz, bem como a decodificação adequada de componentes de URI.

A maneira mais fácil de usar o replace()método:

Da urlStrsequência:

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

ou a partir do URL atual :

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

Explicação:

• document.URL - interface retorna o local do documento (URL da página) como uma sequência.
• replace()- método retorna uma nova string com algumas ou todas as correspondências de um padrão substituídas por uma substituição .
• /.*param_name=([^&]*).*/- o padrão de expressão regular entre barras, o que significa:
  • .* - zero ou mais caracteres,
  • param_name= - nome do param que é buscado,
  • () - grupo em expressão regular,
  • [^&]*- um ou mais caracteres excluindo &,
  • | - alternância,
  • $1 - referência ao primeiro grupo em expressão 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}'`);

Mais uma sugestão.

Já existem boas respostas, mas eu as achei desnecessariamente complexas e difíceis de entender. É curto, simples e retorna uma matriz associativa simples com nomes de chave correspondentes aos nomes de token no URL.

Eu adicionei uma versão com comentários abaixo para quem quer aprender.

Observe que isso depende do jQuery ($ .each) para seu loop, que eu recomendo em vez do forEach. Acho mais simples garantir a compatibilidade entre navegadores usando o jQuery em geral, em vez de conectar correções individuais para dar suporte a quaisquer novas funções que não sejam suportadas em navegadores antigos.

Edit: Depois que escrevi isso, notei a resposta de Eric Elliott, que é quase a mesma, embora use forEach, enquanto geralmente sou contra (pelas razões expostas acima).

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

Versão 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 os exemplos abaixo, assumiremos este endereço:

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

Você pode atribuir os tokens de URL à sua própria variável:

var tokens = getTokens();

Em seguida, consulte cada token de URL por nome como este:

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

Isso imprimiria "4".

Você também pode simplesmente se referir a um nome de token diretamente da função:

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

... que imprimiria "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"];

Obtido a partir daqui: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

Maneira simples

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

então chame-o como getParams (url)

Eu tive a necessidade de ler uma variável URL GET e concluir uma ação com base no parâmetro url. Eu procurei alto e baixo para uma solução e me deparei com este pequeno pedaço de código. Ele basicamente lê o URL da página atual, executa alguma expressão regular no URL e salva os parâmetros do URL em uma matriz associativa, à qual podemos acessar facilmente.

Por exemplo, se tivéssemos o seguinte URL com o javascript na parte inferior no lugar.

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

Tudo o que precisamos fazer para obter a identificação dos parâmetros e a página é chamar isso:

O 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 é de longe a implementação mais completa de um analisador de string de consulta JavaScript que eu vi até agora.

Infelizmente, está escrito como um plugin jQuery.

Eu o reescrevi para o vanilla JS e fiz algumas melhorias:

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

Veja também este violino .

Solução elegante e funcional

Vamos criar um objeto contendo nomes de parâmetros de URL como chaves, para que possamos extrair facilmente o parâmetro por seu nome:

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

Aqui está o que eu faço:

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