Идентификатор хэша/фрагмента URL-адреса с помощью JavaScript

Ответ 1

Отъезд: jQuery BBQ

jQuery BBQ предназначен для синтаксического анализа вещей из url (строки запроса или фрагмента) и немного дальше упрощает историю на основе фрагментов. Это плагин jQuery, который ищет Ярин, прежде чем он соединит решение pure js. В частности, функция deparam.fragment() выполняет эту работу. Посмотрите!

(Сайт поддержки, на котором я работаю, использует асинхронный поиск, а потому, что BBQ делает тривиальным привязать целые объекты к фрагменту, который я использую для "сохранения" моих параметров поиска. Это дает моим пользователям историю состояний для их поиска, а также позволяет им добавлять закладки для полезных поисков. Лучше всего, когда QA обнаруживает дефект поиска, они могут напрямую ссылаться на проблемные результаты!)

Ответ 2

Вот он, измененный из этого парсера строки запроса:

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

Не требуется JQuery/плагин

Обновить:

Сейчас я рекомендую плагин jQuery BBQ в соответствии с ответом Hovis. Он охватывает все вопросы разбора хеша.

Обновление (2019)

Видимо, теперь есть функция URLSearchParams - см. Ответ от @Berkant

Ответ 3

Сделайте это в чистом Javascript:

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

становится

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

Ответ 4

Я использую библиотеку jQuery URL Parser.

Ответ 5

Я просматривал кучу ответов для этой проблемы и забирал их, используя одну строку с reduce:

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

В этой одной строке явно много. Его можно переписать следующим образом:

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

Ответ 6

Используйте URLSearchParams. Охват браузером: https://caniuse.com/#search=URLSearchParams. Он полностью поддерживается в основных браузерах.

Как читать простой ключ:

// 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

Ознакомьтесь с документами Mozilla, на которые я ссылался выше, чтобы увидеть все методы интерфейса.

Ответ 7

Мой ответ на этот вопрос должен делать то, что вы ищете:

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

Ответ 8

Вы также можете использовать свойство .hash, продемонстрированное в этом прокрутке оглавления, например, для кликнутой ссылки или для locatioin.

Ответ 9

Этот jQuery API обрабатывает хэш-теги синтаксического анализа: 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'
});

Ответ 10

Вы можете проверить jsuri. Кажется, это хорошо работает для меня.