Como obter o valor dos parâmetros GET?

Eu tenho um 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 a URL, mas só consegui m2 . Como faço isso usando JavaScript?

JavaScript em si não tem nada embutido para lidar com parâmetros de string de consulta.

Em um navegador (moderno) você pode usar o object 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); 

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

Aqui está uma function de utilidade geral que também faz decodificação de URL apropriada:

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

Esta é 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 na variável URL … myParam conterá “2”, caso contrário, será indefinido.

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 direito 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 e Chrome. Com suporte Edge em breve .

https://developer.mozilla.org/pt-BR/docs/Web/API/URLSearchParams https://developer.mozilla.org/pt-BR/docs/Web/API/URL/URL

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

Eric Bidelman, engenheiro do Google, recomenda usar este polyfill para navegadores sem suporte.

Você pode obter a string de consulta em location.search , então você pode 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 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 ligue assim:

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

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

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

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

É incrível porque:

  • É recursivo
  • Lida com vários parâmetros do mesmo nome
  • Trata bem com strings de parâmetros malformados (valores ausentes, etc.)
  • Não quebra se ‘=’ está 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']; 

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 

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 fiz uma function 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 de 5/26/2017, aqui está uma implementação do ES7 (executada com o estágio predefinido 0, 1, 2 ou 3 do babel):

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

Uma maneira super simples usando URLSearchParams .

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

Atualmente é suportado no Chrome, Firefox e Safari.

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 você está pedindo:

 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. Como aconselhado por Andy E ao responder a esta pergunta , não é bom para o desempenho do seu script se ele está repetidamente construindo várias strings regex, executando loops etc apenas para obter um único valor. Então, eu criei um script mais simples que retorna todos os parâmetros GET em um único object. Você deve chamá-lo apenas uma vez, atribuir o resultado a uma variável e, em qualquer ponto 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". 

Para Single Parameter Value 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 todos os valores de 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 

essa 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 os parâmetros vazios (as chaves presentes sem "=value" ), a exposição de uma API de recuperação de valor escalar e baseada em array, bem como a decodificação correta do componente URI.

Ou, se você não quiser reinventar a roda de análise de 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. Converta document.location para uma string (é um object)
  2. Alimente essa cadeia ao construtor de class de URI do URI.js
  3. Invoque a function search () para obter a parte de pesquisa (consulta) do URL
    (A passagem true diz para a saída de um object)
  4. Acesse a propriedade foo no object resultante para obter o valor

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

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

Tenho aqui: http://jquery-howto.blogspot.ru/2009/09/get-url-parameters-values-with-jquery.html

Aqui estou postando um exemplo. Mas é em jQuery. Espero que ajude os outros:

     

Maneira simples

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

então chamá-lo como getParams (url)

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

Mais uma sugestão.

Já existem algumas boas respostas, mas achei desnecessariamente complexas e difíceis de entender. Isso é curto, simples e retorna um array associativo simples com nomes de chaves correspondentes aos nomes de token no URL.

Eu adicionei uma versão com comentários abaixo para aqueles que querem aprender.

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

Edit: Depois que eu escrevi isso, notei a resposta de Eric Elliott, que é quase o mesmo, embora use forEach, enquanto eu geralmente sou contra (por razões 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, vamos assumir 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 referir-se a um nome de token da function diretamente:

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

… o que imprimiria “murray”.

Aqui está o código-fonte angularJs para analisar parâmetros de consulta de url em um object:

 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 

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 por uma solução e me deparei com este pequeno pedaço de código. Basicamente, ele lê o URL da página atual, executa algumas expressões regulares no URL e salva os parâmetros do URL em um array associativo, que podemos acessar facilmente.

Então, como um 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 os parâmetros id e page são para chamar isto:

O código será:

  

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; } 
 window.location.href.split("?") 

em seguida, desconsidere o primeiro índice

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

retorna uma matriz dos seus 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; }, {}); 

Um pouco mais detalhado / hacky mas também funcional, paramObject contém todos os parâmetros mapeados como um object js

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

Isso deve funcionar para o seu caso, não importa se o parâmetro é o último ou não.

Podemos obter os valores dos parâmetros c de uma maneira mais simples sem fazer o loop de todos os parâmetros, veja o jQuery abaixo para obter os parâmetros.

1. Para obter o valor do 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=',"") 

(ou)

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

retorna como uma string

“m2-m3-m4-m5”

2. Para replace o valor do 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"**)