Wie erhalte ich den Anker mit jQuery von der URL?


184

Ich habe eine URL, die wie folgt lautet:

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

Wie kann ich den a_1Ankerwert mit jQuery abrufen und als Variable speichern?

Antworten:


206

Sie können das .indexOf()und .substring()wie folgt verwenden:

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

Sie können es hier ausprobieren . Wenn es möglicherweise keine enthält #, führen Sie eine if(url.indexOf("#") != -1)Überprüfung wie folgt durch:

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

Wenn dies die aktuelle Seiten-URL ist, können Sie sie einfach verwenden window.location.hash, um sie abzurufen und die URL zu ersetzen, #wenn Sie dies wünschen.


10
Bitte beachten Sie: Um den Hash-Wert des Hauptfensters in einem iFrame abzurufen, müssen Sie window.top.location.hashstattdessen verwenden.
— Paolo Stefan

1
url.split("#").pop() - Langsamer aber einfacher.
— Ifch0o1

489

Für das aktuelle Fenster können Sie Folgendes verwenden:

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

Verwenden Sie Folgendes , um den Hash-Wert des Hauptfensters abzurufen:

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

Wenn Sie eine Zeichenfolge mit einer URL / einem Hash haben, ist die einfachste Methode:

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

Wenn Sie jQuery verwenden, verwenden Sie Folgendes:

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

1
Elegante Antwort. Gibt es Fälle, in denen dies nicht funktioniert?
— sscirrus

2
Verknüpfungsversion - var hash = window.location.hash.substr(1);Da ein JS beide Teilzeichenfolgen- / Teilzeichenfolgenfunktionen hat, sind sie unterschiedlich, in diesem Fall jedoch gleich.
— Arthur Kushman

Was ist der beste Weg, um Änderungen zu verfolgen, dh. hat jemand auf einen innerseitigen Link geklickt?
— Rid Iculous

5
@RidIculous versuchen Sie Folgendes: $ (window) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
— Silvio Delgado

71

Verwenden

window.location.hash

um alles darüber hinaus abzurufen, einschließlich des #


15
Denken location.hash.slice(1)Sie daran, es zu verwenden, wenn Sie das Hash-Tag nicht in der letzten Zeichenfolge haben möchten!
— Sandy Gifford

39

jQuery-Stil:

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

7
Nicht jedes Javascript-Problem muss mit jquery gelöst werden.
— Doxin

22
@doxin Ich stimme zu, aber die Frage ist "Wie bekomme ich den Anker von der URL mit jQuery?"
— Valentin E

10

Sie können den folgenden "Trick" verwenden, um eine gültige URL zu analysieren . Es nutzt das Ankerelement , das Besondere href bezogenen Sach hash.

Mit jQuery

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

Mit einfachem 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

Wenn Sie nur eine einfache URL-Zeichenfolge haben (und daher kein Hash-Attribut haben), können Sie auch einen regulären Ausdruck verwenden:

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

1
Sie müssen überprüfen, ob die Übereinstimmung Ergebnisse liefert, bevor Sie auf das zweite Element zugreifen. Andernfalls tritt ein Fehler auf, wenn die URL keinen Anker enthält.
— Richard Garside
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.