Parsing URL hash / fragment identifier avec JavaScript

Départ: jQuery BBQ

JQuery BBQ est conçu pour analyser les choses à partir de l'url (chaîne de requête ou fragment), et va un peu plus loin pour simplifier l'historique basé sur les fragments. C'est le plugin jQuery que Yarin recherchait 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 BBQ rend trivial de replier des objets entiers dans le fragment, je l'utilise pour "persister" mes paramètres de recherche. Cela donne à mes utilisateurs des états d'historique pour leurs recherches et aussi Leur permet de marquer des recherches utiles. Le meilleur de tous, lorsque QA trouve un défaut de recherche, ils peuvent lier directement aux résultats problématiques!)

Ici, il est modifié à partir de cet analyseur de chaîne de requête :

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

Aucun JQuery / plug-in requis

Mettre à jour:

Je recommande maintenant le plugin jQuery BBQ selon la réponse d'Hovis. Il couvre tous les problèmes d'analyse du hash.

J'utilise la bibliothèque JQuery URL Parser .

Faites ceci en Javascript pur:

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

Ma réponse à cette question devrait faire ce que vous recherchez:

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

Vous pouvez également utiliser la propriété .hash, démontrée dans cet exemple de table de défilement pour un lien cliqué ou pour la localisation .

Cette API jquery analyse les balises hash: 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' }); 

Je regardais à travers un tas de réponses pour ce problème et finis par les faire pivoter 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 sur cette ligne. Il peut être réécrit comme ceci pour plus de clarté:

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

Vous voudrez peut-être consulter jsuri . Cela me semble bien fonctionner.