如何使用JavaScript检查URL中的#哈希？

简单使用位置哈希：

if(window.location.hash) {// Fragment exists} else {// Fragment doesn't exist}

你试过这个吗？

if (url.indexOf('#') !== -1) {// Url contains a #}

（其中url显然是您要检查的URL。）

写出以下内容：

<script type="text/javascript">if (location.href.indexOf("#") != -1) {// Your code in here accessing the string like this// location.href.substr(location.href.indexOf("#"))}</script>

以下是您可以定期检查哈希变化的方法，然后调用函数来处理哈希值。

var hash = false;checkHash();
function checkHash(){if(window.location.hash != hash) {hash = window.location.hash;processHash(hash);} t=setTimeout("checkHash()",400);}
function processHash(hash){alert(hash);}

  if(window.location.hash) {var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # characteralert (hash);// hash found} else {// No hash found}

$('#myanchor').click(function(){window.location.hash = "myanchor"; //set hashreturn false; //disables browser anchor jump behavior});$(window).bind('hashchange', function () { //detect hash changevar hash = window.location.hash.slice(1); //hash to string (= "myanchor")//do sth here, hell yeah!});

这将解决问题；）

上面Partridge和Gareths的评论很棒。他们应该得到一个单独的答案。显然，哈希和搜索属性可用于任何html链接对象：

<a id="test" href="foo.html?bar#quz">test</a><script type="text/javascript">alert(document.getElementById('test').search); //baralert(document.getElementById('test').hash); //quz</script>

或

<a href="bar.html?foo" onclick="alert(this.search)">SAY FOO</a>

如果您需要在常规字符串变量上使用它并且碰巧有jQuery，这应该工作：

var mylink = "foo.html?bar#quz";
if ($('<a href="'+mylink+'">').get(0).search=='bar')) {// do stuff}

（但它可能有点过头了…）

如果URI不是文档的位置，则此代码段将执行您想要的操作。

var url = 'example.com/page.html#anchor',hash = url.split('#')[1];
if (hash) {alert(hash)} else {// do something else}

…或者有一个jQuery选择器：

$('a[href^="#"]')

通常点击比位置更改先发生，所以点击后设置TimeOut是个好主意更新window.location.hash

$(".nav").click(function(){setTimeout(function(){updatedHash = location.hash},100);});

或者您可以使用以下命令收听位置：

window.onhashchange = function(evt){updatedHash = "#" + evt.newURL.split("#")[1]};

我写了一个jQuery插件，类似于你想做什么？

这是一个简单的锚路由器。

window.location.hash

将返回哈希标识符

function getHash() {if (window.location.hash) {var hash = window.location.hash.substring(1);
if (hash.length === 0) {return false;} else {return hash;}} else {return false;}}

var requestedHash = ((window.location.hash.substring(1).split("#",1))+"?").split("?",1);

大多数人都知道document.location.中的URL属性如果你只对当前页面感兴趣，那就太好了。但问题是能够解析页面上的锚点，而不是页面本身。

大多数人似乎错过的是，这些相同的URL属性也可用于锚点元素：

// To process anchors on clickjQuery('a').click(function () {if (this.hash) {// Clicked anchor has a hash} else {// Clicked anchor does not have a hash}});
// To process anchors without waiting for an eventjQuery('a').each(function () {if (this.hash) {// Current anchor has a hash} else {// Current anchor does not have a hash}});

将其作为从任意类URI字符串中抽象位置属性的方法抛入此处。尽管window.location instanceof Location为真，但任何调用Location的尝试都会告诉您这是一个非法构造函数。您仍然可以通过将字符串设置为DOM锚点元素的href属性来获得hash、query、protocol等内容，然后它将与window.location共享所有地址属性。

最简单的方法是：

var a = document.createElement('a');a.href = string;
string.hash;

为了方便起见，我写了一个小库，利用它将本机Location构造函数替换为一个将接受字符串并生成window.location类对象的构造函数：Location.js

有时您会得到完整的查询字符串，例如“#anchorlink？first name=mark”

这是我获取哈希值的脚本：

var hashId = window.location.hash;hashId = hashId.match(/#[^?&\/]*/g);
returns -> #anchorlink

这是一个返回true或false的简单函数（有/没有主题标签）：

var urlToCheck = 'http://www.domain.com/#hashtag';
function hasHashtag(url) {return (url.indexOf("#") != -1) ? true : false;}
// Conditionif(hasHashtag(urlToCheck)) {// Do something if has}else {// Do something if doesn't}

在这种情况下返回true。

基于@jon-skeet的评论。

这是对当前页面URL进行测试的简单方法：

  function checkHash(){return (location.hash ? true : false);}

您可以使用现代js解析URL：

var my_url = new URL('http://www.google.sk/foo?boo=123#baz');
my_url.hash; // outputs "#baz"my_url.pathname; // outputs "/moo"​my_url.protocol; // "http:"​my_url.search; // outputs "?doo=123"

没有哈希的URL将返回空字符串。

我注意到所有这些答案大多检查window.location.hash，使编写测试变得困难。

 const hasHash = string => string.includes('#')

您也可以像这样从url中删除哈希：

const removeHash = string => {const [url] = string.split('#')return url}

最后，您可以将逻辑组合在一起：

if(hasHash(url)) {url = removeHash(url)}