Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to remove the hash from window.location (URL) with JavaScript without page refresh?
The replaceState() method replaces the current history entry with the state objects, title, and URL passed as method parameters. This method is useful when you want to update the current history entry's state object or URL in response to a user action.
To remove the hash from a URL without triggering a page refresh, we can use the HTML5 History API's replaceState() method. This approach modifies the browser's address bar while keeping the user on the same page.
Syntax
The syntax for the replaceState() method is as follows:
window.history.replaceState(stateObj, title, url)
Parameters
stateObj ? An object associated with the history entry. Can be
nullor an empty object{}.title ? The title parameter (currently unused by most browsers, can be empty string or
document.title).url ? The new URL. Must be of the same origin as the current URL.
Example: Removing Hash from URL
This example demonstrates how to remove the hash from a URL using JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Remove Hash from URL</title>
</head>
<body>
<h1>Tutorials Point</h1>
<p>Removing the hash from window.location with JavaScript without page refresh</p>
<button onclick="addHash()">Add Hash to URL</button>
<button onclick="removeHash()">Remove Hash from URL</button>
<p id="urlDisplay"></p>
<script>
function addHash() {
window.history.replaceState({}, document.title, window.location.pathname + "#section1");
displayCurrentURL();
}
function removeHash() {
var uri = window.location.toString();
if (uri.indexOf("#") > 0) {
var cleanUri = uri.substring(0, uri.indexOf("#"));
window.history.replaceState({}, document.title, cleanUri);
}
displayCurrentURL();
}
function displayCurrentURL() {
document.getElementById("urlDisplay").innerHTML = "Current URL: " + window.location.href;
}
// Display initial URL
displayCurrentURL();
</script>
</body>
</html>
How It Works
The hash removal process works as follows:
- Get the current URL using
window.location.toString() - Check if the URL contains a hash symbol (
#) usingindexOf() - If found, extract the portion before the hash using
substring() - Use
replaceState()to update the URL without the hash
Alternative Approaches
Here are different ways to remove hash from URL:
// Method 1: Using substring and indexOf
function removeHashMethod1() {
var url = window.location.href;
var hashIndex = url.indexOf('#');
if (hashIndex !== -1) {
var cleanUrl = url.substring(0, hashIndex);
window.history.replaceState({}, document.title, cleanUrl);
}
}
// Method 2: Using split
function removeHashMethod2() {
var cleanUrl = window.location.href.split('#')[0];
window.history.replaceState({}, document.title, cleanUrl);
}
// Method 3: Using URL constructor (modern approach)
function removeHashMethod3() {
var url = new URL(window.location.href);
url.hash = '';
window.history.replaceState({}, document.title, url.toString());
}
Key Points
- The page does not refresh when using
replaceState() - The browser's back button will not include the hash-removed state
- This method only works with URLs from the same origin
- The hash removal is immediate and visible in the address bar
Conclusion
Using window.history.replaceState() is the most effective way to remove hash fragments from URLs without page refresh. This method provides a clean user experience by updating the address bar instantly while preserving the current page state.
4K+ Views
