Como obter a âncora da URL usando o jQuery?

184

Eu tenho um URL que é como:

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

Como posso obter o a_1valor âncora usando jQuery e armazená-lo como uma variável?

javascript jquery url anchor zjm1126
fonte

Respostas:

207

Você pode usar o .indexOf()e .substring(), assim:

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

Você pode experimentá-lo aqui , se não houver um #, faça uma if(url.indexOf("#") != -1)verificação como esta:

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

Se esse for o URL da página atual , você pode simplesmente usá window.location.hash-lo e substituí-lo, #se desejar.

Nick Craver
fonte
10
Observe: para obter o valor do hash da janela principal de dentro de um iFrame, você deve usá-lo window.top.location.hash.
Paolo Stefan
1
url.split("#").pop() - Mais lento, mas mais fácil.
Ifch0o1 01/02/19
490

Para a janela atual , você pode usar isto:

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

Para obter o valor do hash da janela principal , use o seguinte:

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

Se você possui uma string com um URL / hash, o método mais fácil é:

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

Se você estiver usando jQuery, use o seguinte:

var hash = $(location).attr('hash');
Silvio Delgado
fonte
1
Resposta elegante. Existem casos em que isso não funciona?
Sscirrus 27/05
2
versão de atalho - var hash = window.location.hash.substr(1);por causa de um JS ter ambas as funções substr / substring, elas são diferentes, mas, neste caso, as mesmas.
Arthur Kushman
qual é a melhor maneira de acompanhar as mudanças disso, ie. alguém clicou em um link da página interna?
Rid Iculous
5
@RidIculous tente isso: $ (window) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
Silvio Delgado
71

Usar 

window.location.hash

para recuperar tudo além e incluindo o #

Real
fonte
15
Lembre- location.hash.slice(1)se de usar se você não quiser a tag hash na string final!
23713 Sandy Gifford
39

estilo jQuery:

$(location).attr('hash');
Namorados
fonte
7
nem todo problema javascript precisa ser resolvido com o jquery.
Doxin
22
@doxin Concordo, mas a pergunta é "Como obter a âncora a partir da URL usando o jQuery?"
Valentin E
10

Você pode usar o seguinte "truque" para analisar qualquer URL válido. Aproveita a propriedade especial relacionada ao href do elemento anchorhash ,.

Com jQuery

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

Com JS simples

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

Se você apenas possui uma string de URL simples (e, portanto, não possui um atributo hash), também pode usar uma expressão regular:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1]
DrewB
fonte
1
É necessário verificar se a correspondência obtém resultados antes de acessar o segundo elemento dela, ou esse código ocorrerá erro se o URL não tiver âncora.
Richard Garside