web-dev-qa-db-ja.com

JavaScriptを使用したURLハッシュ/フラグメント識別子の解析

JavaScript/JQueryを使用して、URLのハッシュ/フラグメントからオブジェクト/連想配列にキーペアを解析する方法を探しています

javascriptjqueryurlhashfragment-identifier
43
Yarin

チェックアウト： jQuery BBQ

jQuery BBQは、URL（クエリ文字列またはフラグメント）から解析するために設計されており、フラグメントベースの履歴を簡素化するために少し先に進んでいます。これはYarinが純粋なjsソリューションをまとめる前に探していたjQueryプラグインです。具体的には、 deparam.fragment（） 関数がジョブを実行します。ご覧ください！

（私が取り組んでいるサポートサイトは非同期検索を使用します。BBQを使用すると、オブジェクト全体をフラグメントに組み込むのが簡単になるため、検索パラメーターを「永続化」するために使用します。便利な検索をブックマークすることができます。何よりも、QAが検索の欠陥を発見した場合、問題のある結果に直接リンクできます！）

31
Hovis Biddle

これは、これから変更されています クエリ文字列パーサー ：

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 /プラグインは不要

更新：

私は今、Hovisの答えに従って jQuery BBQプラグイン を推奨しています。すべてのハッシュ解析の問題をカバーしています。

更新（2019）

どうやらURLSearchParams関数があるようです-@ -Berkantの answer をご覧ください

51
Yarin

これを純粋な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'}

16
paqogomez

jQuery URL Parser ライブラリを使用しています。

3
serg

RLSearchParams を使用します。ブラウザのカバレッジ： 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のドキュメントをチェックして、インターフェースのすべてのメソッドを確認してください。

2
Berkant

私はこの問題に対するたくさんの答えを探していて、reduceを含む1行を使用してそれらをまとめてまとめました：

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

明らかに、その1行で多くのことが行われています。それはクラリリーのためにこのように書き直すことができます：

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

この質問 に対する私の答えは、あなたが探していることをするはずです：

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

このjquery APIdoesハッシュタグの解析： 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'
});
0
SomeoneElse

クリックしたリンクまたは locatioin のこの スクロールする目次 の例で示されている.hashプロパティを使用することもできます。

0
yuvilio