¿Cómo obtener el ancla de la URL usando jQuery?

184

Tengo una URL que es como:

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

¿Cómo puedo obtener el a_1valor de anclaje usando jQuery y almacenarlo como una variable?

javascript jquery url anchor zjm1126
fuente

Respuestas:

207

Puede usar .indexOf()y .substring(), así:

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

Puede intentarlo aquí , si no tiene una #, haga una if(url.indexOf("#") != -1)comprobación como esta:

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

Si esta es la URL de la página actual , puede usarla window.location.hashpara obtenerla y reemplazarla #si lo desea.

Nick Craver
fuente
10
Tenga en cuenta: para obtener el valor hash de la ventana principal desde el interior de un iFrame, debe usar window.top.location.hashen su lugar.
Paolo Stefan
1
url.split("#").pop() - Más lento pero más fácil.
Ifch0o1
490

Para la ventana actual , puede usar esto:

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

Para obtener el valor hash de la ventana principal , use esto:

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

Si tiene una cadena con una URL / hash, el método más fácil es:

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

Si está utilizando jQuery, use esto:

var hash = $(location).attr('hash');
Silvio Delgado
fuente
1
Respuesta elegante ¿Hay algún caso en el que esto no funcione?
sscirrus
2
versión de acceso directo: var hash = window.location.hash.substr(1);debido a que un JS tiene ambas funciones substr / substring, son diferentes, pero en este caso son las mismas.
Arthur Kushman
¿Cuál es la mejor manera de hacer un seguimiento de los cambios de esto, es decir. alguien hizo clic en el enlace de una página interna?
Rid Iculous
55
@RidIculous intente esto: $ (ventana) .on ('hashchange', function () {$ ('h1'). Text (location.hash.slice (1));});
Silvio Delgado
71

Utilizar 

window.location.hash

para recuperar todo más allá e incluir el #

Real
fuente
15
¡Recuerde usar location.hash.slice(1)si no desea la etiqueta hash en la cadena final!
Sandy Gifford
39

Estilo jQuery:

$(location).attr('hash');
Valentin E
fuente
77
No todos los problemas de JavaScript deben resolverse con jquery.
doxin
22
@doxin Estoy de acuerdo pero la pregunta es "¿Cómo obtener el ancla de la URL usando jQuery?"
Valentin E
10

Puede usar el siguiente "truco" para analizar cualquier URL válida. Se aprovecha del elemento de anclaje propiedad href relacionada con especial 's, hash.

Con jQuery

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

Con simple 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
fuente
3

Si solo tiene una cadena de URL simple (y, por lo tanto, no tiene un atributo hash), también puede usar una expresión regular:

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1]
DrewB
fuente
1
Es necesario verificar que la coincidencia obtenga resultados antes de acceder al segundo elemento, o este código generará un error si la url no tiene ancla.
Richard Garside