jQueryを使用してURLからアンカーを取得するにはどうすればよいですか?


184

次のようなURLがあります。

www.example.com/task1/1.3.html#a_1

a_1jQueryを使用してアンカー値を取得して変数として格納するにはどうすればよいですか?

回答:


207

次のように.indexOf()and を使用できます.substring()

var url = "www.aaa.com/task1/1.3.html#a_1";
var hash = url.substring(url.indexOf("#")+1);

あなたはそれをここ試してみることができます、それが中にないかもしれない場合#は、次のif(url.indexOf("#") != -1)ようなチェックをしてください:

var url = "www.aaa.com/task1/1.3.html#a_1", idx = url.indexOf("#");
var hash = idx != -1 ? url.substring(idx+1) : "";

これが現在のページのURLである場合は、を使用window.location.hashして取得し、#必要に応じてを置き換えることができます。


10
注意:iFrame内からメインウィンドウのハッシュ値を取得するには、window.top.location.hash代わりにを使用する必要があります。
Paolo Stefan

1
url.split("#").pop() -遅いが簡単。
Ifch0o1

490

以下のために現在のウィンドウ、あなたはこれを使用することができます。

var hash = window.location.hash.substr(1);

メインウィンドウのハッシュ値を取得するには、次のコードを使用します。

var hash = window.top.location.hash.substr(1);

URL /ハッシュを含む文字列がある場合、最も簡単な方法は次のとおりです。

var url = 'https://www.stackoverflow.com/questions/123/abc#10076097';
var hash = url.split('#').pop();

jQueryを使用している場合は、次のようにします。

var hash = $(location).attr('hash');

1
エレガントな答え。これが機能しないケースはありますか?
sscirrus 2013年

2
ショートカットバージョンvar hash = window.location.hash.substr(1);-JSにはsubstr / substring関数が両方あるため、両者は異なりますが、この場合は同じです。
Arthur Kushman 2013

これの変更を追跡する最良の方法は何ですか。誰かが内部ページのリンクをクリックしましたか?
2016年

5
@RidIculousこれを試してください:$(window).on( 'hashchange'、function(){$( 'h1')。text(location.hash.slice(1));});
Silvio Delgado

71

使用する

window.location.hash

#を含むすべてのものを取得する


15
location.hash.slice(1)最後の文字列にハッシュタグが必要ない場合は、忘れずに使用してください。
サンディギフォード2013

39

jQueryスタイル:

$(location).attr('hash');

7
すべてのJavaScriptの問題をjqueryで解決する必要があるわけではありません。
ドキシン

22
@doxin私は同意しますが、質問は「jQueryを使用してURLからアンカーを取得する方法」です。
Valentin E

10

次の「トリック」を使用して、有効なURL を解析できます。それはを活用するアンカー要素、の特別のhref関連のプロパティhash

jQueryを使用

function getHashFromUrl(url){
    return $("<a />").attr("href", url)[0].hash.replace(/^#/, "");
}
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1

プレーンJSを使用

function getHashFromUrl(url){
    var a = document.createElement("a");
    a.href = url;
    return a.hash.replace(/^#/, "");
};
getHashFromUrl("www.example.com/task1/1.3.html#a_1"); // a_1

3

プレーンなURL文字列がある場合(したがってハッシュ属性がない場合)、正規表現を使用することもできます。

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1] 

1
2番目の要素にアクセスする前に一致が結果を取得することを確認する必要があります。そうしないと、URLにアンカーがない場合、このコードはエラーになります。
Richard Garside
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.