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