ventana.ubicación.consulta de búsqueda como JSON

3 minutos de lectura

avatar de usuario de thugsb
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]; });

Avatar de usuario de Carlo Zottmann
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 }), {});

Avatar de usuario de Ali Malekpour
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 ) );

avatar de usuario de rafaelbiten
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);

¿Ha sido útil esta solución?