Получить значение определенного хеш-тега из URL - PullRequest
Новая
       13

Получить значение определенного хеш-тега из URL

6 голосов
/ 16 сентября 2010

В сыром Javascript, как можно проверить, существует ли в URL определенный хэш-тег, а затем получить значение?

Пример: http://www.example.com/index.html#hashtag1=value1&#hashtag2=value2

Я хочучтобы получить значение hashtag1 или hashtag2 .

Ответы [ 4 ]

26 голосов
/ 16 сентября 2010 
    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];
           }
       })();
    }

Используя это :

Проверьте, присутствует ли «хэш-ключ»: 

 HashSearch.keyExists("thekey");

Получить значение для хеш-ключа: 

 HashSearch.get('thekey');

Установите значение для ключа хеша и обновите хеш URL: 

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

Удалить хеш-ключ из URL: 

 HashSearch.remove('thekey');

Перезагрузите хеш в локальный объект: 

 HashSearch.load();

Нажмите текущее значение ключа, установленное для хэша URL: 

 HashSearch.push();

Обратите внимание, что если ключ не существует и вы пытаетесь get его получить, он вернет undefined. Однако ключ может существовать без значения - например, #key=val&novalue, где novalue - это ключ без значения. Если вы сделаете HashSearch.get("novalue"), он также вернет undefined. В этом случае вы должны использовать HashSearch.keyExists("novalue"), чтобы убедиться, что это действительно ключ.

10 голосов
/ 25 августа 2011

Я использую это, и оно прекрасно работает для меня. Это немного приспосабливается к линии, которую я где-то взял, я полагаю, на SO. 

getURLHashParameter : function(name) {

        return decodeURI(
            (RegExp('[#|&]' + name + '=' + '(.+?)(&|$)').exec(location.hash)||[,null])[1]
        );
    },
7 голосов
/ 16 сентября 2010

window.location.hash должен дать вам то, что вы хотите.

0 голосов
/ 31 января 2012

jQuery BBQ (кнопка «Назад» и запрос) использует событие хеширования HTML5, чтобы сделать возможной простую, но мощную историю закладок #hash.Кроме того, jQuery BBQ предоставляет полный метод .deparam (), а также методы управления состоянием хеш-функции и утилиты разбора и слияния фрагмента / запроса.

Вкратце: эта библиотека позволяет динамически изменять хэш"Строка запроса" на вашей странице, и URL-адрес совпадает.Это также позволяет вам динамически извлекать значения и нормализует работу со «строкой запроса».Наконец, он добавит строки запросов в историю, что позволит кнопке «Назад» функционировать в качестве навигации между предыдущими значениями хеш-запроса.

Хорошим шагом для UX будет проверка библиотеки, такой как jQuery BBQ:)

...