Синтаксический анализ URL хеш / идентификатора фрагмента с помощью JavaScript

Question

В поисках способа анализа пар ключей из хэша / фрагмента URL-адреса в объект / ассоциативный массив с помощью JavaScript / JQuery

Answer 1

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

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 согласно ответу Ховиса. Он охватывает все вопросы разбора хеша.

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

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

Answer 2

Выезд: jQuery BBQ

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

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

Answer 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'}

Answer 4

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

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

Answer 6

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

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

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

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

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

Answer 7

Этот 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'
});

Answer 8

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

Answer 9

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

Answer 10

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

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