如何从URL哈希值中提取参数并动态显示在HTML标签内

2026-01-30 00:00:00 作者：碧海醫心

本文介绍如何使用javascript安全、简洁地获取url中#号后的字符串（即hash值），并将其插入到html的``标签中，实现如“welcome john”这类动态欢迎语效果。

在单页应用或轻量级页面交互中，常通过URL哈希（#后的内容）传递临时参数，例如 https://example.com/welcome.html#Alice。此时，我们希望将 Alice 提取出来，并渲染到页面中，如 Welcome Alice。

✅ 正确提取哈希值的方法

浏览器原生提供 location.hash 属性，它返回包含 # 的完整哈希字符串（如 #Alice）。要获取纯名称，需去掉开头的 #：

const name = location.hash.substring(1); // 推荐：更语义化，兼容性好
// 或
const name = location.hash.slice(1);       // 简洁等效写法
// 注意：避免使用 substr(1)，因该方法已废弃且在空hash时可能出错

? 完整可运行示例



Welcome Page

  Welcome

? 测试方式：直接在浏览器地址栏输入 your
-page.html#Sarah，刷新后页面将显示 Welcome Sarah。

⚠️ 注意事项

location.hash 在页面加载时即可访问，无需等待 DOMContentLoaded，但为保险起见，建议确保DOM元素已存在（如上例中先定义再执行脚本）。
若URL无哈希（如 ...html），location.hash 返回空字符串 ""，slice(1) 会返回空字符串，因此需提供默认值（如 'Guest'）。
安全性提醒：哈希内容可被用户任意修改，切勿直接用于权限判断或服务端逻辑；若需传递敏感信息，请改用查询参数（?name=）并配合后端验证。

掌握这一技巧，你就能轻松实现基于URL的轻量个性化展示——简洁、可靠、无需服务器参与。