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

Question

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

score 54 · Accepted Answer

これは、このクエリ文字列パーサーから変更されたものです。

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 からの回答を参照してください

score 37 · Accepted Answer

URLSearchParamsを使用します。ブラウザのカバレッジ: https://caniuse.com/urlsearchparams . 主要なブラウザで完全にサポートされています。サポートされていないブラウザでこれを使用する必要がある場合は、ポリフィルを次に示します。

単純なキーの読み方:

// window.location.hash = "#any_hash_key=any_value"

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

console.log(parsedHash.get("any_hash_key")); // any_value

上でリンクした Mozilla ドキュメントをチェックして、インターフェイスのすべてのメソッドを確認してください。

score 31 · Accepted Answer

チェックアウト：jQuery BBQ

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

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

score 3 · Accepted Answer

3

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

于 2010-11-16T18:44:39.997 に答える

score 2 · Accepted Answer

私はこの問題に対する多くの答えを調べていて、次のような1行を使用してそれらをまとめましたreduce。

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

score -2 · Accepted Answer

-2

jsuriをチェックしてみてください。私にはうまくいくようです。

于 2012-11-05T21:29:11.203 に答える

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

10 に答える 10

Related

Reference