How to get the fragment identifier from a URL ? - GeeksforGeeks

19 Dec, 2019
A fragment identifier is a string of characters that refers to a resource that is inferior to a primary resource.
Approach 1: We are able to print the fragment identifier by defining a new variable as location.hash and then displaying it with the help of document.getElementbyId() method.Syntax:var x =  location.hash;
document.getElementById("demo").innerHTML = x;Example: In this example, we will use location.hash property.<!DOCTYPE html><html>  <head>    <title>        How to get the fragment        identifier from a URL?    </title></head>  <body style = "text-align:center;">                   <h1 style = "color:green;" >         GeeksForGeeks    </h1>       <button onclick="GFG()">        Try it    </button>          <p id="demo"></p>          <script>        function GFG() {            location.hash = "#fragment_identifier";            var x = location.hash;                          document.getElementById(                    "demo").innerHTML = x;        }    </script></body>  </html>Output:Before clicking the button:After clicking the button:
Syntax:
var x =  location.hash;
document.getElementById("demo").innerHTML = x;
Example: In this example, we will use location.hash property.
<!DOCTYPE html><html>  <head>    <title>        How to get the fragment        identifier from a URL?    </title></head>  <body style = "text-align:center;">                   <h1 style = "color:green;" >         GeeksForGeeks    </h1>       <button onclick="GFG()">        Try it    </button>          <p id="demo"></p>          <script>        function GFG() {            location.hash = "#fragment_identifier";            var x = location.hash;                          document.getElementById(                    "demo").innerHTML = x;        }    </script></body>  </html>
Output:
Before clicking the button:
After clicking the button:
Approach 2: We have defined a variable hash which stores whatever is after the # in the URL i.e. the fragment identifier and then we display it as an alert. It is done by storing the substring in the variable.Syntax:var hash = url.substring(url.indexOf('#') + 1);
alert(hash);Example 2: This example uses substring() method to display the fragment identifier.<!DOCTYPE html><html>  <head>    <title>        How to get the fragment        identifier from a URL?    </title></head>  <body style = "text-align:center;">                   <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <p id="demo"></p>          <script>        var url =             "www.geeksforgeeks.com/article.php#hello";                  var hash = url.substring(url.indexOf('#') + 1);                  alert(hash);    </script></body>  </html>Output:
Syntax:
var hash = url.substring(url.indexOf('#') + 1);
alert(hash);
Example 2: This example uses substring() method to display the fragment identifier.
<!DOCTYPE html><html>  <head>    <title>        How to get the fragment        identifier from a URL?    </title></head>  <body style = "text-align:center;">                   <h1 style = "color:green;" >         GeeksForGeeks     </h1>           <p id="demo"></p>          <script>        var url =             "www.geeksforgeeks.com/article.php#hello";                  var hash = url.substring(url.indexOf('#') + 1);                  alert(hash);    </script></body>  </html>
Output:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
How to filter object array based on attributes?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?