Obter parâmetro de URL com escape

302

Estou procurando um plugin jQuery que possa obter parâmetros de URL e suporte esta sequência de pesquisa sem gerar o erro JavaScript: "sequência de URI malformada". Se não houver um plugin jQuery que suporte isso, eu preciso saber como modificá-lo para suportar isso.

?search=%E6%F8%E5

O valor do parâmetro URL, quando decodificado, deve ser:

æøå

(os caracteres são noruegueses).

Como não tenho acesso ao servidor, não posso modificar nada nele.

Sindre Sorhus
fonte
1
O motivo pelo qual você está obtendo "sequência de URI malformada" é porque a maioria das funções é usada decodeURIComponent(). Os caracteres noruegueses provavelmente foram codificados usando algo como escape()e alterar a decodeURIComponent()chamada para um unescape()deve ajudar.
Kevin M
Veja minha resposta para uma solução moderna: stackoverflow.com/a/19992436/64949
Sindre Sorhus

Respostas:

418
function getURLParameter(name) {
    return decodeURI(
        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
    );
}
James
fonte
33
Com name = 'bar', acho que esse regexp corresponderia 'foobar=10'e retornaria '10'. Talvez você possa adicionar '[?|&]'no início de sua regexp. Felicidades!
precisa saber é o seguinte
34
esta função retorna 'nulo' em vez de null quando o parâmetro não for definido ... a alegria de js ...
Damien
12
você pode querer "decodeURIComponent ()" em vez de "decodeURI ()", especialmente se você estiver passando dados interessantes como URLs de retorno como um parâmetro URL
perfeccionista
25
Isso é bom, mas decodeURIComponent é melhor, por exemplo, eu tinha uma hashtag (% 23) no meu parâmetro que seria ignorada pelo decodeURI. E eu não retornaria nulo, mas "", porque decodeURI (null) === "nulo", que é um valor de retorno estranho, "" é melhor; você pode fazer if (! getURLParameter ("param")) em vez de if (getURLParameter ("param") === "null"). Portanto, minha versão aprimorada: decodeURIComponent ((RegExp (nome + '=' + '(. +?) (& | $)'). Exec (location.search) || [, ""]) [1])
standup75 7/06/12
3
Votado para baixo, pois retorna a string, não importa se o resultado foi encontrado ou não, e não importa o que você coloca como matriz alternativa, por exemplo, [, null], porque o resultado foi envolvido em decodeURI, que transformou qualquer coisa em string, Sanjeev estava certo, mas seu código não foi testado corretamente e simples copiar e colar não funciona. function getURLParameter(name) { var p = RegExp(name + '=' + '(.+?)(&|$)').exec(location.search); if(!!p) { p = decodeURI(p[1]); } return p; }
Lukasz 'Severiaan' Grela
295

Abaixo está o que eu criei a partir dos comentários aqui, além de corrigir bugs não mencionados (como retornar nulo e não 'nulo'):

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}
radicand
fonte
6
Que tal adicionar newna frente do RegExp? Menos avisos de fiapos.
precisa saber é o seguinte
18
Essa deve ser a resposta aceita. Obter nulo real de volta em vez de "nulo" é muito melhor.
Art
11
Se alguém precisar disso convertido em coffeescript: getURLParameter: (name) -> return decodeURIComponent ((new RegExp ("[? | &] # {Name} = ([^ &;] + +)) (& | ## |; | $) "). exec (location.search) || [nulo," "]) [1]. substitua (/ \ + / g, '% 20')) || nulo;
Redbeard
1
@ Redbeard - Sua função não deveria ter um sinal '=' após a definição do método, em vez de dois pontos duplos?
Zippie
1
Esta é a única versão de uma função de parâmetro get-URL que funciona para mim com uma string UTF8.
certainlyakey
107

O que você realmente deseja é o plugin jQuery URL Parser . Com este plug-in, obter o valor de um parâmetro de URL específico (para o URL atual) se parece com o seguinte:

$.url().param('foo');

Se você deseja um objeto com nomes de parâmetros como chaves e valores de parâmetros como valores, basta chamar param()sem um argumento, como este:

$.url().param();

Essa biblioteca também funciona com outros URLs, não apenas o atual:

$.url('http://allmarkedup.com?sky=blue&grass=green').param();
$('#myElement').url().param(); // works with elements that have 'src', 'href' or 'action' attributes

Como essa é uma biblioteca de análise de URL inteira, você também pode obter outras informações a partir da URL, como a porta especificada ou o caminho, protocolo etc:

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

Também possui outros recursos, confira a página inicial para mais documentos e exemplos.

Em vez de escrever seu próprio analisador de URIs para esse fim específico, que meio que funciona na maioria dos casos, use um analisador de URIs real. Dependendo da resposta, o código de outras respostas pode retornar em 'null'vez de null, não funciona com parâmetros vazios ( ?foo=&bar=x), não pode analisar e retornar todos os parâmetros de uma só vez, repete o trabalho se você consultar repetidamente parâmetros de URL, etc.

Use um analisador de URI real, não invente o seu.

Para aqueles que são avessos ao jQuery, há uma versão do plugin que é JS puro .

Lucas
fonte
23
A questão é "obter parâmetro de URL com jQuery". Minha resposta responde à pergunta. Outras respostas instruem o usuário a escrever basicamente seu próprio analisador de URI para este caso de uso específico, o que é uma péssima idéia. Analisar URIs é mais complicado do que as pessoas pensam.
Lucas
2
Esta é a resposta que eu estava procurando e é muito jQuery-ish, ao contrário de algumas das outras respostas.
Ehtesh Choudhury
O plugin lida com a codificação URI ou eu tenho que decodificá-lo manualmente?
Roberto Linares
A pergunta diz "javascript" (acho que significa o DOM diretamente) ou jQuery. Então, qualquer um dos outros fará.
Brunoais
43

Se você não sabe quais serão os parâmetros da URL e deseja obter um objeto com as chaves e os valores que estão nos parâmetros, você pode usar isto:

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

Chamar getParameters () com um URL como /posts?date=9/10/11&author=nilbusretornaria:

{
  date:   '9/10/11',
  author: 'nilbus'
}

Não incluirei o código aqui, pois ele fica ainda mais longe da questão, mas o weareon.net postou uma biblioteca que permite a manipulação dos parâmetros no URL também:

Edward Anderson
fonte
1
Sim, é melhor obter todos os parâmetros. Todas as outras soluções listadas aqui repetem a regex para cada parâmetro.
Bernard
Esta função retorna um objeto estranho: {"": undefined}quando a URL não tem parâmetros. É melhor retornar um objeto vazio usando if(searchString=='') return {};diretamente após a searchStringatribuição.
Jordan Arseno 01/07
40

Você pode usar a propriedade location.search nativa do navegador :

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

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

Mas existem alguns plugins jQuery que podem ajudá-lo:

CMS
fonte
4
Isso é muito mais limpo e mais legível (e provavelmente mais livre de bugs) do que todos aqueles tipos de expressões regulares regex.
precisa saber é o seguinte
8
Vou sugerir a utilização decodeURIComponent () em vez de unescape ()
freedev
+1 isso funciona para navegadores modernos, mas alguns desenvolvedores precisam trabalhar com ...: | IE8: S.
Brunoais
25

Com base na resposta do 999 :

function getURLParameter(name) {
    return decodeURIComponent(
        (location.search.match(RegExp("[?|&]"+name+'=(.+?)(&|$)'))||[,null])[1]
    );  
}

Alterar:

  • decodeURI() é substituído por decodeURIComponent()
  • [?|&] é adicionado no início do regexp
Eugene Yarmash
fonte
3
Pode ser útil para outras pessoas se você puder explicar por que fez essas alterações. Thx
Timm
3
Não lidar com params vazias: ?a=&b=1. Melhor regexp seria:"[?&]"+name+"=([^&]*)"
serg
6

É necessário adicionar o parâmetro i para torná-lo sem distinção entre maiúsculas e minúsculas:

  function getURLParameter(name) {
    return decodeURIComponent(
      (RegExp(name + '=' + '(.+?)(&|$)', 'i').exec(location.search) || [, ""])[1]
    );
  }
Scott Wojan
fonte
3

Depois de ler todas as respostas, acabei com esta versão com + uma segunda função para usar parâmetros como sinalizadores

function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)','i').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
}

function isSetURLParameter(name) {
    return (new RegExp('[?|&]' + name + '(?:[=|&|#|;|]|$)','i').exec(location.search) !== null)
}
Néon
fonte
2
Boa resposta, apenas um aviso no entanto. Por JSHint, [, ""] pode causar problemas para navegadores mais antigos. Portanto, use [null, ""] ou [undefined, ""]. Ainda existem alguns de nós, infelizes, que apóiam o IE8 e se atrevem a dizer o IE7.
Delicia Brummitt
2
$.urlParam = function(name){
  var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(top.window.location.href); 
  return (results !== null) ? results[1] : 0;
}

$.urlParam("key");
Yoshi
fonte
2

Por exemplo, uma função que retorna valor de qualquer variável de parâmetro.

function GetURLParameter(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];
        }
    }
}​

E é assim que você pode usar essa função assumindo que o URL seja,

"http://example.com/?technology=jquery&blog=jquerybyexample".

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

Portanto, no código acima, a variável "tech" terá "jQuery" como valor e a variável "blog" será "jquerybyexample".

Rubyist
fonte
2

Você não deve usar o jQuery para algo assim!
A maneira moderna é usar pequenos módulos reutilizáveis ​​através de um gerenciador de pacotes como o Bower.

Eu criei um pequeno módulo que pode analisar a string de consulta em um objeto. Use-o assim:

// parse the query string into an object and get the property
queryString.parse(unescape(location.search)).search;
//=> æøå
Sindre Sorhus
fonte
Se você está dizendo que não é moderno ter uma estrutura, tudo bem. Mas, na minha opinião, as estruturas realmente têm seu lugar. O jQuery está cada vez menos bonito para mim.
Lodewijk
0

Há muitos códigos de bugs aqui e as soluções regex são muito lentas. Encontrei uma solução que funciona até 20x mais rápido que a contrex e é elegantemente simples:

    /*
    *   @param      string      parameter to return the value of.
    *   @return     string      value of chosen parameter, if found.
    */
    function get_param(return_this)
    {
        return_this = return_this.replace(/\?/ig, "").replace(/=/ig, ""); // Globally replace illegal chars.

        var url = window.location.href;                                   // Get the URL.
        var parameters = url.substring(url.indexOf("?") + 1).split("&");  // Split by "param=value".
        var params = [];                                                  // Array to store individual values.

        for(var i = 0; i < parameters.length; i++)
            if(parameters[i].search(return_this + "=") != -1)
                return parameters[i].substring(parameters[i].indexOf("=") + 1).split("+");

        return "Parameter not found";
    }

console.log(get_param("parameterName"));

O Regex não é a solução definitiva, pois esse tipo de problema, a manipulação simples de cadeias de caracteres pode funcionar muito mais eficientemente. Código fonte .

George Anthony
fonte
0
<script type="text/javascript">
function getURLParameter(name) {
        return decodeURIComponent(
            (location.search.toLowerCase().match(RegExp("[?|&]" + name + '=(.+?)(&|$)')) || [, null])[1]
        );
    }

</script>

getURLParameter(id)ou getURLParameter(Id)Funciona da mesma forma :)

user2310887
fonte
0

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;
    }
    else{
       return results[1] || 0;
    }
}

example.com?param1=name&param2=&id=6

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

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

console.log(decodeURIComponent($.urlParam('city'))); 
//output: Gold Coast
Reza Baradaran Gazorisangi
fonte
-1
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("Param:"+arrParamValues[i]);
                return arrParamValues[i];
             }
       }
       return "No Parameters Found";
    }

}
Dhiral Pandya
fonte
-1

Eu criei uma função simples para obter o parâmetro URL no JavaScript a partir de um URL como este:

.....58e/web/viewer.html?page=*17*&getinfo=33


function buildLinkb(param) {
    var val = document.URL;
    var url = val.substr(val.indexOf(param))  
    var n=parseInt(url.replace(param+"=",""));
    alert(n+1); 
}
buildLinkb("page");

RESULTADO: 18

Code Spy
fonte
2
Tenha cuidado ao postar copiar e colar respostas padrão / textuais para várias perguntas, pois elas tendem a ser sinalizadas como "spam" pela comunidade. Se você está fazendo isso, então isso normalmente significa as perguntas são duplicatas assim sinalizá-las como tal em vez disso: stackoverflow.com/a/11808489/419
Kev
-1

Apenas no caso de vocês terem o URL como localhost / index.xsp? A = 1 # alguma coisa e precisarem obter o parâmetro, não o hash.

var vars = [], hash, anchor;
var q = document.URL.split('?')[1];
if(q != undefined){
    q = q.split('&');
    for(var i = 0; i < q.length; i++){
        hash = q[i].split('=');
        anchor = hash[1].split('#');
        vars.push(anchor[0]);
        vars[hash[0]] = anchor[0];
    }
}
Ancyent
fonte
-1

Ligeira modificação na resposta por @pauloppenheim, pois ela não manipula corretamente os nomes de parâmetros que podem fazer parte de outros nomes de parâmetros.

Por exemplo: se você tiver parâmetros "appenv" e "env", a redefinição do valor para "env" poderá selecionar o valor "appenv".

Consertar:

var urlParamVal = function (name) {
    var result = RegExp("(&|\\?)" + name + "=(.+?)(&|$)").exec(location.search);
    return result ? decodeURIComponent(result[2]) : "";
};
lasantha
fonte
-2

Isso pode ajudar.

<script type="text/javascript">
    $(document).ready(function(){
        alert(getParameterByName("third"));
    });
    function getParameterByName(name){
        var url     = document.URL,
            count   = url.indexOf(name);
            sub     = url.substring(count);
            amper   = sub.indexOf("&"); 

        if(amper == "-1"){
            var param = sub.split("=");
            return param[1];
        }else{
            var param = sub.substr(0,amper).split("=");
            return param[1];
        }

    }
</script>
Ram Guiao
fonte
1
Este código não foi testado bem. Adivinha o que acontece com a consulta?twothrids=text
Lyth