Skip to content
Related Articles

Related Articles

How to get the fragment identifier from a URL ?
  • Last Updated : 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:
  • 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:




My Personal Notes arrow_drop_up
Recommended Articles
Page :