Como posso obter valores de string de consulta em JavaScript?

Existe uma maneira sem plugin de recuperar valores de string de consulta via jQuery (ou sem)?

Se sim, como? Se não, existe um plugin que pode fazer isso?

   

Você não precisa do jQuery para esse propósito. Você pode usar apenas alguns JavaScript puro:

function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } 

Uso:

 // query string: ?foo=lorem&bar=&baz var foo = getParameterByName('foo'); // "lorem" var bar = getParameterByName('bar'); // "" (present with empty value) var baz = getParameterByName('baz'); // "" (present with no value) var qux = getParameterByName('qux'); // null (absent) 

Nota: Se um parâmetro estiver presente várias vezes ( ?foo=lorem&foo=ipsum ), você obterá o primeiro valor ( lorem ). Não há nenhum padrão sobre isso e os usos variam, veja, por exemplo, esta questão: Posição autoritativa de chaves de consulta HTTP GET duplicadas .
NOTA: A function faz distinção entre maiúsculas e minúsculas. Se preferir o nome do parâmetro sem distinção entre maiúsculas e minúsculas, adicione o modificador ‘i’ ao RegExp


Esta é uma atualização baseada nas novas especificações do URLSearchParams para obter o mesmo resultado de maneira mais sucinta. Veja a resposta intitulada ” URLSearchParams ” abaixo.

Algumas das soluções postadas aqui são ineficientes. Repetir a pesquisa de expressão regular toda vez que o script precisar acessar um parâmetro é completamente desnecessário, uma única function para dividir os parâmetros em um object de estilo de matriz associativa é suficiente. Se você não está trabalhando com a API de histórico do HTML 5, isso é necessário apenas uma vez por carregamento de página. As outras sugestões aqui também não conseguem decodificar a URL corretamente.

 var urlParams; (window. onpopstate = function () { var match, pl = /\+/g, // Regex for replacing addition symbol with a space search = /([^&=]+)=?([^&]*)/g, decode = function (s) { return decodeURIComponent (s.replace(pl, " ")); }, query = window. location .search. substring (1); urlParams = {}; while (match = search. exec (query)) urlParams[decode(match[1])] = decode(match[2]); })(); 

Exemplo de querystring:

?i=main&mode=front&sid=de8d49b78a85a322c4155015fdce22c4&enc=+Hello%20&empty

Resultado:

  urlParams = { enc: " Hello ", i: "main", mode: "front", sid: "de8d49b78a85a322c4155015fdce22c4", empty: "" } alert(urlParams["mode"]); // -> "front" alert("empty" in urlParams); // -> true 

Isso poderia facilmente ser melhorado para manipular seqüências de consulta de estilo de matriz também. Um exemplo disso está aqui , mas como os parâmetros no estilo array não estão definidos no RFC 3986 , não poluirei essa resposta com o código-fonte. Para aqueles interessados ​​em uma versão “poluída”, veja a resposta de campbeln abaixo .

Além disso, como apontado nos comentários ; é um delimitador legal para pares key=value . Seria necessário um regex mais complicado para manipular ; ou & , o que eu acho desnecessário, porque é raro isso ; é usado e eu diria ainda mais improvável que ambos sejam usados. Se você precisa apoiar ; em vez de & , apenas troque-os no regex.


Se você estiver usando uma linguagem de pré-processamento do lado do servidor, convém usar suas funções JSON nativas para fazer o trabalho pesado para você. Por exemplo, no PHP você pode escrever:

  

Muito mais simples!

ES2015 (ES6)

 getQueryStringParams = query => { return query ? (/^[?#]/.test(query) ? query.slice(1) : query) .split('&') .reduce((params, param) => { let [key, value] = param.split('='); params[key] = value ? decodeURIComponent(value.replace(/\+/g, ' ')) : ''; return params; }, {} ) : {} }; 

Sem jQuery

 var qs = (function(a) { if (a == "") return {}; var b = {}; for (var i = 0; i < a.length; ++i) { var p=a[i].split('=', 2); if (p.length == 1) b[p[0]] = ""; else b[p[0]] = decodeURIComponent(p[1].replace(/\+/g, " ")); } return b; })(window.location.search.substr(1).split('&')); 

Com uma URL como ?topic=123&name=query+string , o seguinte retornará:

 qs["topic"]; // 123 qs["name"]; // query string qs["nothere"]; // undefined (object) 

Método do Google

Rasgando o código do Google, encontrei o método que eles usam: getUrlParameters

 function (b) { var c = typeof b === "undefined"; if (a !== h && c) return a; for (var d = {}, b = b || k[B][vb], e = b[p]("?"), f = b[p]("#"), b = (f === -1 ? b[Ya](e + 1) : [b[Ya](e + 1, f - e - 1), "&", b[Ya](f + 1)][K](""))[z]("&"), e = i.dd ? ia : unescape, f = 0, g = b[w]; f < g; ++f) { var l = b[f][p]("="); if (l !== -1) { var q = b[f][I](0, l), l = b[f][I](l + 1), l = l[Ca](/\+/g, " "); try { d[q] = e(l) } catch (A) {} } } c && (a = d); return d } 

É ofuscado, mas é compreensível.

Eles começam a procurar parâmetros no URL a partir de ? e também do hash # . Então, para cada parâmetro eles dividem o sinal de igual b[f][p]("=") (que se parece com indexOf , eles usam a posição do caracter para obter a chave / valor). Ao dividi-lo, verifica se o parâmetro tem um valor ou não, se ele tiver armazenado o valor de d , caso contrário, apenas continuará.

No final, o object d é retornado, manipulando o escape e o sinal + . Este object é como o meu, tem o mesmo comportamento.


Meu método como um plugin jQuery

 (function($) { $.QueryString = (function(paramsArray) { let params = {}; for (let i = 0; i < paramsArray.length; ++i) { let param = paramsArray[i] .split('=', 2); if (param.length !== 2) continue; params[param[0]] = decodeURIComponent(param[1].replace(/\+/g, " ")); } return params; })(window.location.search.substr(1).split('&')) })(jQuery); 

Uso

 //Get a param $.QueryString.param //-or- $.QueryString["param"] //This outputs something like... //"val" //Get all params as object $.QueryString //This outputs something like... //Object { param: "val", param2: "val" } //Set a param (only in the $.QueryString object, doesn't affect the browser's querystring) $.QueryString.param = "newvalue" //This doesn't output anything, it just updates the $.QueryString object //Convert object into string suitable for url a querystring (Requires jQuery) $.param($.QueryString) //This outputs something like... //"param=newvalue&param2=val" //Update the url/querystring in the browser's location bar with the $.QueryString object history.replaceState({}, '', "?" + $.param($.QueryString)); //-or- history.pushState({}, '', "?" + $.param($.QueryString)); 

Teste de desempenho (método dividido contra o método regex) ( jsPerf )

Código de preparação: declaração de methods

Código de teste dividido

 var qs = window.GetQueryString(query); var search = qs["q"]; var value = qs["value"]; var undef = qs["undefinedstring"]; 

Código de teste Regex

 var search = window.getParameterByName("q"); var value = window.getParameterByName("value"); var undef = window.getParameterByName("undefinedstring"); 

Teste no Firefox 4.0 x86 no Windows Server 2008 R2 / 7 x64

  • Método Split : 144,780 ± 2,17% mais rápido
  • Método Regex : 13,891 ± 0,85% | 90% mais lento

Versão melhorada da resposta de Artem Barger :

 function getParameterByName(name) { var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search); return match && decodeURIComponent(match[1].replace(/\+/g, ' ')); } 

Para mais informações sobre melhorias, consulte: http://james.padolsey.com/javascript/bujs-1-getparameterbyname/

URLSearchParams

O Firefox 44+, o Opera 36+, o Edge 17+, o Safari 10.3+ e o Chrome 49+ suportam a API URLSearchParams :

  • Anúncio do Chrome e detalhes
  • Anúncio da Opera e detalhes
  • Anúncio do Firefox e detalhes

Há um polyfill de URLSearchParams sugerido pelo google para as versões estáveis ​​do IE.

Não é padronizado pelo W3C , mas é um padrão de vida da WhatWG .

Você pode usá-lo no local, mas você precisa remover o ? ponto de interrogação (por exemplo, com .slice(1) ):

 let params = new URLSearchParams(location.search); 

ou

 let params = (new URL(location)).searchParams; 

Ou, claro, em qualquer URL:

 let url = new URL('https://example.com?foo=1&bar=2'); let params = new URLSearchParams(url.search); 

Você também pode obter params usando uma propriedade abreviada de .searchParams no object URL, desta forma:

 let params = new URL('https://example.com?foo=1&bar=2').searchParams; params.get('foo'); // "1" params.get('bar'); // "2" 

Você lê / define parâmetros através da API get(KEY) , set(KEY, VALUE) , append(KEY, VALUE) . Você também pode iterar todos os valores for (let p of params) {} .

Uma implementação de referência e uma página de amostra estão disponíveis para auditoria e teste.

Apenas outra recomendação. O plugin Purl permite recuperar todas as partes do URL, incluindo âncora, host, etc.

Pode ser usado com ou sem jQuery.

O uso é muito simples e legal:

 var url = $.url('http://allmarkedup.com/folder/dir/index.html?item=value'); // jQuery version var url = purl('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version url.attr('protocol'); // returns 'http' url.attr('path'); // returns '/folder/dir/index.html' 

No entanto, a partir de 11 de novembro de 2014, o Purl não é mais mantido e o autor recomenda o uso do URI.js. O plugin jQuery é diferente porque se concentra em elementos – para uso com strings, basta usar URI diretamente, com ou sem jQuery. Código semelhante ficaria assim, mais completo docs aqui :

 var url = new URI('http://allmarkedup.com/folder/dir/index.html?item=value'); // plain JS version url.protocol(); // returns 'http' url.path(); // returns '/folder/dir/index.html' 

tl; dr

Uma solução rápida e completa , que lida com chaves de valores múltiplos e caracteres codificados .

 var qd = {}; if (location.search) location.search.substr(1).split("&").forEach(function(item) {var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); (qd[k] = qd[k] || []).push(v)}) //using ES6 (23 characters cooler) var qd = {}; if (location.search) location.search.substr(1).split`&`.forEach(item => {let [k,v] = item.split`=`; v = v && decodeURIComponent(v); (qd[k] = qd[k] || []).push(v)}) 

Multilinhado:

 var qd = {}; if (location.search) location.search.substr(1).split("&").forEach(function(item) { var s = item.split("="), k = s[0], v = s[1] && decodeURIComponent(s[1]); // null-coalescing / short-circuit //(k in qd) ? qd[k].push(v) : qd[k] = [v] (qd[k] = qd[k] || []).push(v) // null-coalescing / short-circuit }) 

O que é todo esse código …
“coalescência nula” , avaliação de curto-circuito
ES6 Destructuring assignments , Arrow functions , Template strings

Exemplo:

 "?a=1&b=0&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" > qd a: ["1", "5", "text"] b: ["0"] c: ["3"] d: [undefined] e: [undefined, "http://w3schools.com/my test.asp?name=ståle&car=saab"] > qd.a[1] // "5" > qd["a"][1] // "5" 


Leia mais … sobre a solução JavaScript Vanilla.

Para acessar diferentes partes de um URL use location.(search|hash)

Solução mais fácil (fictícia)

 var queryDict = {}; location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]}) 
  • Lida com as chaves vazias corretamente.
  • Substitui várias chaves com o último valor encontrado.
 "?a=1&b=0&c=3&d&e&a=5" > queryDict a: "5" b: "0" c: "3" d: undefined e: undefined 

Chaves multivalores

Verificação de chave simples (item in dict) ? dict.item.push(val) : dict.item = [val] (item in dict) ? dict.item.push(val) : dict.item = [val]

 var qd = {}; location.search.substr(1).split("&").forEach(function(item) {(item.split("=")[0] in qd) ? qd[item.split("=")[0]].push(item.split("=")[1]) : qd[item.split("=")[0]] = [item.split("=")[1]]}) 
  • Agora retorna matrizes em vez disso.
  • Valores de access por qd.key[index] ou qd[key][index]
 > qd a: ["1", "5"] b: ["0"] c: ["3"] d: [undefined] e: [undefined] 

Caracteres codificados?

Use decodeURIComponent() para o segundo ou ambos os splits.

 var qd = {}; location.search.substr(1).split("&").forEach(function(item) {var k = item.split("=")[0], v = decodeURIComponent(item.split("=")[1]); (k in qd) ? qd[k].push(v) : qd[k] = [v]}) 

Exemplo:

 "?a=1&b=0&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" > qd a: ["1", "5", "text"] b: ["0"] c: ["3"] d: ["undefined"] // decodeURIComponent(undefined) returns "undefined" !!!* e: ["undefined", "http://w3schools.com/my test.asp?name=ståle&car=saab"] 


Dos comentários

* !!! Por favor, note que decodeURIComponent(undefined) retorna a string "undefined" . A solução está em um uso simples de && , que garante que decodeURIComponent() não seja chamado em valores indefinidos. (Veja a “solução completa” no topo.)

 v = v && decodeURIComponent(v); 

Se a querystring estiver vazia ( location.search == "" ), o resultado é um pouco enganador qd == {"": undefined} . Sugere-se para verificar a querystring antes de iniciar a function de análise likeso:

 if (location.search) location.search.substr(1).split("&").forEach(...) 

Roshambo no snipplr.com tem um script simples para conseguir isso descrito em Get URL Parameters with jQuery | Melhorado Com o seu script, você também pode extrair apenas os parâmetros desejados.

Aqui está a essência:

 $.urlParam = function(name, url) { if (!url) { url = window.location.href; } var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(url); if (!results) { return undefined; } return results[1] || undefined; } 

Então é só pegar seus parâmetros da string de consulta.

Então, se a string de URL / consulta foi xyz.com/index.html?lang=de .

Apenas chame var langval = $.urlParam('lang'); e você tem isso.

UZBEKJON também tem um ótimo post sobre isso, Obtenha parâmetros e valores de URL com jQuery .

Se você estiver usando o jQuery, poderá usar uma biblioteca, como jQuery BBQ: Back Button & Query Library .

… O jQuery BBQ fornece um método completo .deparam() , juntamente com o gerenciamento de estado de hash e os methods de utilitário de mesclagem e mesclagem de fragment / consulta.

Editar: Adicionando Deparam Exemplo:

  var DeparamExample = function() { var params = $.deparam.querystring(); //nameofparam is the name of a param from url //code below will get param if ajax refresh with hash if (typeof params.nameofparam == 'undefined') { params = jQuery.deparam.fragment(window.location.href); } if (typeof params.nameofparam != 'undefined') { var paramValue = params.nameofparam.toString(); } }; 

Apenas use duas divisões :

 function get(n) { var half = location.search.split(n + '=')[1]; return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null; } 

Eu estava lendo todas as respostas anteriores e mais completas. Mas acho que esse é o método mais simples e rápido. Você pode verificar neste benchmark jsPerf

Para resolver o problema no comentário de Rup, adicione uma divisão condicional, alterando a primeira linha para as duas abaixo. Mas precisão absoluta significa que agora é mais lento que o regexp (veja jsPerf ).

 function get(n) { var half = location.search.split('&' + n + '=')[1]; if (!half) half = location.search.split('?' + n + '=')[1]; return half !== undefined ? decodeURIComponent(half.split('&')[0]) : null; } 

Então, se você sabe que não vai encontrar o caso do Rup, isso vence. Caso contrário, regexp.

Ou se você tiver o controle da querystring e puder garantir que um valor que você está tentando obter nunca conterá caracteres codificados em URL (tê-los em um valor seria uma má ideia) – você pode usar a seguinte versão ligeiramente mais simplificada e legível da 1ª opção:

  function getQueryStringValueByName(name) { var queryStringFromStartOfValue = location.search.split(name + '=')[1]; return queryStringFromStartOfValue !== undefined ? queryStringFromStartOfValue.split('&')[0] : null; 

Aqui está a minha tentativa de tornar a excelente solução do Andy E num plug-in jQuery completo:

 ;(function ($) { $.extend({ getQueryString: function (name) { function parseParams() { var params = {}, e, a = /\+/g, // Regex for replacing addition symbol with a space r = /([^&=]+)=?([^&]*)/g, d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, q = window.location.search.substring(1); while (e = r.exec(q)) params[d(e[1])] = d(e[2]); return params; } if (!this.queryStringParams) this.queryStringParams = parseParams(); return this.queryStringParams[name]; } }); })(jQuery); 

A syntax é:

 var someVar = $.getQueryString('myParam'); 

O melhor dos dois mundos!

Se você está fazendo mais manipulação de URL do que simplesmente analisando a querystring, você pode achar o URI.js útil. É uma biblioteca para manipular URLs – e vem com todos os sinos e assobios. (Desculpe por auto-publicidade aqui)

para converter sua querystring em um mapa:

 var data = URI('?foo=bar&bar=baz&foo=world').query(true); data == { "foo": ["bar", "world"], "bar": "baz" } 

(URI.js também “corrige” querystrings ruins como ?&foo&&bar=baz& para ?foo&bar=baz )

Eu gosto da solução de Ryan Phelan . Mas eu não vejo nenhum ponto de estender o jQuery para isso? Não há uso da funcionalidade do jQuery.

Por outro lado, gosto da function incorporada no Google Chrome: window.location.getParameter.

Então, por que não usar isso? Ok, outros navegadores não têm. Então vamos criar essa function se ela não existir:

 if (!window.location.getParameter ) { window.location.getParameter = function(key) { function parseParams() { var params = {}, e, a = /\+/g, // Regex for replacing addition symbol with a space r = /([^&=]+)=?([^&]*)/g, d = function (s) { return decodeURIComponent(s.replace(a, " ")); }, q = window.location.search.substring(1); while (e = r.exec(q)) params[d(e[1])] = d(e[2]); return params; } if (!this.queryStringParams) this.queryStringParams = parseParams(); return this.queryStringParams[key]; }; } 

Esta function é mais ou menos de Ryan Phelan, mas é empacotada de forma diferente: nome claro e sem dependencies de outras bibliotecas javascript. Mais sobre esta function no meu blog .

Aqui está uma maneira rápida de obter um object semelhante ao array PHP $ _GET :

 function get_query(){ var url = location.search; var qs = url.substring(url.indexOf('?') + 1).split('&'); for(var i = 0, result = {}; i < qs.length; i++){ qs[i] = qs[i].split('='); result[qs[i][0]] = decodeURIComponent(qs[i][1]); } return result; } 

Uso:

 var $_GET = get_query(); 

Para a string de consulta x=5&y&z=hello&x=6 isso retorna o object:

 { x: "6", y: undefined, z: "hello" } 

Mantenha-o simples em código JavaScript simples:

 function qs(key) { 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[key]; } 

Chame de qualquer lugar no código JavaScript:

 var result = qs('someKey'); 

Essas são todas ótimas respostas, mas eu precisava de algo um pouco mais robusto, e achei que todos vocês gostariam de ter o que eu criei.

É um método de biblioteca simples que faz dissecação e manipulação de parâmetros de URL. O método estático possui os seguintes methods secundários que podem ser chamados no URL do assunto:

  • getHost
  • getPath
  • getHash
  • setHash
  • getParams
  • getQuery
  • setParam
  • getParam
  • hasParam
  • removeParam

Exemplo:

 URLParser(url).getParam('myparam1') 

 var url = "http://www.test.com/folder/mypage.html?myparam1=1&myparam2=2#something"; function URLParser(u){ var path="",query="",hash="",params; if(u.indexOf("#") > 0){ hash = u.substr(u.indexOf("#") + 1); u = u.substr(0 , u.indexOf("#")); } if(u.indexOf("?") > 0){ path = u.substr(0 , u.indexOf("?")); query = u.substr(u.indexOf("?") + 1); params= query.split('&'); }else path = u; return { getHost: function(){ var hostexp = /\/\/([\w.-]*)/; var match = hostexp.exec(path); if (match != null && match.length > 1) return match[1]; return ""; }, getPath: function(){ var pathexp = /\/\/[\w.-]*(?:\/([^?]*))/; var match = pathexp.exec(path); if (match != null && match.length > 1) return match[1]; return ""; }, getHash: function(){ return hash; }, getParams: function(){ return params }, getQuery: function(){ return query; }, setHash: function(value){ if(query.length > 0) query = "?" + query; if(value.length > 0) query = query + "#" + value; return path + query; }, setParam: function(name, value){ if(!params){ params= new Array(); } params.push(name + '=' + value); for (var i = 0; i < params.length; i++) { if(query.length > 0) query += "&"; query += params[i]; } if(query.length > 0) query = "?" + query; if(hash.length > 0) query = query + "#" + hash; return path + query; }, getParam: function(name){ if(params){ for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) == name) return decodeURIComponent(pair[1]); } } console.log('Query variable %s not found', name); }, hasParam: function(name){ if(params){ for (var i = 0; i < params.length; i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) == name) return true; } } console.log('Query variable %s not found', name); }, removeParam: function(name){ query = ""; if(params){ var newparams = new Array(); for (var i = 0;i < params.length;i++) { var pair = params[i].split('='); if (decodeURIComponent(pair[0]) != name) newparams .push(params[i]); } params = newparams; for (var i = 0; i < params.length; i++) { if(query.length > 0) query += "&"; query += params[i]; } } if(query.length > 0) query = "?" + query; if(hash.length > 0) query = query + "#" + hash; return path + query; }, } } document.write("Host: " + URLParser(url).getHost() + '
'); document.write("Path: " + URLParser(url).getPath() + '
'); document.write("Query: " + URLParser(url).getQuery() + '
'); document.write("Hash: " + URLParser(url).getHash() + '
'); document.write("Params Array: " + URLParser(url).getParams() + '
'); document.write("Param: " + URLParser(url).getParam('myparam1') + '
'); document.write("Has Param: " + URLParser(url).hasParam('myparam1') + '
'); document.write(url + '
'); // Remove the first parameter url = URLParser(url).removeParam('myparam1'); document.write(url + ' - Remove the first parameter
'); // Add a third parameter url = URLParser(url).setParam('myparam3',3); document.write(url + ' - Add a third parameter
'); // Remove the second parameter url = URLParser(url).removeParam('myparam2'); document.write(url + ' - Remove the second parameter
'); // Add a hash url = URLParser(url).setHash('newhash'); document.write(url + ' - Set Hash
'); // Remove the last parameter url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove the last parameter
'); // Remove a parameter that doesn't exist url = URLParser(url).removeParam('myparam3'); document.write(url + ' - Remove a parameter that doesn\"t exist
');

From the MDN :

 function loadPageVar (sVar) {  return unescape(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + escape(sVar).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1")); } alert(loadPageVar("name")); 

Code golf:

 var a = location.search&&location.search.substr(1).replace(/\+/gi," ").split("&"); for (var i in a) { var s = a[i].split("="); a[i] = a[unescape(s[0])] = unescape(s[1]); } 

Display it!

 for (i in a) { document.write(i + ":" + a[i] + "
"); };

On my Mac: test.htm?i=can&has=cheezburger displays

 0:can 1:cheezburger i:can has:cheezburger 

I use regular expressions a lot, but not for that.

It seems easier and more efficient to me to read the query string once in my application, and build an object from all the key/value pairs like:

 var search = function() { var s = window.location.search.substr(1), p = s.split(/\&/), l = p.length, kv, r = {}; if (l === 0) {return false;} while (l--) { kv = p[l].split(/\=/); r[kv[0]] = decodeURIComponent(kv[1] || '') || true; } return r; }(); 

For a URL like http://domain.com?param1=val1&param2=val2 you can get their value later in your code as search.param1 and search.param2 .

 function GET() { var data = []; for(x = 0; x < arguments.length; ++x) data.push(location.href.match(new RegExp("/\?".concat(arguments[x],"=","([^\n&]*)")))[1]) return data; } example: data = GET("id","name","foo"); query string : ?id=3&name=jet&foo=b returns: data[0] // 3 data[1] // jet data[2] // b or alert(GET("id")[0]) // return 3 

Roshambo jQuery method wasn’t taking care of decode URL

http://snipplr.com/view/26662/get-url-parameters-with-jquery–improved/

Just added that capability also while adding in the return statement

 return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0; 

Now you can find the updated gist:

 $.urlParam = function(name){ var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href); if (!results) { return 0; } return decodeURIComponent(results[1].replace(/\+/g, " ")) || 0; } 

I like this one (taken from jquery-howto.blogspot.co.uk):

 // get an array with all querystring values // example: var valor = getUrlVars()["valor"]; 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; } 

Works great for me.

Here’s my edit to this excellent answer – with added ability to parse query strings with keys without values.

 var url = 'http://sb.com/reg/step1?param'; var qs = (function(a) { if (a == "") return {}; var b = {}; for (var i = 0; i < a.length; ++i) { var p=a[i].split('=', 2); if (p[1]) p[1] = decodeURIComponent(p[1].replace(/\+/g, " ")); b[p[0]] = p[1]; } return b; })((url.split('?'))[1].split('&')); 

IMPORTANT! The parameter for that function in the last line is different. It's just an example of how one can pass an arbitrary URL to it. You can use last line from Bruno's answer to parse the current URL.

So what exactly changed? With url http://sb.com/reg/step1?param= results will be same. But with url http://sb.com/reg/step1?param Bruno's solution returns an object without keys, while mine returns an object with key param and undefined value.

I needed an object from the query string, and I hate lots of code. It may not be the most robust in the universe, but it’s just a few lines of code.

 var q = {}; location.href.split('?')[1].split('&').forEach(function(i){ q[i.split('=')[0]]=i.split('=')[1]; }); 

A URL like this.htm?hello=world&foo=bar will create:

 {hello:'world', foo:'bar'} 

This is a function I created a while back and I’m quite happy with. It is not case sensitive – which is handy. Also, if the requested QS doesn’t exist, it just returns an empty string.

I use a compressed version of this. I’m posting uncompressed for the novice types to better explain what’s going on.

I’m sure this could be optimized or done differently to work faster, but it’s always worked great for what I need.

Enjoy.

 function getQSP(sName, sURL) { var theItmToRtn = ""; var theSrchStrg = location.search; if (sURL) theSrchStrg = sURL; var sOrig = theSrchStrg; theSrchStrg = theSrchStrg.toUpperCase(); sName = sName.toUpperCase(); theSrchStrg = theSrchStrg.replace("?", "&") theSrchStrg = theSrchStrg + "&"; var theSrchToken = "&" + sName + "="; if (theSrchStrg.indexOf(theSrchToken) != -1) { var theSrchTokenLth = theSrchToken.length; var theSrchTokenLocStart = theSrchStrg.indexOf(theSrchToken) + theSrchTokenLth; var theLocOfNextAndSign = theSrchStrg.indexOf("&", theSrchTokenLocStart); theItmToRtn = unescape(sOrig.substring(theSrchTokenLocStart, theLocOfNextAndSign)); } return unescape(theItmToRtn); } 

Here’s an extended version of Andy E’s linked “Handle array-style query strings”-version. Fixed a bug ( ?key=1&key[]=2&key[]=3 ; 1 is lost and replaced with [2,3] ), made a few minor performance improvements (re-decoding of values, recalculating “[” position, etc.) and added a number of improvements (functionalized, support for ?key=1&key=2 , support for ; delimiters). I left the variables annoyingly short, but added comments galore to make them readable (oh, and I reused v within the local functions, sorry if that is confusing ;).

It will handle the following querystring…

?test=Hello&person=neek&person[]=jeff&person[]=jim&person[extra]=john&test3&nocache=1398914891264

…making it into an object that looks like…

 { "test": "Hello", "person": { "0": "neek", "1": "jeff", "2": "jim", "length": 3, "extra": "john" }, "test3": "", "nocache": "1398914891264" } 

As you can see above, this version handles some measure of “malformed” arrays, ie – person=neek&person[]=jeff&person[]=jim or person=neek&person=jeff&person=jim as the key is identifiable and valid (at least in dotNet’s NameValueCollection.Add ):

If the specified key already exists in the target NameValueCollection instance, the specified value is added to the existing comma-separated list of values in the form “value1,value2,value3”.

It seems the jury is somewhat out on repeated keys as there is no spec. In this case, multiple keys are stored as an (fake)array. But do note that I do not process values based on commas into arrays.

O código:

 getQueryStringKey = function(key) { return getQueryStringAsObject()[key]; }; getQueryStringAsObject = function() { var b, cv, e, k, ma, sk, v, r = {}, d = function (v) { return decodeURIComponent(v).replace(/\+/g, " "); }, //# d(ecode) the v(alue) q = window.location.search.substring(1), //# suggested: q = decodeURIComponent(window.location.search.substring(1)), s = /([^&;=]+)=?([^&;]*)/g //# original regex that does not allow for ; as a delimiter: /([^&=]+)=?([^&]*)/g ; //# ma(make array) out of the v(alue) ma = function(v) { //# If the passed v(alue) hasn't been setup as an object if (typeof v != "object") { //# Grab the cv(current value) then setup the v(alue) as an object cv = v; v = {}; v.length = 0; //# If there was a cv(current value), .push it into the new v(alue)'s array //# NOTE: This may or may not be 100% logical to do... but it's better than loosing the original value if (cv) { Array.prototype.push.call(v, cv); } } return v; }; //# While we still have key-value e(ntries) from the q(uerystring) via the s(earch regex)... while (e = s.exec(q)) { //# while((e = s.exec(q)) !== null) { //# Collect the open b(racket) location (if any) then set the d(ecoded) v(alue) from the above split key-value e(ntry) b = e[1].indexOf("["); v = d(e[2]); //# As long as this is NOT a hash[]-style key-value e(ntry) if (b < 0) { //# b == "-1" //# d(ecode) the simple k(ey) k = d(e[1]); //# If the k(ey) already exists if (r[k]) { //# ma(make array) out of the k(ey) then .push the v(alue) into the k(ey)'s array in the r(eturn value) r[k] = ma(r[k]); Array.prototype.push.call(r[k], v); } //# Else this is a new k(ey), so just add the k(ey)/v(alue) into the r(eturn value) else { r[k] = v; } } //# Else we've got ourselves a hash[]-style key-value e(ntry) else { //# Collect the d(ecoded) k(ey) and the d(ecoded) sk(sub-key) based on the b(racket) locations k = d(e[1].slice(0, b)); sk = d(e[1].slice(b + 1, e[1].indexOf("]", b))); //# ma(make array) out of the k(ey) r[k] = ma(r[k]); //# If we have a sk(sub-key), plug the v(alue) into it if (sk) { r[k][sk] = v; } //# Else .push the v(alue) into the k(ey)'s array else { Array.prototype.push.call(r[k], v); } } } //# Return the r(eturn value) return r; }; 

We’ve just released arg.js , a project aimed at solving this problem once and for all. It’s traditionally been so difficult but now you can do:

 var name = Arg.get("name"); 

or getting the whole lot:

 var params = Arg.all(); 

and if you care about the difference between ?query=true and #hash=true then you can use the Arg.query() and Arg.hash() methods.

The problem with the top answer on that question is that it’s not-supported parameters placed after #, but sometimes it’s needed to get this value also.

I modified the answer to let it parse a full query string with a hash sign also:

 var getQueryStringData = function(name) { var result = null; var regexS = "[\\?&#]" + name + "=([^&#]*)"; var regex = new RegExp(regexS); var results = regex.exec('?' + window.location.href.split('?')[1]); if (results != null) { result = decodeURIComponent(results[1].replace(/\+/g, " ")); } return result; }; 
 function GetQueryStringParams(sParam) { var sPageURL = window.location.search.substring(1); var sURLVariables = sPageURL.split('&'); for (var i = 0; i < sURLVariables.length; i++) { var sParameterName = sURLVariables[i].split('='); if (sParameterName[0] == sParam) { return sParameterName[1]; } } }​ 

And this is how you can use this function assuming the URL is

http://dummy.com/?stringtext=jquery&stringword=jquerybyexample

 var tech = GetQueryStringParams('stringtext'); var blog = GetQueryStringParams('stringword'); 
 http://someurl.com?key=value&keynovalue&keyemptyvalue=&&keynovalue=nowhasvalue#somehash 
  • Regular key/value pair ( ?param=value )
  • Keys w/o value ( ?param : no equal sign or value)
  • Keys w/ empty value ( ?param= : equal sign, but no value to right of equal sign)
  • Repeated Keys ( ?param=1&param=2 )
  • Removes Empty Keys ( ?&& : no key or value)

Código:

  •  var queryString = window.location.search || ''; var keyValPairs = []; var params = {}; queryString = queryString.substr(1); if (queryString.length) { keyValPairs = queryString.split('&'); for (pairNum in keyValPairs) { var key = keyValPairs[pairNum].split('=')[0]; if (!key.length) continue; if (typeof params[key] === 'undefined') params[key] = []; params[key].push(keyValPairs[pairNum].split('=')[1]); } } 

How to Call:

  •  params['key']; // returns an array of values (1..n) 

Saída:

  •  key ["value"] keyemptyvalue [""] keynovalue [undefined, "nowhasvalue"]