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?

— zjm1126
source

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