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

Posted 2023-02-22

【中文标题】如何使用 jQuery 从 URL 中获取锚点？

【英文标题】：How to get the anchor from the URL using jQuery?

【发布时间】：2011-04-02 22:47:02

【问题描述】：

我有一个类似的 URL：

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

如何使用 jQuery 获取 a_1 锚值并将其存储为变量？

【参考方案1】：

你可以使用.indexOf()和.substring()，像这样：

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

You can give it a try here，如果其中可能没有#，请像这样检查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 获取它，如果您愿意，可以替换 #。

【讨论】：

请注意：要从 iFrame 中获取主窗口的哈希值，您必须改用 window.top.location.hash。

url.split("#").pop() - 更慢但更容易。

【参考方案2】：

对于当前窗口，你可以使用这个：

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

要获取主窗口的哈希值，请使用：

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

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

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

如果您使用的是 jQuery，请使用：

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

【讨论】：

优雅的答案。有没有这种方法不起作用的情况？

快捷版 - var hash = window.location.hash.substr(1); 因为一个 JS 有两个 substr/substring 函数，它们是不同的，但在这种情况下是一样的。

什么是跟踪变化的最佳方式，即。有人点击了内页链接？

@RidIculous 试试这个： $(window).on('hashchange',function() $('h1').text(location.hash.slice(1)); );

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

【参考方案3】：

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

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

【讨论】：

在访问第二个元素之前需要检查匹配是否得到结果，否则如果 url 没有锚，则此代码将出错。

【参考方案4】：

使用

window.location.hash

检索超出并包括#的所有内容

【讨论】：

如果您不希望在最终字符串中包含井号标签，请记住使用location.hash.slice(1)！

【参考方案5】：

jQuery 风格：

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

【讨论】：

不是每个javascript问题都需要用jquery来解决。

@doxin 我同意，但问题是“如何使用 jQuery 从 URL 中获取锚点？”

【参考方案6】：

您可以使用以下“技巧”来解析任何有效的 URL。它利用了anchor element 的特殊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