Open In App

How to remove hash from window.location with JavaScript without page refresh ?

The replaceState() method is used to modify the current history entry, replacing it with the state objects, title, and URL passed in the method parameters. This method is useful when you want to update the state object or URL of the current history entry in response to some user action. To remove the hash URL, you can use the replaceState method on the history API to remove the hash location.
Example: 
 




<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to remove hash from window.location
        with JavaScript without page refresh?
    </title>
</head>
 
<body style="text-align: center;">
 
    <h1 style="color: green">
        GeeksforGeeks
    </h1>
 
     
<p>
        How to remove the hash from
        window.location</br> with
        JavaScript without page refresh?
    </p>
 
 
     
<p>
        Click on the button to modify
        the current history state
    </p>
 
 
    <button onclick="modifyState()">
        Modify history state
    </button>
 
    <button onclick="remove_hash_from_url()">
        Remove hash from url
    </button>
 
    <script>
        function modifyState() {
            let stateObj = { id: "100" };
            window.history.replaceState(stateObj,
                "Page 3", "/answer#page3.html");
        }
         
        function remove_hash_from_url() {
            var uri = window.location.toString();
 
            if (uri.indexOf("#") > 0) {
                var clean_uri = uri.substring(0,
                                uri.indexOf("#"));
 
                window.history.replaceState({},
                        document.title, clean_uri);
            }
        }
    </script>
</body>
 
</html>

Output: 
 



 




Article Tags :