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.



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

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

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 .


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:


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:


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

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

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

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

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


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;
//=> æøå

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 .


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


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

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

}

-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


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

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

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

1
Este código não foi testado bem. Adivinha o que acontece com a consulta?twothrids=text
— Lyth
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.