Recuperar el valor específico de la etiqueta hash de la url

Question

En JavaScript sin formato, ¿cómo se puede verificar que exista una etiqueta hash específica en una url, y luego tomar el valor?

Ejemplo: http://www.example.com/index.html#hashtag1=value1&#hashtag2=value2

Quiero ser capaz de agarrar el valor de cualquiera de hashtag1 o hashtag2.

Answer 1

var HashSearch = new function() { 
     var params; 

     this.set = function (key, value) { 
      params[key] = value; 
      this.push(); 
     }; 

     this.remove = function (key, value) { 
      delete params[key]; 
      this.push(); 
     }; 


     this.get = function (key, value) { 
      return params[key]; 
     }; 

     this.keyExists = function (key) { 
      return params.hasOwnProperty(key); 
     }; 

     this.push= function() { 
      var hashBuilder = [], key, value; 

      for(key in params) if (params.hasOwnProperty(key)) { 
       key = escape(key), value = escape(params[key]); // escape(undefined) == "undefined" 
       hashBuilder.push(key + ((value !== "undefined") ? '=' + value : "")); 
      } 

      window.location.hash = hashBuilder.join("&"); 
     }; 

     (this.load = function() { 
      params = {} 
      var hashStr = window.location.hash, hashArray, keyVal 
      hashStr = hashStr.substring(1, hashStr.length); 
      hashArray = hashStr.split('&'); 

      for(var i = 0; i < hashArray.length; i++) { 
       keyVal = hashArray[i].split('='); 
       params[unescape(keyVal[0])] = (typeof keyVal[1] != "undefined") ? unescape(keyVal[1]) : keyVal[1]; 
      } 
     })(); 
    } 

Su uso:

Comprobar si una "clave hash" está presente:

HashSearch.keyExists("thekey"); 

obtener el valor de una clave hash:

HashSearch.get('thekey'); 

Ajuste el valor para una clave hash, y actualice el hash URL:

HashSearch.set('thekey', 'hey'); 

Eliminar una clave hash a partir de la URL:

HashSearch.remove('thekey'); 

Actualizar el hash en el objeto local:

HashSearch.load(); 

Empuje el valor de la clave actual establecido para el hash URL:

HashSearch.push(); 

Tenga en cuenta que cuando una clave no existe e intenta get, se devolverá undefined. Sin embargo, una clave podría existir sin ningún valor, por ejemplo #key=val&novalue donde novalue es una clave sin valor. Si lo hace HashSearch.get("novalue") también devolvería undefined. En ese caso, debe usar HashSearch.keyExists("novalue") para verificar que efectivamente sea una clave.

Answer 2

window.location.hash debería darle lo que quiere.

Answer 3

Utilizo esto y funciona muy bien para mí. Se ajusta un poco a una línea que recogí en algún lado, creo en SO.

getURLHashParameter : function(name) { 

     return decodeURI(
      (RegExp('[#|&]' + name + '=' + '(.+?)(&|$)').exec(location.hash)||[,null])[1] 
     ); 
    }, 

Answer 4

jQuery BBQ (botón de retroceso y de consulta) aprovecha el evento hashchange HTML5 para permitir potente historia #hash sencilla, bookmarkable. Además, jQuery BBQ proporciona un método .deparam() completo, junto con la administración del estado de hash, y los métodos de utilidad de fusión y análisis de cadenas de fragmentos/consultas.

En resumen: esta biblioteca le permite cambiar dinámicamente una cadena de consulta de hash dentro de su página y hacer que la URL coincida. También le permite extraer dinámicamente valores y normalizar el trabajo con la "cadena de consulta". Finalmente, agregará las cadenas de consulta en el historial, lo que permite que el botón Atrás funcione como una navegación entre los valores hash de consulta anteriores.

un buen movimiento para UX sería de revisar una biblioteca como jQuery barbacoa :)