window.location.search-Abfrage als JSON

Gibt es eine bessere Möglichkeit, die location.search einer URL als Objekt zu konvertieren? Vielleicht nur effizienter oder abgespeckter? Ich verwende jQuery, aber reines JS kann auch funktionieren.

var query = window.location.search.substring(1), queryPairs = query.split('&'), queryJSON = {};
$.each(queryPairs, function() { queryJSON[this.split('=')[0]] = this.split('=')[1]; });

Hier ist eine reine JS-Funktion. Analysiert den Suchteil der aktuellen URL und gibt ein Objekt zurück. (Es ist ein bisschen ausführlich für die Lesbarkeit, wohlgemerkt.)

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

In diesem Zusammenhang versuchen Sie nicht, die einzelnen Parameter in “einem JSON”, sondern in “einem Objekt” zu speichern. 😉

Bitte beachten Sie auch, dass es eine API gibt, mit der Suchparameter abgefragt/manipuliert werden können:
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);
}

Die wohl kürzeste Lösung für einfache Fälle:

location.search
  .slice(1)
  .split('&')
  .map(p => p.split('='))
  .reduce((obj, [key, value]) => ({ ...obj, [key]: value }), {});

Wenn Sie einen modernen Browser verwenden, führt dies zu demselben Ergebnis wie die akzeptierte Antwort:

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;
  }, {})
}

Mein Ansatz, einfach und sauber

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

Ich wollte diese Lösung nur mit etwas ESNext und einem Reducer teilen.

Es macht so ziemlich das Gleiche wie von @Carlo vorgeschlagen, aber es ist ein bisschen sauberer, wenn Sie mit ES6 und Reduzierern vertraut sind.

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

Aufbauend auf der ES6-Arbeit von @rafaelbiten habe ich Unterstützung für Parameter hinzugefügt, die keinen Wert haben, und Parameter-Arrays im Stil doppelter Einträge abgefragt.

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