matonesb
¿Hay una mejor manera de convertir la ubicación.búsqueda de una URL como un objeto? ¿Quizás simplemente más eficiente o recortado? Estoy usando jQuery, pero JS puro también puede funcionar.
var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = {};
$.each(queryPairs, function() { queryJSON[this.split('=')[0]] = this.split('=')[1]; });
carlo zottmann
Aquí hay una función JS pura. Analiza la parte de búsqueda de la URL actual y devuelve un objeto. (Es un poco detallado para la legibilidad, mente).
function searchToObject() {
var pairs = window.location.search.substring(1).split("&"),
obj = {},
pair,
i;
for ( i in pairs ) {
if ( pairs[i] === "" ) continue;
pair = pairs[i].split("=");
obj[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
}
return obj;
}
En una nota relacionada, no está intentando almacenar los parámetros individuales en “un JSON” sino en “un objeto”. 😉
Tenga en cuenta también que hay una API para consultar/manipular parámetros de búsqueda con:
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
var params = new URLSearchParams(window.location.search)
for (let p of params) {
console.log(p);
}
-
Amigo, este es el tipo de solución que estaba buscando. El soporte del navegador parece ser excelente, excepto IE. ¡Gracias!
– SKuijers
20 de febrero de 2020 a las 9:20
Probablemente la solución más corta para casos simples:
location.search
.slice(1)
.split('&')
.map(p => p.split('='))
.reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});
Ali Malekpour
Si está utilizando un navegador moderno, esto produce el mismo resultado que la respuesta aceptada:
function searchToObject(search) {
return search.substring(1).split("&").reduce(function(result, value) {
var parts = value.split('=');
if (parts[0]) result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
return result;
}, {})
}
Mi enfoque, simple y limpio.
var params = "?q=Hello World&c=Awesome";
params = "{\"" +
params
.replace( /\?/gi, "" )
.replace( /\&/gi, "\",\"" )
.replace( /\=/gi, "\":\"" ) +
"\"}";
params = JSON.parse( params );
alert( decodeURIComponent( params.q ) );
alert( decodeURIComponent( params.c ) );
rafaelbiten
Solo quería compartir esta solución usando un poco de ESNext y un reductor.
Hace más o menos lo mismo sugerido por @Carlo, pero es un poco más limpio si te sientes cómodo con ES6 y los reductores.
const urlSearchData = searchString => {
if (!searchString) return false;
return searchString
.substring(1)
.split('&')
.reduce((result, next) => {
let pair = next.split('=');
result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
return result;
}, {});
};
const searchData = urlSearchData(window.location.search);
Sobre la base del trabajo ES6 de @rafaelbiten, agregué soporte para parámetros que no tienen valor y consultas de matrices de parámetros del estilo de entrada duplicada.
JSFiddle: https://jsfiddle.net/w922xefs/
const queryStringToJSObject = searchString => {
if (!searchString) return null;
return searchString
.replace(/^\?/, '') // Only trim off a single leading interrobang.
.split('&')
.reduce((result, next) => {
if (next === "") {
return result;
}
let pair = next.split('=');
let key = decodeURIComponent(pair[0]);
let value = typeof pair[1] !== "undefined" && decodeURIComponent(pair[1]) || undefined;
if (result.hasOwnProperty(key)) { // Check to see if this property has been met before.
if (Array.isArray(result[key])) { // Is it already an array?
result[key].push(value);
}
else { // Make it an array.
result[key] = [result[key], value];
}
}
else { // First time seen, just add it.
result[key] = value;
}
return result;
}, {}
);
};
// Simple read of query string
const searchData = queryStringToJSObject(window.location.search);