在前端开发过程中，我们经常需要从 URL 中获取信息来实现一些功能，其中哈希（hash）和片段标识符（fragment identifier）是常见的 URL 组成部分之一。本文将介绍如何使用 JavaScript 解析 URL 中的哈希和片段标识符，并展示一些示例代码。
什么是哈希和片段标识符？
URL 中的哈希指的是 # 符号后面的字符，例如以下 URL：
https://www.example.com/#section1
其中，#section1 就是哈希。通常用于在网页中定位到某个特定的元素或锚点。
片段标识符也是以 # 开头，但与哈希不同的是，它跟在哈希后面，例如：
https://www.example.com/page.html#section1?param=value
其中，#section1?param=value 是片段标识符。
如何解析 URL 中的哈希和片段标识符？
使用 window.location
JavaScript 提供了一个 window.location 对象，可以用来获取当前页面的 URL 和其他相关信息。要获取 URL 中的哈希或片段标识符，可以使用以下代码：
// 获取当前页面的哈希 const hash = window.location.hash; // 获取当前页面的片段标识符 const fragmentIdentifier = window.location.fragmentIdentifier;
使用正则表达式
如果需要更灵活的解析 URL 中的哈希或片段标识符，可以使用正则表达式。以下代码演示了如何使用正则表达式从 URL 中提取哈希和片段标识符：
// 从 URL 中提取哈希 const hash = window.location.href.match(/#(.*)$/)[1]; // 从 URL 中提取片段标识符 const fragmentIdentifier = window.location.href.match(/#.*\?(.*)$/)[1];
这里使用了正则表达式来匹配 URL 中的哈希或片段标识符，并将其作为数组的第二个元素返回。
使用 URLSearchParams
如果片段标识符包含查询参数，可以使用 JavaScript 中的 URLSearchParams 对象来解析它们。以下代码演示了如何使用 URLSearchParams 解析片段标识符中的查询参数：
// 获取当前页面的片段标识符
const fragmentIdentifier = window.location.fragmentIdentifier;
// 创建 URLSearchParams 对象
const searchParams = new URLSearchParams(fragmentIdentifier);
// 获取查询参数值
const paramValue = searchParams.get('param');这里首先获取了当前页面的片段标识符，然后创建了一个 URLSearchParams 对象来解析其中的查询参数。最后，可以使用 get() 方法来获取特定查询参数的值。
示例代码
下面是一些示例代码，演示了如何使用 JavaScript 解析 URL 中的哈希和片段标识符。
获取当前页面的哈希
const hash = window.location.hash; console.log(hash); // #section1
获取当前页面的片段标识符
const fragmentIdentifier = window.location.fragmentIdentifier; console.log(fragmentIdentifier); // #section1?param=value
使用正则表达式从 URL 中提取哈希和片段标识符
-- -------------------- ---- ------- ----- --- - --------------------------------------------------------- -- - --- ----- ----- ---- - ----------------------- -- - --- -------- ----- ------------------ - --------------------------- ------------------ -- --------- -------------------------------- -- -----------
使用 URLSearchParams 解析片段标识符中的查询参数
-- -------------------- ---- ------- ----- ------------------ - ------------------------ -- -- --------------- -- ----- ------------ - --- ------------------------------------ -- ------- ----- - ----------------------------------------------------------- -------- ----------------------------------------------------------------------------------