如何从 URL 获取片段标识符(哈希 # 后的值)?

Posted

技术标签:

【中文标题】如何从 URL 获取片段标识符(哈希 # 后的值)?【英文标题】:How do I get the fragment identifier (value after hash #) from a URL? 【发布时间】:2012-07-24 15:35:42 【问题描述】:

例子:

www.site.com/index.php#hello

使用 jQuery,我想将值 hello 放入变量中:

var type = …

【问题讨论】:

我不确定,这个问题是否应该继续被标记为 jQuery 并询问它。大多数答案都适用于没有 jQuery 的 JS,这似乎是一个很好的欺骗目标。 【参考方案1】:

不需要 jQuery

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

【讨论】:

没有足够的 jQuery! (开个玩笑:+1。) 我刚刚了解到 # 可以用作“哈希”,它在 javascript 中用作标识符/关键字。太棒了 您也可以使用.slice(1) 代替.substr(1),这应该会稍微提高性能,尽管它在现实生活中没有任何区别。 天啊,您需要检查多少次 url 哈希才能产生明显的差异?一百万?在这种情况下,“适度增加”是一个巨大的夸大其词。 :-) 来自变量的 URL 怎么样?此答案仅适用于当前的 window.location 值。【参考方案2】:

您可以使用以下代码来完成:

var url = "www.site.com/index.php#hello";
var hash = url.substring(url.indexOf('#')+1);
alert(hash);

SEE DEMO

【讨论】:

注意:IE8不支持indexOf @SchalkKeun 幸运的是,现在在 18 年它几乎消失了。但是对于那些仍然需要处理那个传说的人来说应该意识到它。 老实说,IE8 太不安全了,所有支付网关基本上都会在下周(2018 年 6 月 30 日)放弃任何不支持 TLS 1.2 的浏览器,你将无法从他们那里进行支付一点也不。因此,所有这些旧的蹩脚浏览器对于任何电子商务客户端都毫无用处。【参考方案3】:
var url ='www.site.com/index.php#hello';
var type = url.split('#');
var hash = '';
if(type.length > 1)
  hash = type[1];
alert(hash);

jsfiddle 上的工作演示

【讨论】:

if 语句可以缩短为var hash = type[1] || "";【参考方案4】:

这很容易。试试下面的代码

$(document).ready(function()
  var hashValue = location.hash.replace(/^#/, '');  
  //do something with the value here  
);

【讨论】:

var hashValue = location.hash.replace(/^#/, '');【参考方案5】:

使用以下 JavaScript 从 URL 获取哈希 (#) 后的值。你不需要为此使用 jQuery。

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

我从这里得到了这个代码和教程 - How to get hash value from URL using JavaScript

【讨论】:

【参考方案6】:

我有运行时的 URL,下面给出了正确答案:

let url = "www.site.com/index.php#hello";
alert(url.split('#')[1]);

希望对你有帮助

【讨论】:

【参考方案7】:

根据 A.K 的代码,这里有一个辅助函数。 JS Fiddle Here (http://jsfiddle.net/M5vsL/1/) ...

// Helper Method Defined Here.
(function (helper, $) 
    // This is now a utility function to "Get the Document Hash"
    helper.getDocumentHash = function (urlString) 
        var hashValue = "";

        if (urlString.indexOf('#') != -1) 
            hashValue = urlString.substring(parseInt(urlString.indexOf('#')) + 1);
        
        return hashValue;
    ;
)(this.helper = this.helper || , jQuery);

【讨论】:

【参考方案8】:

获取当前文档位置的片段

var hash = window.location.hash;

从字符串中获取片段

// absolute
var url = new URL('https://example.com/path/index.html#hash');

console.log(url.hash);

// relative (second param is required, use any valid URL base)
var url2 = new URL('/path/index.html#hash2', 'http://example');

console.log(url2.hash);

【讨论】:

以上是关于如何从 URL 获取片段标识符(哈希 # 后的值)?的主要内容,如果未能解决你的问题,请参考以下文章

如何从URL获取片段标识符(hash#之后的值)?

javascript 从URL哈希获取Key的值

获取 URL 哈希位置,并在 jQuery 中使用它

URL的PHP​​和哈希/片段部分

下文中的哈希片段指的是啥?

从 AngularJS url 中删除片段标识符(# 符号)