Bagaimana cara mendapatkan jangkar dari URL menggunakan jQuery?

184

Saya memiliki URL yang seperti:

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

Bagaimana saya bisa mendapatkan nilai a_1jangkar menggunakan jQuery dan menyimpannya sebagai variabel?

javascript jquery url anchor zjm1126
sumber

Jawaban:

207

Anda dapat menggunakan .indexOf()dan .substring(), seperti ini:

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

Anda dapat mencobanya di sini , jika mungkin tidak ada #di dalamnya, lakukan if(url.indexOf("#") != -1)pemeriksaan seperti ini:

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

Jika ini adalah URL halaman saat ini , Anda bisa menggunakannya window.location.hashuntuk mendapatkannya, dan ganti #jika Anda mau.

Nick Craver
sumber
10
Harap dicatat: untuk mendapatkan nilai hash dari jendela utama dari dalam iFrame, Anda harus menggunakannya window.top.location.hash.
Paolo Stefan
1
url.split("#").pop() - Lebih lambat tapi lebih mudah.
Ifch0o1
490

Untuk jendela saat ini , Anda dapat menggunakan ini:

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

Untuk mendapatkan nilai hash dari jendela utama , gunakan ini:

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

Jika Anda memiliki string dengan URL / hash, metode termudah adalah:

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

Jika Anda menggunakan jQuery, gunakan ini:

var hash = $(location).attr('hash');
Silvio Delgado
sumber
1
Jawaban elegan. Apakah ada kasus di mana ini tidak berhasil?
sscirrus
2
versi pintasan - var hash = window.location.hash.substr(1);karena JS memiliki kedua fungsi substr / substring, keduanya berbeda, tetapi dalam hal ini sama.
Arthur Kushman
apa cara terbaik untuk melacak perubahan ini, yaitu. seseorang mengklik tautan halaman-dalam?
Singkirkan Iculous
5
@RidIculous coba ini: $ (window) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
Silvio Delgado
71

Menggunakan 

window.location.hash

untuk mengambil semuanya di luar dan termasuk #

Nyata
sumber
15
Ingatlah untuk menggunakan location.hash.slice(1)jika Anda tidak ingin tag hash di string terakhir!
Sandy Gifford
39

gaya jQuery:

$(location).attr('hash');
Valentin E
sumber
7
tidak setiap masalah javascript perlu diselesaikan dengan jquery.
doxin
22
@doxin Saya setuju tetapi pertanyaannya adalah "Bagaimana cara mendapatkan jangkar dari URL menggunakan jQuery?"
Valentin E
10

Anda dapat menggunakan "trik" berikut untuk mem - parsing URL yang valid. Ini mengambil keuntungan dari properti yang berhubungan dengan href khusus elemen anchorhash ,.

Dengan jQuery

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

Dengan JS polos

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
David Murdoch
sumber
3

Jika Anda hanya memiliki string url biasa (dan karena itu tidak memiliki atribut hash) Anda juga dapat menggunakan ekspresi reguler:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1]
DrewB
sumber
1
Perlu memeriksa bahwa kecocokan mendapatkan hasil sebelum mengakses elemen kedua, atau kode ini akan salah jika url tidak memiliki jangkar.
Richard Garside