如何使用jQuery从URL中获取锚点？

Question

我有一个 URL，像这样：

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

我该如何使用jQuery获取a_1锚点的值，并将其存储为变量？

- zjm1126

---

短语：window.location.hash.substring(1) 或 window.location.hash.split('#').pop(); - Avatar

Answer 1

对于当前窗口，您可以使用以下方法：

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

要获取主窗口的哈希值，请使用以下方法：

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

如果你有一个带有URL/哈希的字符串，最简单的方法是：

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

如果你正在使用jQuery，可以使用以下代码：

var hash = $(location).attr('hash');

- Silvio Delgado

---

优雅的回答。有没有任何情况下这不起作用？ - sscirrus

缩写版本 - var hash = window.location.hash.substr(1); 由于JS具有substr/substring函数，它们是不同的，但在这种情况下相同。 - Arthur Kushman

最好的跟踪此类更改的方法是什么？例如，有人点击了内部页面链接。 - Rid Iculous

请尝试这个：$(window).on('hashchange',function(){ $('h1').text(location.hash.slice(1)); });该代码会在浏览器网址中的锚点（#后面的部分）更改时，将页面中所有h1元素的文本内容更改为锚点中的文本。 - Silvio Delgado

如果哈希值可能包含空格或特殊字符，您可能需要添加 hash = hash && decodeURI(hash) 以获取原始值。 - pholpar

Answer 2

你可以使用 .indexOf() 和 .substring() 方法，如下所示：

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

您可以在这里试试，如果它可能不包含#，请像这样进行检查：if(url.indexOf("#") != -1)

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

如果这是当前页面的URL，你可以使用window.location.hash来获取它，并在需要时替换#。

- Nick Craver

---

请注意：如果要从 iFrame 内部获取主窗口的哈希值，必须使用 window.top.location.hash。 - Paolo Stefan

url.split("#").pop() - 运行慢但更简单。 - Ifch0o1

Answer 3

使用

window.location.hash

获取包括#在内的所有内容

- Real

---

记得使用 location.hash.slice(1)，如果你不想在最终字符串中包含哈希标签！ - Sandy Gifford

Answer 4

jQuery 风格：

$(location).attr('hash');

- Valentin E

---

并非每个 JavaScript 问题都需要使用 jQuery 解决。 - doxin

我同意，但问题是“如何使用jQuery从URL中获取锚点(anchor)？” - Valentin E

Answer 5

您可以使用以下“技巧”来解析任何有效的URL。它利用了锚点元素的特殊href属性hash。

使用jQuery

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

使用纯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

Answer 6

如果你只有一个普通的URL字符串（因此没有哈希属性），你也可以使用正则表达式：

var url = "www.example.com/task1/1.3.html#a_1"  
var anchor = url.match(/#(.*)/)[1] 

- DrewB

---

需要在访问其第二个元素之前检查匹配结果，否则如果URL没有锚点，此代码将出错。 - Richard Garside