Truy lục giá trị của thẻ băm cụ thể từ url

Question

Trong Javascript thô, làm cách nào để kiểm tra xem thẻ băm cụ thể có tồn tại trong url không, sau đó lấy giá trị?

Ví dụ: http://www.example.com/index.html#hashtag1=value1&#hashtag2=value2

Tôi muốn để có thể lấy giá trị của một trong hai hashtag1 hoặc 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]; 
      } 
     })(); 
    } 

Sử dụng nó:

Kiểm tra nếu một "chìa khóa băm" đang hiện diện:

HashSearch.keyExists("thekey"); 

Lấy giá trị cho một chìa khóa băm:

HashSearch.get('thekey'); 

Đặt giá trị cho khóa băm và cập nhật hàm băm URL:

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

Di chuyển một chìa khóa băm từ URL:

HashSearch.remove('thekey'); 

Nạp lại băm vào đối tượng địa phương:

HashSearch.load(); 

Đẩy giá trị then chốt hiện nay thiết lập để băm URL:

HashSearch.push(); 

Lưu ý rằng khi một khóa không tồn tại và bạn cố gắng get nó, nó sẽ trả về undefined. Tuy nhiên, khóa có thể tồn tại không có giá trị - ví dụ: #key=val&novalue trong đó novalue là khóa không có giá trị. Nếu bạn làm HashSearch.get("novalue"), nó cũng sẽ trả lại undefined. Trong trường hợp đó, bạn nên sử dụng HashSearch.keyExists("novalue") để xác minh rằng đó thực sự là một khóa.

Answer 2

window.location.hash sẽ cung cấp cho bạn những gì bạn muốn.

Answer 3

Tôi sử dụng tính năng này và nó hoạt động tốt cho tôi. Đó là một chút điều chỉnh cho một dòng tôi nhặt ở đâu đó, tôi tin vào SO.

getURLHashParameter : function(name) { 

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

Answer 4

jQuery BBQ (nút back và truy vấn) thúc đẩy sự kiện hashchange HTML5 để cho phép đơn giản, nhưng mạnh mẽ lịch sử #hash bookmark. Ngoài ra, jQuery BBQ cung cấp một phương thức .deparam() đầy đủ, cùng với cả quản lý trạng thái băm và phân tích cú pháp chuỗi phân tách/truy vấn và trộn các phương thức tiện ích.

Tóm lại: Thư viện này cho phép bạn thay đổi động băm "chuỗi truy vấn" trong trang của bạn và có URL khớp. Nó cũng cho phép bạn tự động kéo các giá trị và bình thường hóa làm việc với "chuỗi truy vấn". Cuối cùng, nó sẽ thêm các chuỗi truy vấn vào lịch sử cho phép nút quay lại hoạt động như một điều hướng giữa các giá trị băm truy vấn trước đó.

Một động thái tốt cho UX sẽ là xem một thư viện như jQuery BBQ :)