Tengo una cadena como esta:
abc=foo&def=%5Basf%5D&xyz=5
¿Cómo puedo convertirlo en un objeto JavaScript como este?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Tengo una cadena como esta:
abc=foo&def=%5Basf%5D&xyz=5
¿Cómo puedo convertirlo en un objeto JavaScript como este?
{
abc: 'foo',
def: '[asf]',
xyz: 5
}
Respuestas:
Editar
Esta edición mejora y explica la respuesta basada en los comentarios.
Ejemplo
Analiza
abc=foo&def=%5Basf%5D&xyz=5
en cinco pasos:abc=foo","def=[asf]","xyz=5
abc":"foo","def":"[asf]","xyz":"5
{"abc":"foo","def":"[asf]","xyz":"5"}
lo cual es legal JSON.
Una solución mejorada permite más caracteres en la cadena de búsqueda. Utiliza una función de reviver para la decodificación de URI:
Ejemplo
da
Respuesta original
Una frase:
fuente
JSON.parse('{"' + decodeURI(location.search.substring(1).replace(/&/g, "\",\"").replace(/=/g, "\":\"")) + '"}')
2020 ES6 / 7/8 y sobre el enfoque
A partir de ES6 y posteriores, Javascript ofrece varias construcciones para crear una solución eficaz para este problema.
Esto incluye el uso de URLSearchParams e iteradores
Si su caso de uso requiere que lo convierta realmente en objeto, puede implementar la siguiente función:
Demo Básica
Usando Object.fromEntries y spread
Podemos usar Object.fromEntries (que se encuentra actualmente en la etapa 4), reemplazando
paramsToObject
conObject.fromEntries(entries)
.Como
URLParams
devuelve un objeto iterable , usar el operador de propagación en lugar de llamar.entries
también generará entradas según su especificación:Nota: Todos los valores son cadenas automáticamente según la especificación URLSearchParams
Múltiples llaves iguales
Como @siipe señaló , las cadenas que contienen múltiples valores de la misma clave se convertirán en el último valor disponible:
foo=first_value&foo=second_value
en esencia, se convertirán en:{foo: "second_value"}
.Según esta respuesta: https://stackoverflow.com/a/1746566/1194694 no hay especificaciones para decidir qué hacer con él y cada marco puede comportarse de manera diferente.
Un caso de uso común será unir los dos mismos valores en una matriz, convirtiendo el objeto de salida en:
Esto se puede lograr con el siguiente código:
fuente
search string
analizador, que es para lo que fue diseñado, independientemente de que esté asociado a una URLObject.fromEntries
no funciona para claves repetidas. Si tratamos de hacer algo así?foo=bar1&foo=bar2
, solo obtendremos{ foo: 'bar2' }
. El objeto de solicitud Node.js, por ejemplo, lo analiza como{ foo: ['bar1', 'bar2'] }
let temp={};Object.keys(params).map(key=>{temp[key]=urlParams.getAll(key)})
ES6 un forro. Limpio y sencillo.
Para su caso específico, sería:
fuente
"http://place.com?foo=bar&hello=%40world&showThing"
produce{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
?someValue=false
vuelve{ someValue: "false" }
?foo=bar1&foo=bar2
, solo obtendremos{ foo: 'bar2' }
. El objeto de solicitud Node.js lo analiza como{ foo: ['bar1', 'bar2'] }
location.search
Dividir
&
para obtener pares de nombre / valor, luego dividir cada par=
. Aquí hay un ejemplo:Otro enfoque, usando expresiones regulares:
Esto está adaptado de "Buscar y no reemplazar" de John Resig .
fuente
Una solución concisa:
fuente
Las soluciones propuestas que encontré hasta ahora no cubren escenarios más complejos.
Necesitaba convertir una cadena 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
en un objeto como:
O:
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
DENTRO:
Recopilé y adapté múltiples soluciones en una que realmente funciona:
CÓDIGO:
fuente
obj=encodeURIComponent(JSON.stringify({what:{ever:','},i:['like']}))
.Esta es la versión simple, obviamente querrás agregar alguna comprobación de errores:
fuente
JSON.parse('{"' + decodeURIComponent(query.replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g,'":"') + '"}'));
funciona para míname[]=test1&name[]=test2
y resultará enname[]=test2
Encontré $ .String.deparam la solución precompilada más completa (puede hacer objetos anidados, etc.). Echa un vistazo a la documentación .
fuente
Enfoque One-Liner 2019
Para su caso específico:
Para el caso más genérico donde alguien quiere analizar parámetros de consulta a un objeto:
Si no puede usar Object.fromEntries, esto también funcionará:
fuente
[...new URLSearchParams(window.location.search)].reduce((o, i) => ({ ...o, [i[0]]: i[1] }), {});
"http://place.com?foo=bar&hello=%40world&showThing
produce{ hello: "@world", http://place.com?foo: "bar", showThing: "" }
. Intenta agregarstr.split("?").pop()
Otra solución basada en el último estándar de URLSearchParams ( https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams )
Tenga en cuenta que esta solución está utilizando
Array.from ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from )
y _.fromPairs ( https://lodash.com/docs#fromPairs ) de lodash en aras de la simplicidad.
Debería ser fácil crear una solución más compatible ya que tiene acceso al iterador searchParams.entries () .
fuente
Tuve el mismo problema, probé las soluciones aquí, pero ninguna de ellas realmente funcionó, ya que tenía matrices en los parámetros de URL, como esta:
Así que terminé escribiendo mi propia función JS, que forma una matriz del parámetro en URI:
fuente
if(chunk[0].search("\\[\\]") !== -1) {
eso eschunk[0]=chunk[0].replace(/\[\]$/,'');
const
lugar devar
porque alguien podría hacerlocreateObjFromURI = 'some text'
y luego estropearían el código. si lo usaconst
, alguien que esté ejecutandocreateObjFromURI = 'some text'
cometerá un error que no puede asignar valor a la variable constante.Usando ES6, URL API y URLSearchParams API.
fuente
ES6 one liner (si podemos llamarlo así viendo la línea larga)
[...new URLSearchParams(location.search).entries()].reduce((prev, [key,val]) => {prev[key] = val; return prev}, {})
fuente
cur
para obtener mayor claridad..reduce((prev, [key, val]) => {prev[key] = val})
Bastante fácil usando la
URLSearchParams
API web de JavaScript,Enlaces útiles
fuente
Para Node JS, puede usar la API de Node JS
querystring
:Documentación: https://nodejs.org/api/querystring.html
fuente
No hay una solución nativa que yo sepa. Dojo tiene un método de deserialización incorporado si usa ese marco por casualidad.
De lo contrario, puede implementarlo usted mismo simplemente:
editar: agregado decodeURIComponent ()
fuente
Hay una biblioteca liviana llamada YouAreI.js que se prueba y hace que esto sea realmente fácil.
fuente
Una de las formas más simples de hacerlo mediante la interfaz URLSearchParam.
A continuación se muestra el fragmento de código de trabajo:
fuente
Esta parece ser la mejor solución, ya que toma en consideración múltiples parámetros del mismo nombre.
Más tarde decidí convertirlo a un complemento jQuery también ...
Ahora, el primero solo aceptará los parámetros, pero el complemento jQuery tomará toda la URL y devolverá los parámetros serializados.
fuente
Aquí hay uno que uso:
Uso básico, por ej.
?a=aa&b=bb
Object {a: "aa", b: "bb"}
Parámetros duplicados, p. Ej.
?a=aa&b=bb&c=cc&c=potato
Object {a: "aa", b: "bb", c: ["cc","potato"]}
Faltan llaves, por ej.
?a=aa&b=bb&=cc
Object {a: "aa", b: "bb"}
Valores perdidos, por ej.
?a=aa&b=bb&c
Object {a: "aa", b: "bb"}
Las soluciones JSON / regex anteriores arrojan un error de sintaxis en esta url loca:
?a=aa&b=bb&c=&=dd&e
Object {a: "aa", b: "bb", c: ""}
fuente
Aquí está mi versión rápida y sucia, básicamente está dividiendo los parámetros de URL separados por '&' en elementos de matriz, y luego itera sobre esa matriz agregando pares clave / valor separados por '=' en un objeto. Estoy usando decodeURIComponent () para traducir los caracteres codificados a sus equivalentes de cadena normales (por lo que% 20 se convierte en un espacio,% 26 se convierte en '&', etc.):
ejemplo:
devoluciones
El único problema es que xyz es una cadena y no un número (debido al uso de decodeURIComponent ()), pero más allá de eso no es un mal punto de partida.
fuente
fuente
Babel
la ayuda de usted puede hacerlo bien en otro entornoUsando phpjs
fuente
Sobre la base de la respuesta de Mike Causer, hice esta función que tiene en cuenta múltiples parámetros con la misma clave (
foo=bar&foo=baz
) y también parámetros separados por comas (foo=bar,baz,bin
). También le permite buscar una determinada clave de consulta.Entrada de ejemplo:
foo.html?foo=bar&foo=baz&foo=bez,boz,buz&bar=1,2,3
Salida de ejemplo
fuente
Si está utilizando URI.js, puede usar:
https://medialize.github.io/URI.js/docs.html#static-parseQuery
fuente
fuente
PRIMERO U NECESITA DEFINIR QUÉ ES UNA VAR:
Que solo leer:
y usar como:
fuente
También necesitaba tratar
+
en la parte de consulta de la URL ( decodeURIComponent no lo hace ), así que adapté el código de Wolfgang para convertirme en:En mi caso, estoy usando jQuery para obtener parámetros de formulario listos para URL, luego este truco para construir un objeto a partir de él y luego puedo actualizar fácilmente los parámetros en el objeto y reconstruir la URL de consulta, por ejemplo:
fuente
Lo hago de esta manera:
fuente
Si necesita recurrencia, puede usar la pequeña biblioteca js-extension-ling .
Esto generará algo como esto:
Nota: se basa en la función locutus parse_str ( https://locutus.io/php/strings/parse_str/ ).
fuente