We can get the hash value from a URL in JavaScript and determine the position on a web page. You can follow different methods to obtain the value.
JavaScript has the location.hash property that can get the hash value or set a new value to the current URL. To extract the hash from a URL string, there is a URL() constructor. It takes the string and returns an object that contains the hash as its property.
I will show you both of these methods to obtain the URL hash using JavaScript in this article. You can use them in different situations.
Get URL Hash Using JavaScript location.hash Property
We have access to the location object in JavaScript. This object has a hash property that will give you the hash value from the current URL in your browser.
It also has the ability to set a new value. That means, we can add or change the URL hash value using JavaScript without reloading the web page with this property.
const hash = location.hash;
console.log(hash);
// Returns "#reviews" if the current URL is https://example.com/post#reviews
This property returns the value including the pound sign (#) from the current URL. If you want to remove the pound sign and get only the value, you can go it using the substring() method in JavaScript.
const hash = location.hash.substring(1);
console.log(hash);
// Returns "reviews" if the current URL is https://example.com/post#reviews
When I add the substring() method with "1" as its parameter, it removes the pound sign (#) from the string. In this way, we receive the actual value from the URL.
Get Hash Value From URL String Using URL() Constructor
When we want to get the hash value from a URL string, the location object will not work. Because this object only contains information about the current URL in the browser.
You need to use the URL() constructor function available in JavaScript. When we pass a string URL to this constructor, it will return an object will all the information about that URL.
const url = "https://example.com/post#reviews";
const urlObj = new URL(url);
const hash = urlObj.hash;
console.log(hash);
// #reviews
I am extracting the hash value from the url string using URL() constructor. The object we get from this constructor has a hash property.
This property will contain the value. It will also return the hash value including the pound sign (#) from the url string. Now, you can use it in your project.
For example, you can add it and change the current URL using JavaScript without reloading the web page.
Conclusion
Receiving the hash value from the current URL or a string is very easy. Because JavaScript has definite ways to do it.
Not only that, we can remove a hash value from the URL using JavaScript.
When you want to get the hash value from the current URL, you will use the location.hash property. But if you want to extract it from a string, you will use the URL() constructor.
