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

— zjm1126
fuente

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