Como obter o parâmetro URL usando jQuery ou JavaScript simples?


619

Eu já vi muitos exemplos de jQuery em que o tamanho e o nome do parâmetro são desconhecidos.

Meu URL só terá uma string:

http://example.com?sent=yes

Eu só quero detectar:

  1. Existe sent?
  2. É igual a "sim"?




A melhor solução que eu já vi [aqui] [1] [1]: stackoverflow.com/a/901144/3106590
hmfarimani

1
Agora existe um plug-in / biblioteca para isso, chamado URI.js: github.com/medialize/URI.js
alexw

Respostas:


1211

Melhor solução aqui .

var getUrlParameter = function getUrlParameter(sParam) {
    var sPageURL = window.location.search.substring(1),
        sURLVariables = sPageURL.split('&'),
        sParameterName,
        i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
};

E é assim que você pode usar esta função assumindo que a URL é
http://dummy.com/?technology=jquery&blog=jquerybyexample,.

var tech = getUrlParameter('technology');
var blog = getUrlParameter('blog');

8
Obrigado! Mas, ao copiar isso, encontrei uma surpresa desagradável, envolvendo um espaço em branco de largura zero (\ u200b) no final. Fazendo o script ter um erro de sintaxe invisível.
Christofer Ohlsson

11
Retornar um falseou nullde pesquisa vazia
Stefano Caravana

4
Esta solução funciona muito bem para mim. Acabei de usar var sPageURL = decodeURI (window.location.search.substring (1)); para converter% 20 caracteres em espaços em branco e também retorno uma string vazia em vez de nada se o parâmetro não corresponder.
Christophe

18
Atualizei a resposta para incluir todas as alterações no código dos comentários acima deste comentário.
Rob Evans

7
A decodificação deve ser feita no valor do parâmetro (como sugere Iouri). Se a decodificação for feita no URL (como na resposta), ela não funcionará corretamente se houver um valor codificado &ou de =parâmetro.
zakinster

288

Solução a partir de 2020

Temos: http://example.com?sent=yes

let searchParams = new URLSearchParams(window.location.search)

Será que enviou exist ?

searchParams.has('sent') // true

É igual a "sim"?

let param = searchParams.get('sent')

e então apenas compare.


16
Eu acho que isso não é suportado em navegadores, então por que alguém deveria usá-lo? referência - developer.mozilla.org/pt-BR/docs/Web/API/URLSearchParams
p_champ

1
@p_champ você está certo. Mas você pode usar o polyfill para URLSearchParams
Optio

2
atualmente não está funcionando no IE / Edge, então a detecção de recursos: if ('URLSearchParams' in window) { // Browser supports URLSearchParams} Veja aqui
mfgmicha

4
Bom o suficiente para mim e meu público-alvo. caniuse.com/#feat=urlsearchparams
jontsai

4
O @p_champ Edge obteve suporte na v17 (abril de 2018). Deixe o IE morrer.
perfil completo de Ryan DuVal

198

Fragmento de código jQuery para obter as variáveis ​​dinâmicas armazenadas no URL como parâmetros e armazená-las como variáveis ​​JavaScript prontas para uso com seus scripts:

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

example.com?param1=name¶m2=&id=6

$.urlParam('param1'); // name
$.urlParam('id');        // 6
$.urlParam('param2');   // null

exemplo de parâmetros com espaços

http://www.jquery4u.com?city=Gold Coast
console.log($.urlParam('city'));  
//output: Gold%20Coast



console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast

12
Nota: Você precisa decodificar caso haja caracteres especiais como parâmetro ou trema etc. etc. Em vez disso return results[1] || 0;, deve ser #return decodeURI(results[1]) || 0;
Kai Noack

Apenas curioso, por que ela precisa da || 0peça, já que já existe uma verificação do resultado, ela nem sempre retorna a matriz de correspondência?
AirWick219

@ AirWick219, um antivírus apropriado. embora redundante, nunca é demais para ser cauteloso
zanderwar

2
Aqui está, muito provavelmente, a fonte original: sitepoint.com/url-parameters-jquery mas esta resposta tem algumas novas ideias acrescentou
bgmCoder

1
Não tenho certeza se vale a pena usar o jQuery para isso.
Quentin 2

88

Eu sempre coloco isso como uma linha. Agora params tem os vars:

params={};location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){params[k]=v})

multi-alinhado:

var params={};
window.location.search
  .replace(/[?&]+([^=&]+)=([^&]*)/gi, function(str,key,value) {
    params[key] = value;
  }
);

Como uma função

function getSearchParams(k){
 var p={};
 location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(s,k,v){p[k]=v})
 return k?p[k]:p;
}

que você pode usar como:

getSearchParams()  //returns {key1:val1, key2:val2}

ou

getSearchParams("key1")  //returns val1

Hack feio que modifica a cadeia de pesquisa ... mas nenhum módulo externo ou jquery são necessários. Eu gosto disso.
Bryce

4
@ Bryce Na verdade, não modifica a string de pesquisa. o .replace realmente retorna uma nova string e essas strings retornadas são processadas no objeto params.
AwokeKnowing

Bom, curto e, ao contrário da solução aceita, não precisa revisar o URL sempre que você precisar de um valor. Pode ser um pouco melhorado com replace(/[?&;]+([^=]+)=([^&;]*)/gia reconectar ";" caractere como separador também.
Le Droid

uma linha clara e indolor, melhor do que a resposta aceita para mim, sem libs extras.
21416 Sam

Isto é o que alguém usaria se usasse hashes em vez de delimitador de consulta GET (ponto de interrogação): var params={};window.location.hash.replace(/[#&]+([^=&]+)=([^&]*)/gi,function(str,key,value){params[key] = value;}); Isso é útil para coisas como AJAX, em que o hash na janela é atualizado com solicitações de ajax, mas também um usuário para ir a um uri contendo um hash.
Tommie 31/05

48

Ainda outra função alternativa ...

function param(name) {
    return (location.search.split(name + '=')[1] || '').split('&')[0];
}

O nome precisa ser uma string. Trabalhou como um encanto ~
mintedsky 31/03

2
Esse é meu favorito. +1 É importante ressaltar que este é um tipo de pesquisa "termina com". Por exemplo, se você passar "Telefone" para o nome, e também houver um campo chamado "HomePhone", ele poderá retornar o valor do incorreto se for o primeiro no URL.
efreed 18/09/19

2
Isto está errado! Por exemplo, param('t') == param('sent') == 'yes'no exemplo do OP. Aqui está uma correção return (location.search.split(new RegExp('[?&]' + name + '='))[1] || '').split('&')[0]:; Observe também que você não pode dizer se o parâmetro existe porque você recebe uma string vazia para os parâmetros ausentes.
precisa saber é

Muito simples e elegante. Funciona como um sonho. Obrigado.
Anjana Silva

// (para forçar a chave completa de existir em vez de apenas a última parte da chave)return (location.search.split('?' + name + '=')[1] || location.search.split('&' + name + '=')[1] || '').split('&')[0];
Aaron

45

Pode ser tarde demais. Mas esse método é muito fácil e simples

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

UPDATE
Requer o plugin url: plugins.jquery.com/url
Obrigado -Ripounet


2
Quem decide isso deve verificar o repo primeiro. O uso mudou. $ .url.attr ('mensagem') se torna $ .url ("query") e fornece apenas a consulta completa! Para obter apenas um parâmetro que eu tinha que: $ .url ( "consulta") split ( "=") [1]. Url github ligação
pseudozach

34

Ou você pode usar essa pequena função, porque por que soluções complicadas?

function getQueryParam(param, defaultValue = undefined) {
    location.search.substr(1)
        .split("&")
        .some(function(item) { // returns first occurence and stops
            return item.split("=")[0] == param && (defaultValue = item.split("=")[1], true)
        })
    return defaultValue
}

que fica ainda melhor quando simplificado e on-line:

tl; dr solução de uma linha

var queryDict = {};
location.search.substr(1).split("&").forEach(function(item) {queryDict[item.split("=")[0]] = item.split("=")[1]})
resultado:
queryDict ['enviado'] // indefinido ou 'valor'

Mas e se você tiver caracteres codificados ou chaves com vários valores ?

É melhor você ver esta resposta: Como posso obter valores de string de consulta em JavaScript?

Sneak peak

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

> queryDict["a"][1] // "5"
> queryDict.a[1] // "5"

3
É provável que a divisão de cadeias também seja mais rápida que a regex. Não que esse seja um fator, considerando que o URL seria analisado apenas uma vez.
Patrick Patrick

Esta é a solução (a primeira) que funcionou perfeitamente para mim nos navegadores - obrigado!
NickyTheWrench

1
@NickyTheWrench Ótimo ouvir isso, obrigado! De qualquer forma, esteja ciente de que esta é uma solução muito simples. Se você obter parâmetros de URL complicados que contenham caracteres especiais, é melhor verificar o link fornecido.
Qwerty

@ Qwerty yup - meu caso de uso é muito simples, onde o parâmetro é sempre o mesmo, etc (basicamente exatamente o que o OP solicitou) Obrigado novamente!
NickyTheWrench 11/06/19

1
@BernardVanderBeken Interessante, eu consertei, de qualquer maneira, é uma solução bastante idiota, na parte inferior que suporta caracteres e matrizes codificados é muito melhor.
Qwerty

33

Usando URLSearchParams:

var params = new window.URLSearchParams(window.location.search);
console.log(params.get('name'));

Tenha cuidado com a compatibilidade (Principalmente, tudo bem, mas o IE e o Edge podem ser histórias diferentes, verifique isso para referência compatível: https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )


Nem todo navegador pode usar isso.
saf21

URLSearchParams substitui o caractere especial "+" por um espaço. Portanto, se o seu parâmetro de URL tiver um "+", ele será substituído.
Growler

11

Este é simples e funcionou para mim

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

portanto, se seu URL for http://www.yoursite.com?city=4

tente isso

console.log($.urlParam('city'));

10

Talvez você queira dar uma olhada no Dentist JS ? (aviso: eu escrevi o código)

código:

document.URL == "http://helloworld.com/quotes?id=1337&author=kelvin&message=hello"
var currentURL = document.URL;
var params = currentURL.extract();
console.log(params.id); // 1337
console.log(params.author) // "kelvin"
console.log(params.message) // "hello"

Com o Dentist JS, você pode basicamente chamar a função extract () em todas as strings (por exemplo, document.URL.extract ()) e recuperar um HashMap de todos os parâmetros encontrados. Também é personalizável para lidar com delimitadores e tudo.

Versão reduzida <1kb


5

Espero que isso ajude.

 <script type="text/javascript">
   function getParameters() {
     var searchString = window.location.search.substring(1),
       params = searchString.split("&"),
       hash = {};

     if (searchString == "") return {};
     for (var i = 0; i < params.length; i++) {
       var val = params[i].split("=");
       hash[unescape(val[0])] = unescape(val[1]);
     }

     return hash;
   }

    $(window).load(function() {
      var param = getParameters();
      if (typeof param.sent !== "undefined") {
        // Do something.
      }
    });
</script>

5

function GetRequestParam(param)
{
	var res = null;
	try{
		var qs = decodeURIComponent(window.location.search.substring(1));//get everything after then '?' in URI
		var ar = qs.split('&');
		$.each(ar, function(a, b){
			var kv = b.split('=');
			if(param === kv[0]){
				res = kv[1];
				return false;//break loop
			}
		});
	}catch(e){}
	return res;
}



3

Existe esta ótima biblioteca: https://github.com/allmarkedup/purl

o que permite que você faça simplesmente

url = 'http://example.com?sent=yes';
sent = $.url(url).param('sent');
if (typeof sent != 'undefined') { // sent exists
   if (sent == 'yes') { // sent is equal to yes
     // ...
   }
}

O exemplo está assumindo que você está usando jQuery. Você também pode usá-lo como javascript simples, a sintaxe seria um pouco diferente.


1
Esta biblioteca não é mais mantida, no entanto, eu a uso e é ótima. Certifique-se de usar param not attr para obter esses parâmetros de sequência de consulta, como o autor incluiu em seu exemplo.
Ação Dan

3

Este pode ser um exagero, mas há uma biblioteca bastante popular já está disponível para URIs análise, chamados URI.js .

Exemplo

var uri = "http://example.org/foo.html?technology=jquery&technology=css&blog=stackoverflow";
var components = URI.parse(uri);
var query = URI.parseQuery(components['query']);
document.getElementById("result").innerHTML = "URI = " + uri;
document.getElementById("result").innerHTML += "<br>technology = " + query['technology'];

// If you look in your console, you will see that this library generates a JS array for multi-valued queries!
console.log(query['technology']);
console.log(query['blog']);
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.17.0/URI.min.js"></script>

<span id="result"></span>


3

Tão simples que você pode usar qualquer URL e obter valor

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

Exemplo de uso

// query string: ?first=value1&second=&value2
var foo = getParameterByName('first'); // "value1"
var bar = getParameterByName('second'); // "value2" 

Nota: Se um parâmetro estiver presente várias vezes (? Primeiro = valor1 e segundo = valor2), você obterá o primeiro valor (valor1) e o segundo valor como (valor2).


2

Isso lhe dará um bom objeto para trabalhar

    function queryParameters () {
        var result = {};

        var params = window.location.search.split(/\?|\&/);

        params.forEach( function(it) {
            if (it) {
                var param = it.split("=");
                result[param[0]] = param[1];
            }
        });

        return result;
    }

E depois;

    if (queryParameters().sent === 'yes') { .....

fendidos (? / \ | \ & /) este meio
Selva ganapathi

2

Isso se baseia na resposta da Gazoris , mas o URL decodifica os parâmetros para que possam ser usados ​​quando contiverem dados que não sejam números e letras:

function urlParam(name){
    var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    // Need to decode the URL parameters, including putting in a fix for the plus sign
    // https://stackoverflow.com/a/24417399
    return results ? decodeURIComponent(results[1].replace(/\+/g, '%20')) : null;
}

2

Há outro exemplo com o uso da biblioteca URI.js.

O exemplo responde às perguntas exatamente como solicitado.

var url = 'http://example.com?sent=yes';
var urlParams = new URI(url).search(true);
// 1. Does sent exist?
var sendExists = urlParams.sent !== undefined;
// 2. Is it equal to "yes"?
var sendIsEqualtToYes = urlParams.sent == 'yes';

// output results in readable form
// not required for production
if (sendExists) {
  console.log('Url has "sent" param, its value is "' + urlParams.sent + '"');
  if (urlParams.sent == 'yes') {
    console.log('"Sent" param is equal to "yes"');
  } else {
    console.log('"Sent" param is not equal to "yes"');
  }
} else {
  console.log('Url hasn\'t "sent" param');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.18.2/URI.min.js"></script>


2
http://example.com?sent=yes

Melhor solução aqui .

function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.href);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, '    '));
};

Com a função acima, você pode obter valores de parâmetros individuais:

getUrlParameter('sent');

Resposta perfeita!
Srijani Ghosh 16/01/19

1

Versão do café da resposta de Sameer

getUrlParameter = (sParam) ->
  sPageURL = window.location.search.substring(1)
  sURLVariables = sPageURL.split('&')
  i = 0
  while i < sURLVariables.length
    sParameterName = sURLVariables[i].split('=')
    if sParameterName[0] == sParam
      return sParameterName[1]
    i++

1

Uma ligeira melhoria na resposta de Sameer, armazena os parâmetros em cache no fechamento para evitar a análise e o loop de todos os parâmetros sempre que chamar

var getURLParam = (function() {
    var paramStr = decodeURIComponent(window.location.search).substring(1);
    var paramSegs = paramStr.split('&');
    var params = [];
    for(var i = 0; i < paramSegs.length; i++) {
        var paramSeg = paramSegs[i].split('=');
        params[paramSeg[0]] = paramSeg[1];
    }
    console.log(params);
    return function(key) {
        return params[key];
    }
})();

1

Eu uso isso e funciona. http://codesheet.org/codesheet/NF246Tzs

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


var first = getUrlVars()["id"];

1

Com o vanilla JavaScript, você pode facilmente pegar os parâmetros (location.search), obter a substring (sem o?) E transformá-lo em uma matriz, dividindo-o por '&'.

À medida que você percorre urlParams, é possível dividir a sequência novamente com '=' e adicioná-la ao objeto 'params' como objeto [elmement [0]] = elemento [1]. Super simples e fácil de acessar.

http://www.website.com/?error=userError&type=handwritten

            var urlParams = location.search.substring(1).split('&'),
                params = {};

            urlParams.forEach(function(el){
                var tmpArr = el.split('=');
                params[tmpArr[0]] = tmpArr[1];
            });


            var error = params['error'];
            var type = params['type'];

1

E se houver & no parâmetro do URL como filename = "p & g.html" & uid = 66

Nesse caso, a 1ª função não funcionará corretamente. Então eu modifiquei o código

function getUrlParameter(sParam) {
    var sURLVariables = window.location.search.substring(1).split('&'), sParameterName, i;

    for (i = 0; i < sURLVariables.length; i++) {
        sParameterName = sURLVariables[i].split('=');

        if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : decodeURIComponent(sParameterName[1]);
        }
    }
}

1

É certo que estou adicionando minha resposta a uma pergunta com excesso de resposta, mas isso tem as vantagens de:

- Não depende de nenhuma biblioteca externa, incluindo jQuery

- Não poluir o espaço de nomes da função global, estendendo 'String'

- Não criar dados globais e processar desnecessariamente após a correspondência encontrada

- Tratamento de problemas de codificação e aceitação (assumindo) de nome de parâmetro não codificado

- Evitando forloops explícitos

String.prototype.urlParamValue = function() {
    var desiredVal = null;
    var paramName = this.valueOf();
    window.location.search.substring(1).split('&').some(function(currentValue, _, _) {
        var nameVal = currentValue.split('=');
        if ( decodeURIComponent(nameVal[0]) === paramName ) {
            desiredVal = decodeURIComponent(nameVal[1]);
            return true;
        }
        return false;
    });
    return desiredVal;
};

Então você o usaria como:

var paramVal = "paramName".urlParamValue() // null if no match

1

Se você deseja encontrar um parâmetro específico de um URL específico:

function findParam(url, param){
  var check = "" + param;
  if(url.search(check )>=0){
      return url.substring(url.search(check )).split('&')[0].split('=')[1];
  }
}  

var url = "http://www.yourdomain.com/example?id=1&order_no=114&invoice_no=254";  
alert(findParam(url,"order_no"));

0

Outra solução que usa jQuery e JSON, para que você possa acessar os valores dos parâmetros através de um objeto.

var loc = window.location.href;
var param = {};
if(loc.indexOf('?') > -1)
{
    var params = loc.substr(loc.indexOf('?')+1, loc.length).split("&");

    var stringJson = "{";
    for(var i=0;i<params.length;i++)
    {
        var propVal = params[i].split("=");
        var paramName = propVal[0];
        var value = propVal[1];
        stringJson += "\""+paramName+"\": \""+value+"\"";
        if(i != params.length-1) stringJson += ",";
    }
    stringJson += "}";
    // parse string with jQuery parseJSON
    param = $.parseJSON(stringJson);
}

Supondo que seu URL seja http://example.com/?search=hello+world&language=en&page=3

Depois disso, é apenas uma questão de usar parâmetros como este:

param.language

para retornar

en

O uso mais útil disso é executá-lo no carregamento da página e usar uma variável global para usar os parâmetros em qualquer lugar que você precisar.

Se o seu parâmetro contiver valores numéricos, basta analisar o valor.

parseInt(param.page)

Se não houver parâmetros, paramserá apenas um objeto vazio.


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

& está codificado incorretamente como "& amp;" na resposta acima, consulte a resposta correta stackoverflow.com/a/25359264/73630
Palani

-1

usa isto

$.urlParam = function(name) {
  var results = new RegExp('[\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
  return results[1] || 0;
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.