Como posso obter um parâmetro específico de location.search?

Se eu tivesse uma URL como

http://localhost/search.php?year=2008 

Como eu escreveria uma function JavaScript para pegar o ano variável e ver se ele contém alguma coisa?

Eu sei que isso pode ser feito com location.search mas não consigo descobrir como ele pega parâmetros.

Minha maneira favorita de obter params de URL é essa abordagem:

 var parseQueryString = function() { var str = window.location.search; var objURL = {}; str.replace( new RegExp( "([^?=&]+)(=([^&]*))?", "g" ), function( $0, $1, $2, $3 ){ objURL[ $1 ] = $3; } ); return objURL; }; //Example how to use it: var params = parseQueryString(); alert(params["foo"]); 

Uma abordagem sem regex, você pode simplesmente dividir pelo caractere ‘&’ e iterar pelo par chave / valor:

 function getParameter(paramName) { var searchString = window.location.search.substring(1), i, val, params = searchString.split("&"); for (i=0;i 

Você pode usar a class window.URL :

 new URL(location.href).searchParams.get('year') // Returns 2008 for href = "http://localhost/search.php?year=2008". // Or in two steps: const params = new URL(location.href).searchParams; const year = params.get('year'); 

O que se segue utiliza expressões regulares e pesquisa apenas na parte da cadeia de consulta do URL.

Mais importante ainda, esse método suporta parâmetros normais e de matriz como em http://localhost/?fiz=zip&foo[]=!!=&bar=7890#hashhashhash

 function getQueryParam(param) { var result = window.location.search.match( new RegExp("(\\?|&)" + param + "(\\[\\])?=([^&]*)") ); return result ? result[3] : false; } console.log(getQueryParam("fiz")); console.log(getQueryParam("foo")); console.log(getQueryParam("bar")); console.log(getQueryParam("zxcv")); 

Saída:

 zip !!= 7890 false 

Demorei um pouco para encontrar a resposta para essa pergunta. A maioria das pessoas parece estar sugerindo soluções de regex. Eu prefiro usar código que é testado e testado em oposição a regex que eu ou outra pessoa pensamos em tempo real.

Eu uso a biblioteca parseUri disponível aqui: http://stevenlevithan.com/demo/parseuri/js/

Ele permite que você faça exatamente o que você está pedindo:

 var uri = 'http://localhost/search.php?year=2008'; var year = uri.queryKey['year']; // year = '2008' 
 function gup( name ) { name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); var regexS = "[\\?&]"+name+"=([^&#]*)"; var regex = new RegExp( regexS ); var results = regex.exec( window.location.href ); if( results == null ) return ""; else return results[1]; } var year = gup("year"); // returns "2008" 

Esta questão é antiga e as coisas evoluíram em JavaScript. Agora você pode fazer isso:

 const params = {} document.location.search.substr(1).split('&').reduce(pair => { [key, value] = pair.split('=') params[key] = value }) 

e você obtém params.year que contém 2008 . Você também obteria outros parâmetros de consulta em seu object params .


Edit : uma maneira mais curta / mais limpa para fazer isso:

 const params = new Map(location.search.slice(1).split('&').map(kv => kv.split('='))) 

Você pode então testar se o parâmetro year existe com:

 params.has('year') // true 

Ou recupere-o com:

 params.get('year') // 2008 

A maneira mais fácil é ter

 if (document.location.search.indexOf('yourtext=') >= 0) { // your code } else { // what happens? } 

índice de()

A function indexOf(text) retorna

  • UM NÚMERO INTEIRO ABAIXO 0 quando o texto passado na function não estiver em qualquer variável ou cadeia que esteja procurando – neste caso, document.location.search .
  • UM NÚMERO INTEIRO IGUAL A 0 OU SUPERIOR quando o texto transmitido na function estiver em qualquer variável ou cadeia que esteja procurando – neste caso, document.location.search .

Espero que isso tenha sido útil, @gumbo

Eu usei uma variante do Alex – mas precisava converter o param aparecendo várias vezes em um array. Parece haver muitas opções. Eu não queria confiar em outra biblioteca para algo tão simples. Eu suponho que uma das outras opções postadas aqui pode ser melhor – eu adaptei o Alex por causa do straightness direto.

 parseQueryString = function() { var str = window.location.search; var objURL = {}; // local isArray - defer to underscore, as we are already using the lib var isArray = _.isArray str.replace( new RegExp( "([^?=&]+)(=([^&]*))?", "g" ), function( $0, $1, $2, $3 ){ if(objURL[ $1 ] && !isArray(objURL[ $1 ])){ // if there parameter occurs more than once, convert to an array on 2nd var first = objURL[ $1 ] objURL[ $1 ] = [first, $3] } else if(objURL[ $1 ] && isArray(objURL[ $1 ])){ // if there parameter occurs more than once, add to array after 2nd objURL[ $1 ].push($3) } else { // this is the first instance objURL[ $1 ] = $3; } } ); return objURL; }; 

Eu joguei um pouco com esse problema e nesse final usei isso:

 function getJsonFromUrl() { return Object.assign(...location.search.substr(1).split("&").map(sliceProperty)); } 
  • Object.assign para transformar uma lista de objects em um object
  • Operador de spread ... para transformar um array em uma lista
  • location.search.substr(1).split("&") para obter todos os parâmetros como matriz de propriedades ( foo=bar )
  • map cada propriedade e dividi-las em uma matriz (chamada sliceProperty ou sliceProperty ).

splitProperty :

  function splitProperty(pair) { [key, value] = pair.split("=") return { [key]: decodeURIComponent(value) } } 
  • Dividir por =
  • Desconstruir a matriz em uma matriz de dois elementos
  • Retornar um novo object com a syntax da propriedade dinâmica

sliceProperty :

  function sliceProperty(pair) { const position = pair.indexOf("="), key = pair.slice(0, position), value = pair.slice(position + 1, pair.length); return { [key]: decodeURIComponent(value) } } 
  • Definir a posição de = , chave e valor
  • Retornar um novo object com a syntax da propriedade dinâmica

Eu acho que o sliceProperty é mais bonito, mas o sliceProperty é mais rápido. Execute o JsPerf para mais informações.

Use este one-liner compacto para obter um object da querystring:

 var query = Object.assign.apply(0,location.search.slice(1).split('&').map(a=>({[a.split('=')[0]]:a.split('=')[1]}))); 

Agora é só usar query['key'] para obter o valor da dita chave.

Pegue os params de location.search com uma linha:

 const params = new Map(this.props.location.search.slice(1).split('&').map(param => param.split('='))) 

Então, simplesmente:

 if(params.get("year")){ //year exists. do something... } else { //year doesn't exist. do something else... } 

Resposta ES6:

 const parseQueryString = (path = window.location.search) => path.slice(1).split('&').reduce((car, cur) => { const [key, value] = cur.split('=') return { ...car, [key]: value } }, {}) 

por exemplo:

 parseQueryString('https://example.com/?foo=bar&foobar=baz') // => {foo: "bar", foobar: "baz"}