如何使用JavaScript检查URL是否包含哈希值

使用JavaScript检查统一资源定位器（U.R.L.）是否包含哈希值（#text）非常简单，因为JavaScript包含一些预建的方法可用于实现特定的目标。可以通过使用JavaScript中的哈希属性来实现此目的，该属性可以通过初始化window.location对象来访问。它简化了用户界面，并通过网页提供了优先导航。

要构建此解决方案，我们需要在以下主题上具备先前的知识：

HTML-用于构建页面的骨架。其中我们将使用一个内部的<script/>标签。
HTML事件（onclick()，onchange()等）
JavaScript窗口对象，位置对象，哈希属性

语法

此程序中使用的基本语法是-

window.location.hash

Window − 这是指定Web浏览器框架的JavaScript对象。它可以处理与浏览器相关的方法。可以通过window来访问窗口的属性。

语法:

(window.property/methodName)

位置 (Location) − 它是窗口对象的一个属性，包含了关于当前网页URL的信息。

语法：

window.location.propertyName

哈希 − 它是一个位置对象的属性，包含 # 后面的文本。如果URL包含“/tutorialspoint/#java”。那么location.hash将返回值”java”。

步骤

步骤1 - 使用 < button> 标签创建一个HTML按钮。
步骤2 - 在 < button onclick=“”> 标签中插入一个 onclick 事件，其中包含函数。如 < button onclick=“checkHash()”> 。函数名是自定义的，可以根据您的方便进行更改。
步骤3 - 创建一个 JavaScript 箭头函数 checkHash() 。
步骤4 - 使用 window 对象的方法 location 和 location 方法 hash 。将 window.location.hash 的结果存储在一个变量中。
步骤5 - 将变量作为条件传递给 if-else 语句。
步骤6 - 如果传递给 if-else 的变量为真，则返回“找到哈希”，否则如果变量为假，则返回“未找到哈希”。

示例

在给定的代码中，它包含一个HTML按钮，其中包含“onclick()”事件处理程序，其中给出了JavaScript用户定义的函数“checkHash()”。单击 <button> 时，将触发checkHash()函数。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Check the Hash in URL</title>
   <style>
      body{
         border: 1px solid black;
         text-align: center;
      }
   </style>
</head>
<body>
   <p>
      <strong> OUTPUT HASH- </strong>   
      <span id="outputVal" style="padding:3px;"> </span>// Output will be shown here 
   </p>
      
   <button onclick="checkHash()">Check URL Hash</button><br>
   <a href="#java">add hash(#) to url</a><br>
   
   <!-- JavaScript function starts from here -->

   <script>
      checkHash=()=>{
         var h = window.location.hash;
         if(window.location.hash){
            document.getElementById("outputVal").innerText="Hash found "+h;
            document.getElementById("outputVal").style.background="lightgreen";
         } else {
            document.getElementById("outputVal").innerText="No Hash Found";
            document.getElementById("outputVal").style.background="tomato";
         }
      }
   </script>

   <!-- JavaScript function ends here -->
</body>
</html>

点击锚文本后 –

在这种状态下，网页的URL（http://127.0.0.1:3000/index.html）在地址栏中不包含任何＃文本，如下图所示，因此window.location.hash不会在引用变量中存储任何内容，因此它返回false，并输出“找不到哈希值”。

点击锚文本后，HTML属性href =“#java”的值与当前URL连接起来，因此window.location.hash包含连接的哈希文本“＃java”，因此它返回true，哈希值存储在变量“h”中，并且“h”变量将在if-else条件中检查，其输出将显示在“outputVal” id容器中。