How to Remove Hash From URL Using JavaScript Without Reload

We can remove hash value from a URL using JavaScript methods without reloading the entire webpage. You can use a similar method that can add a hash value to a URL in JavaScript.

The pushState() or replaceState() method from the JavaScript history object can remove the hash (#) from the URL. These methods update the current URL without reloading. That's how we can get rid of the URL hash by updating it.

Let's see how we can apply these methods in our project with a few examples.

Remove Hash From URL (window.location) in JavaScript

We have a location.hash property in JavaScript that can set and get a hash value from the URL in the browser. If you try to remove the hash by setting this property value as an empty string, it will not work.

          location.hash = "";

// From: https://example.com/product#reviews
// To: https://example.com/product
        

I will only remove the hash value. But the URL will still contain the (#) symbol. That's why it isn't the ideal solution to this problem.

The pushState() method is the perfect fit to get the desired outcome. It not only removes the value but also the hash symbol from the URL.

          history.pushState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

This method is mainly used to change the current URL using JavaScript in the browser. We can take the hash out of the current URL by changing it.

For that, you need to construct the new URL path by joining location.pathname and location.search properties. Then pass the string to this method in the third parameter.

When JavaScript executes the method, it will take you to the new URL without the hash value.

          history.replaceState("", "", `${location.pathname}${location.search}`);

// From: https://example.com/product#reviews
// To: https://example.com/product
        

We can also use the replaceState() method instead of using the pushState() from the history object. It will give you the same result.

The only difference is unlike the pushState() method, it doesn't add new history to the browser. That means, when we change the URL using the replaceState() method, we can't go back to the previous page by clicking the "Back" button in the browser.

Also Read: How to Check For Hash (#) Value in a URL Using JavaScript

Remove Hash From URL String Using JavaScript

If you have a URL as a string, you can also remove the hash from it. I will show you 2 methods to get the job done.

Method 1: Use URL() Constructor

You can generate a URL object out of a string using the URL() constructor in JavaScript. Call this constructor function and pass the string to it.

It will return an object where you can access the hash property. This property can get and set a new hash value to the URL.

          const url = "https://example.com/product#reviews";

const urlObj = new URL(url);

urlObj.hash = "";

console.log(urlObj.href);
// https://example.com/product
        

When you set an empty string for the urlObj.hash property, it will remove the hash value from the string if there is any. You can access the updated URL from the urlObj.href property.

Method 2: Use substring() Method

You can also use JavaScript string methods to get the same result. For that, we have to use substring() and lastIndexOf() methods combined.

The URL contains the hash value at the end of it. The lastIndexOf() method will return the index value of the hash. Then you can easily remove that part with the substring() method.

          const url = "https://example.com/product#reviews";

const updatedUrl = url.substring(0, url.lastIndexOf("#"));

console.log(updatedUrl);
// https://example.com/product
        

I am finding the index and getting the URL string up to the hash index. In this way, you can remove the hash from a string. Now, you can redirect to the updated URL in JavaScript with the location object.

Conclusion

We have looked into multiple methods to get rid of the hash value from a URL. You can apply these methods for a current URL in the browser or a string URL.

You can take out the value by using history.pushState() method in the browser. Otherwise, you have URL() constructor function or other string methods to remove a hash from the URL in JavaScript.