web-dev-qa-db-fra.com

Analyser l'URL de hachage / identifiant de fragment avec JavaScript

Recherche d'un moyen d'analyser les paires de clés du hachage/fragment d'une URL dans un objet/tableau associatif avec JavaScript/JQuery

javascriptjqueryurlhashfragment-identifier
43
Yarin

Découvrez: 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 au point 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 barbecue rend trivial de ranger 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 mettre en signet des recherches utiles. Mieux encore, lorsque le contrôle qualité trouve un défaut de recherche, il peut se connecter directement aux résultats problématiques!)

31
Hovis Biddle

Le voici, modifié à partir de ceci 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

Mise à jour:

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

Mise à jour (2019)

Apparemment, il y a maintenant une fonction URLSearchParams - voir réponse de @Berkant

51
Yarin

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

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

devient

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

16
paqogomez

J'utilise jQuery URL Parser bibliothèque.

3
serg

Utilisez RLSearchParams . Couverture du navigateur: https://caniuse.com/#search=URLSearchParams . Il est entièrement pris en charge dans les principaux navigateurs.

Comment lire une clé simple:

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

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

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

Consultez les documents Mozilla que j'ai liés ci-dessus pour voir toutes les méthodes de l'interface.

2
Berkant

Je cherchais à travers un tas de réponses à ce problème et j'ai fini par les bricoler 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 se passe évidemment beaucoup de choses sur cette seule 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);
}, {});
2
mccambridge

Ma réponse à cette 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;
};
0
BMitch

Cette API jquery analyse les 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'
});
0
SomeoneElse

Vous pouvez également utiliser la propriété .hash, illustrée dans cet exemple défilement de la table des matières pour un lien cliqué ou pour locatioin .

0
yuvilio