Parsing von URL-Hash/Fragment-ID mit JavaScript

Suche nach einer Möglichkeit, Schlüsselpaare aus dem Hash/Fragment einer URL in ein Objekt/assoziatives Array mit JavaScript/JQuery zu parsen

Hier ist es, modifiziert von diesem Query-String-Parser:

function getHashParams() {

    var hashParams = {};
    var e,
        a = /+/g,  // Regex for replacing addition symbol with a space
        r = /([^&;=]+)=?([^&;]*)/g,
        d = function (s) { return decodeURIComponent(s.replace(a, " ")); },
        q = window.location.hash.substring(1);

    while (e = r.exec(q))
       hashParams[d(e[1])] = d(e[2]);

    return hashParams;
}

Kein JQuery/Plugin erforderlich

Aktualisieren:

Ich empfehle jetzt die jQuery-BBQ-Plugin gemäß der Antwort von Hovis. Es deckt alle Hash-Parsing-Probleme ab.

Aktualisierung (2019)

Anscheinend gibt es jetzt eine URLSearchParams-Funktion – siehe Antwort von @Berkant

Benutzen URLSearchParams. Browserabdeckung: https://caniuse.com/urlsearchparams. Es wird in den wichtigsten Browsern vollständig unterstützt. Hier ist ein Polyfill, wenn Sie dies in nicht unterstützten Browsern verwenden müssen.

So lesen Sie einen einfachen Schlüssel:

// window.location.hash = "#any_hash_key=any_value"

const parsedHash = new URLSearchParams(
  window.location.hash.substr(1) // skip the first char (#)
);

console.log(parsedHash.get("any_hash_key")); // any_value

Schauen Sie sich die Mozilla-Dokumentation an, die ich oben verlinkt habe, um alle Methoden der Schnittstelle zu sehen.

Kasse: jQuery-BBQ

jQuery BBQ wurde entwickelt, um Dinge aus der URL (Abfragezeichenfolge oder Fragment) zu analysieren, und geht etwas weiter, um den fragmentbasierten Verlauf zu vereinfachen. Dies ist das jQuery-Plugin, nach dem Yarin gesucht hat, bevor er eine reine js-Lösung zusammengestellt hat. Insbesondere die deparam.fragment() Funktion macht den Job. Guck mal!

(Die Support-Site, an der ich arbeite, verwendet eine asynchrone Suche, und da BBQ es trivial macht, ganze Objekte in das Fragment zu stecken, verwende ich es, um meine Suchparameter zu “bestehen”. Dies gibt meinen Benutzern Verlaufszustände für ihre Suchen und auch ermöglicht es ihnen, nützliche Suchen mit Lesezeichen zu versehen. Das Beste ist, wenn die QA einen Suchfehler findet, kann sie direkt zu den problematischen Ergebnissen verlinken!)

Tun Sie dies in reinem Javascript:

var hash = window.location.hash.substr(1);

var result = hash.split('&').reduce(function (result, item) {
    var parts = item.split('=');
    result[parts[0]] = parts[1];
    return result;
}, {});

http://example.com/#from=2012-01-05&to=2013-01-01

wird

{from: '2012-01-05', to:'2013-01-01'}

ich benutze jQuery-URL-Parser Bücherei.

Ich habe eine Reihe von Antworten für dieses Problem durchgesehen und sie am Ende mit einer Zeile zusammengeschustert reduce:

const hashObj = location.hash.replace('#', '').split('&').reduce((prev, item) => Object.assign({[item.split('=')[0]]: item.split('=')[1]}, prev), {});

In dieser einen Zeile ist offensichtlich viel los. Es kann für Klarheit wie folgt umgeschrieben werden:

const hashObj = location.hash.replace('#', '').split('&').reduce((prev, item) => {
  return Object.assign({[item.split('=')[0]]: item.split('=')[1]}, prev);
}, {});

Meine Antwort auf diese Frage sollte das tun, wonach Sie suchen:

url_args_decode = function (url) {
  var args_enc, el, i, nameval, ret;
  ret = {};
  // use the DOM to parse the URL via an 'a' element
  el = document.createElement("a");
  el.href = url;
  // strip off initial ? on search and split
  args_enc = el.search.substring(1).split('&');
  for (i = 0; i < args_enc.length; i++) {
    // convert + into space, split on =, and then decode 
    args_enc[i].replace(/+/g, ' ');
    nameval = args_enc[i].split('=', 2);
    ret[decodeURIComponent(nameval[0])]=decodeURIComponent(nameval[1]);
  }
  return ret;
};