URL Parsing identificateur de hachage/fragment avec JavaScript

Question

Vous cherchez un moyen d'analyser des paires de clés sur le hachage/fragment d'une URL dans un objet/tableau associatif avec JavaScript/JQuery

Answer 1

Départ: jQuery BBQ

BBQ jQuery est conçu pour analyser les choses de l'URL (chaîne de requête ou fragment), et va un peu plus loin pour simplifier l'histoire basée sur les fragments. C'est le plugin jQuery que recherchait Yarin avant de mettre en place une solution js pure. Plus précisément, la fonction deparam.fragment() fait le travail. Regarde! Le site de support sur lequel je travaille utilise une recherche asynchrone, et parce que le BBQ rend trivial de placer des objets entiers dans le fragment, je l'utilise pour 'persister' mes paramètres de recherche. recherches, et leur permet également de créer des signets recherches utiles le meilleur de tous, quand QA trouve un défaut de recherche, ils peuvent relier directement aux résultats problématiques)

Answer 2

J'utilise la bibliothèque jQuery URL Parser.

Answer 3

Ici, il est, modifié de cette 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; 
} 

Pas JQuery/plug-in nécessaire

Mise à jour:

Je suis maintenant recommander la jQuery BBQ plugin selon la réponse de Hovis . Il couvre tous les problèmes d'analyse syntaxique.

Answer 4

Ma réponse à this question devrait faire ce que vous cherchez.!

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

Answer 5

Vous voudrez peut-être vérifier jsuri. Cela semble bien fonctionner pour moi.

Answer 6

Vous pouvez également utiliser la propriété .hash, illustrée dans cet exemple scrolling table of contents pour un lien cliqué ou pour le locatioin.

Answer 7

Cette jquery API ne parse balises de hachage: https://jhash.codeplex.com/

// get the "name" querystring value 
var n = jHash.val('name'); 

// get the "location" querystring value 
var l = jHash.val('location'); 

// set some querystring values 
jHash.val({ 
    name: 'Chris', 
    location: 'WI' 
}); 

Answer 8

Je regardais à travers un tas de réponses à ce problème et liquidée les bricolant ensemble en utilisant une ligne avec reduce:

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

Il y a évidemment beaucoup de choses dans cette ligne. Il peut être réécrite comme celui-ci pour clariry:

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

Answer 9

Faites ceci en pur 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; 
}, {});