How to get current URL using javascript

If you are making a website or a web app, there’s a chance you are working with a lot of pages. For example, if you are developing a blog website, there would be a home page, an articles page, an about page, and a page for each article on your blog. Each of these pages will have its own URL which is linked to other pages. In a lot of cases, you might want to access the current URL of a page. In this article, we will briefly discuss what we mean by the current URL, why this can be useful, and how we can get the current URL of a page using JavaScript.

What is the “current” URL?

Before we understand what we mean by the “current” URL, let us briefly discuss what is a URL. URL or Uniform Resource Locator basically works as an address on the web that points to a certain file or resource. This resource can be anything like an HTML page or any kind of file like an image, document, video, etc. Every page you visit on the internet has a unique URL, even this article that you are currently reading!

There are many components in a URL, and it can be better illustrated with this image for example,

This is all we need to know about URLs for this article. If you wish to learn more about URLs and their different components, I suggest reading through this MDN docs page about URLs.

Why do we need the current URL?

By “current” URL we simply mean the URL of the page the user is currently on. As we discussed earlier, a URL has many components to it and we might need something for carrying out some operations on our website. For example, we might need the term the user searched for from the URL and show relevant content accordingly.

Now that we understand all the terminology needed for this, let us see how we can get the current URL using JavaScript.

Get the current URL in JavaScript

Getting the current URL using JavaScript is pretty simple. We simply need to use the location object from the global window object and get the current URL by accessing the href property. The code should look like this,

const currentURL = window.location.href;
// logging the current URL
console.log(currentURL);
Code language: JavaScript (javascript)

For example, accessing the current URL from a Codedamn Playground gives me the following output,

How simple was that? One thing to note here is there are many other properties in the window.location object that might be of use to you. These are as follows:

• window.location.host gives you the host of the URL.
• window.location.hostname gives you the domain of the URL.
• window.location.port gives you the port number of the URL.
• window.location.protocol gives you the protocol scheme of the URL.
• window.location.pathname gives you the current URL path with an initial ‘/’.
• window.location.search gives you the query strings or parameters of the URL.
• window.location.hash gives you the current anchor or fragment containing a ‘#’.

Conclusion

In this article, we briefly discussed what we mean by URL and current URL, and the way we can get the current URL easily using JavaScipt. We also looked at some of the other properties available under window.location which can be useful when working with URLs. I hope this article has cleared all your doubts regarding accessing the current URL using JavaScript in a browser environment.

If you have any questions regarding this article or want to talk about anything technology, you can find me on Twitter. Thank you for reading!