Comment obtenir l'ancre de l'URL en utilisant jQuery?

184

J'ai une URL qui ressemble à:

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

Comment puis-je obtenir la a_1valeur d'ancrage à l'aide de jQuery et la stocker en tant que variable?

javascript jquery url anchor zjm1126
la source

Réponses:

207

Vous pouvez utiliser .indexOf()et .substring(), comme ceci:

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

Vous pouvez l'essayer ici , s'il n'y #en a pas, faites une if(url.indexOf("#") != -1)vérification comme celle-ci:

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

S'il s'agit de l' URL de la page actuelle , vous pouvez simplement l'utiliser window.location.hashpour l'obtenir et le remplacer #si vous le souhaitez.

Nick Craver
la source
10
Remarque: pour obtenir la valeur de hachage de la fenêtre principale depuis l'intérieur d'un iFrame, vous devez utiliser à la window.top.location.hashplace.
Paolo Stefan
1
url.split("#").pop() - Plus lent mais plus facile.
Ifch0o1
490

Pour la fenêtre actuelle , vous pouvez utiliser ceci:

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

Pour obtenir la valeur de hachage de la fenêtre principale , utilisez ceci:

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

Si vous avez une chaîne avec une URL / hachage, la méthode la plus simple est:

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

Si vous utilisez jQuery, utilisez ceci:

var hash = $(location).attr('hash');
Silvio Delgado
la source
1
Réponse élégante. Y a-t-il des cas où cela ne fonctionne pas?
sscirrus
2
version de raccourci - en var hash = window.location.hash.substr(1);raison d'un JS ont les deux fonctions substr / substring, elles sont différentes, mais dans ce cas les mêmes.
Arthur Kushman
quelle est la meilleure façon de suivre les changements de cela, à savoir. quelqu'un a cliqué sur un lien de page intérieure?
Rid Iculous
5
@RidIculous essayez ceci: $ (window) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
Silvio Delgado
71

Utilisation 

window.location.hash

pour tout récupérer au-delà et y compris le #

Réel
la source
15
N'oubliez pas d'utiliser location.hash.slice(1)si vous ne voulez pas la balise de hachage dans la chaîne finale!
Sandy Gifford
39

Style jQuery:

$(location).attr('hash');
Valentin E
la source
7
tous les problèmes javascript ne doivent pas être résolus avec jquery.
doxin
22
@doxin Je suis d'accord mais la question est "Comment obtenir l'ancre de l'URL en utilisant jQuery?"
Valentin E
10

Vous pouvez utiliser l'astuce suivante pour analyser toute URL valide. Il profite de l' élément d'ancrage propriété particulière liée à href de, hash.

Avec jQuery

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

Avec JS uni

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
la source
3

Si vous avez juste une chaîne d'url simple (et donc n'avez pas d'attribut de hachage), vous pouvez également utiliser une expression régulière:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1]
DrewB
la source
1
Il faut vérifier que la correspondance obtient des résultats avant d'accéder au deuxième élément de celui-ci, sinon ce code provoquera une erreur si l'URL n'a pas d'ancrage.
Richard Garside