JavaScript/JQueryを使用して、URLのハッシュ/フラグメントからオブジェクト/連想配列にキーペアを解析する方法を探しています
チェックアウト: jQuery BBQ
jQuery BBQは、URL(クエリ文字列またはフラグメント)から解析するために設計されており、フラグメントベースの履歴を簡素化するために少し先に進んでいます。これはYarinが純粋なjsソリューションをまとめる前に探していたjQueryプラグインです。具体的には、 deparam.fragment() 関数がジョブを実行します。ご覧ください!
(私が取り組んでいるサポートサイトは非同期検索を使用します。BBQを使用すると、オブジェクト全体をフラグメントに組み込むのが簡単になるため、検索パラメーターを「永続化」するために使用します。便利な検索をブックマークすることができます。何よりも、QAが検索の欠陥を発見した場合、問題のある結果に直接リンクできます!)
これは、これから変更されています クエリ文字列パーサー :
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 をご覧ください
これを純粋な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'}
jQuery URL Parser ライブラリを使用しています。
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のドキュメントをチェックして、インターフェースのすべてのメソッドを確認してください。
私はこの問題に対するたくさんの答えを探していて、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);
}, {});
この質問 に対する私の答えは、あなたが探していることをするはずです:
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;
};
この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'
});