Eu tenho uma string como esta:
abc=foo&def=%5Basf%5D&xyz=5
Como posso convertê-lo em um objeto JavaScript como este?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Eu tenho uma string como esta:
abc=foo&def=%5Basf%5D&xyz=5
Como posso convertê-lo em um objeto JavaScript como este?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Respostas:
Editar
Esta edição aprimora e explica a resposta com base nos comentários.
Exemplo
Analise
abc=foo&def=%5Basf%5D&xyz=5
em cinco etapas:abc=foo","def=[asf]","xyz=5
abc":"foo","def":"[asf]","xyz":"5
{"abc":"foo","def":"[asf]","xyz":"5"}
que é JSON legal.
Uma solução aprimorada permite mais caracteres na cadeia de pesquisa. Ele usa uma função reviver para decodificação de URI:
Exemplo
dá
Resposta original
Uma linha:
fonte
JSON.parse('{"' + decodeURI(location.search.substring(1).replace(/&/g, "\",\"").replace(/=/g, "\":\"")) + '"}')
2020 ES6 / 7/8 e na abordagem
A partir do ES6 e em diante, o Javascript oferece várias construções para criar uma solução de alto desempenho para esse problema.
Isso inclui o uso de URLSearchParams e iteradores
Caso seu caso de uso exija que você realmente o converta em objeto, você pode implementar a seguinte função:
Demonstração básica
Usando Object.fromEntries e spread
Podemos usar Object.fromEntries (que está atualmente no estágio 4), substituindo
paramsToObject
porObject.fromEntries(entries)
.Como
URLParams
retorna um objeto iterável , o uso do operador spread em vez de chamar.entries
também produzirá entradas conforme sua especificação:Nota: Todos os valores são sequências automaticamente de acordo com a especificação URLSearchParams
Múltiplas mesmas chaves
Como @siipe apontou, strings contendo vários valores do mesmo chave serão coagidos o último valor disponível:
foo=first_value&foo=second_value
vai na sua essência se tornar:{foo: "second_value"}
.De acordo com esta resposta: https://stackoverflow.com/a/1746566/1194694, não há especificações para decidir o que fazer com ela e cada estrutura pode se comportar de maneira diferente.
Um caso de uso comum será juntar os dois mesmos valores em uma matriz, transformando o objeto de saída em:
Isso pode ser alcançado com o seguinte código:
fonte
search string
analisador - que é o que ele foi projetado para fazer, independentemente de ele ser associado a um URLObject.fromEntries
não funciona para teclas repetidas. Se tentarmos fazer algo assim?foo=bar1&foo=bar2
, teremos apenas{ foo: 'bar2' }
. O objeto de solicitação do Node.js, por exemplo, o analisa como{ foo: ['bar1', 'bar2'] }
let temp={};Object.keys(params).map(key=>{temp[key]=urlParams.getAll(key)})
ES6 um forro. Limpo e simples.
Para o seu caso específico, seria:
fonte
"http://place.com?foo=bar&hello=%40world&showThing"
produz{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
?someValue=false
se torna #{ someValue: "false" }
?foo=bar1&foo=bar2
, teremos apenas{ foo: 'bar2' }
. O objeto de solicitação do Node.js o analisa como{ foo: ['bar1', 'bar2'] }
location.search
Divida
&
para obter pares de nome / valor e divida cada par=
. Aqui está um exemplo:Outra abordagem, usando expressões regulares:
Isto é adaptado de "Search and Don't Replace" de John Resig .
fonte
Uma solução concisa:
fonte
As soluções propostas que encontrei até agora não cobrem cenários mais complexos.
Eu precisava converter uma string de consulta como
https://random.url.com?Target=Offer&Method=findAll&filters%5Bhas_goals_enabled%5D%5BTRUE%5D=1&filters%5Bstatus%5D=active&fields%5B%5D=id&fields%5B%5D=name&fields%5B%5D=default_goal_name
em um objeto como:
OU:
https://random.url.com?Target=Report&Method=getStats&fields%5B%5D=Offer.name&fields%5B%5D=Advertiser.company&fields%5B%5D=Stat.clicks&fields%5B%5D=Stat.conversions&fields%5B%5D=Stat.cpa&fields%5B%5D=Stat.payout&fields%5B%5D=Stat.date&fields%5B%5D=Stat.offer_id&fields%5B%5D=Affiliate.company&groups%5B%5D=Stat.offer_id&groups%5B%5D=Stat.date&filters%5BStat.affiliate_id%5D%5Bconditional%5D=EQUAL_TO&filters%5BStat.affiliate_id%5D%5Bvalues%5D=1831&limit=9999
PARA DENTRO:
Compilei e adaptei várias soluções em uma que realmente funciona:
CÓDIGO:
fonte
obj=encodeURIComponent(JSON.stringify({what:{ever:','},i:['like']}))
.Esta é a versão simples, obviamente você desejará adicionar algumas verificações de erros:
fonte
JSON.parse('{"' + decodeURIComponent(query.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'));
funciona para mimname[]=test1&name[]=test2
e resultará em:name[]=test2
Eu encontrei $ .String.deparam a solução pré- compilada mais completa (pode fazer objetos aninhados etc.). Confira a documentação .
fonte
Abordagem one-liner de 2019
Para o seu caso específico:
Para o caso mais genérico em que alguém deseja analisar parâmetros de consulta em um objeto:
Se você não conseguir usar Object.fromEntries, isso também funcionará:
fonte
[...new URLSearchParams(window.location.search)].reduce((o, i) => ({ ...o, [i[0]]: i[1] }), {});
"http://place.com?foo=bar&hello=%40world&showThing
produz{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
. Tente adicionarstr.split("?").pop()
Outra solução baseada no padrão mais recente do URLSearchParams ( https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )
Observe que esta solução está fazendo uso de
Array.from ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from )
e _.fromPairs ( https://lodash.com/docs#fromPairs ) de lodash por uma questão de simplicidade.
Deve ser fácil criar uma solução mais compatível, pois você tem acesso ao iterador searchParams.entries () .
fonte
Eu tive o mesmo problema, tentei as soluções aqui, mas nenhuma delas realmente funcionou, pois tinha matrizes nos parâmetros da URL, como este:
Então, acabei escrevendo minha própria função JS, que cria uma matriz fora do parâmetro no URI:
fonte
if(chunk[0].search("\\[\\]") !== -1) {
disso échunk[0]=chunk[0].replace(/\[\]$/,'');
const
vez devar
porque alguém pode fazercreateObjFromURI = 'some text'
e então eles estragariam o código. se você usarconst
, alguém executandocreateObjFromURI = 'some text'
um erro não poderá atribuir valor à variável constante.Usando ES6, URL API e URLSearchParams API.
fonte
ES6 one liner (se podemos chamá-lo dessa maneira vendo a linha longa)
[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})
fonte
cur
para obter mais clareza..reduce((prev, [key, val]) => {prev[key] = val})
Muito fácil usando a
URLSearchParams
API da Web JavaScript,Links Úteis
fonte
Para o Nó JS, você pode usar a API do Nó JS
querystring
:Documentação: https://nodejs.org/api/querystring.html
fonte
Não há nenhuma solução nativa que eu saiba. O Dojo possui um método de desserialização integrado, se você usar essa estrutura por acaso.
Caso contrário, você pode implementá-lo de maneira simples:
edit: adicionado decodeURIComponent ()
fonte
Existe uma biblioteca leve chamada YouAreI.js que é testada e facilita muito isso.
fonte
Uma das maneiras mais simples de fazer isso usando a interface URLSearchParam.
Abaixo está o trecho de código de trabalho:
fonte
Essa parece ser a melhor solução, pois leva em consideração vários parâmetros com o mesmo nome.
Mais tarde, decidi convertê-lo para um plugin jQuery também ...
Agora, o primeiro aceitará apenas os parâmetros, mas o plugin jQuery pegará o URL inteiro e retornará os parâmetros serializados.
fonte
Aqui está um que eu uso:
Uso básico, por exemplo.
?a=aa&b=bb
Object {a: "aa", b: "bb"}
Parâmetros duplicados, por exemplo.
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}
Chaves ausentes, por exemplo.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}
Valores ausentes, por exemplo.
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}
As soluções JSON / regex acima geram um erro de sintaxe nesse URL maluco:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}
fonte
Aqui está minha versão rápida e suja, basicamente dividindo os parâmetros de URL separados por 'e' em elementos da matriz e, em seguida, itera sobre essa matriz, adicionando pares de chave / valor separados por '=' em um objeto. Estou usando decodeURIComponent () para converter os caracteres codificados em seus equivalentes de seqüência de caracteres normais (então% 20 se torna um espaço,% 26 se torna '&', etc):
exemplo:
retorna
O único problema é que xyz é uma string e não um número (devido ao uso de decodeURIComponent ()), mas além disso não é um ponto de partida ruim.
fonte
fonte
Babel
a ajuda de que você pode fazê-lo bem sob outro ambienteUsando phpjs
fonte
Com base na resposta de Mike Causer, criei essa função que leva em consideração vários parâmetros com a mesma chave (
foo=bar&foo=baz
) e também parâmetros separados por vírgula (foo=bar,baz,bin
). Também permite procurar uma determinada chave de consulta.Exemplo de entrada:
foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3
Saída de exemplo
fonte
Se você estiver usando o URI.js, poderá usar:
https://medialize.github.io/URI.js/docs.html#static-parseQuery
fonte
fonte
PRIMEIRO U PRECISA DEFINIR O QUE É OBTER VAR:
Do que apenas ler:
e use como:
fonte
Eu também precisava lidar com
+
a parte da consulta da URL ( decodeURIComponent não ), então adaptei o código de Wolfgang para se tornar:No meu caso, estou usando o jQuery para obter parâmetros de formulário prontos para URL, então este truque para criar um objeto a partir dele e eu posso atualizar facilmente parâmetros no objeto e reconstruir o URL da consulta, por exemplo:
fonte
Eu faço assim:
fonte
Se você precisar de recursão, poderá usar a pequena biblioteca js-extension-ling .
Isso produzirá algo como isto:
Nota: é baseado na função locutus parse_str ( https://locutus.io/php/strings/parse_str/ ).
fonte