当前位置：极客教程 > JavaScript > JavaScript 教程 > JavaScript 如何检查一个URL是否包含哈希值

JavaScript 如何检查一个URL是否包含哈希值

概述

用JavaScript检查统一资源定位器（U.R.L.）是否包含哈希值（#text），因为JavaScript包含一些预构建的方法，这使得获得某个目标成为一件简单的事情。这可以通过使用JavaScript中的哈希属性来实现，它可以通过初始化window.location对象来访问。它简化了用户界面，并提供了一个最重要的网页导航。

为了建立这个解决方案，我们需要有以下方面的知识

HTML–要建立页面的骨架。其中，我们将使用一个内部的

HTML事件（onclick(), onchange(), etc.）

JavaScript窗口对象、位置对象、哈希属性。

语法

本程序中使用的基本语法是—

window.location.hash

Window – 这是指定网络浏览器框架的JavaScript对象。它可以处理与你的浏览器有关的方法。窗口的属性可以通过以下方式访问

语法。

(window.property/methodName)

Location – 它是窗口对象的一个属性，包含关于当前网页URL的信息。

语法。

window.location.propertyName

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

算法

第1步 - 使用 **< button> **标签创建一个HTML按钮
第2步 --在按钮标签 < button onclick= ” **” **> **中插入一个 **onclick 事件，其中包含函数，如 **< button onclick= “checkHash() **” **> **。函数的名字是用户定义的，所以你可以根据自己的需要来改变。
第3步 - 创建一个JavaScript箭头函数 checkHash()。
第4步 - 使用窗口对象方法 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，输出 “没有发现hash”。

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