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?

javascript jquery url anchor zjm1126
quelle

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.

Nick Craver
quelle
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');
Silvio Delgado
quelle
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 #

Real
quelle
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');
Valentin E.
quelle
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
David Murdoch
quelle
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]
DrewB
quelle
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