How to Get Current URL in JavaScript (& Useful Examples)

By /

To get the current URL of the page you are visiting using JavaScript, access the window.location.href property:

window.location.href

Alternatively, you can access the current URL via document.URL property.

However, it has some shortcomings that I’ll explain in a bit.

document.URL

Let’s take a closer look at the window.location object. It has useful properties other than the href that returns the URL.

window.location

As you learned in the introduction already, window.location object is useful because you can retrieve the current page URL with it.

window.location.href

By the way, it’s possible to change the window.location object properties, such as the URL.

The window.location object has other useful properties too. Before accessing the properties, let’s take a quick look at the URL parts.

URL Structure

Let’s quickly go through the basic URL structure to distinguish the parts in it.

Highlighting different parts of URLs
  • Protocol. The protocol is the “first part” of a URL. It specifies which protocol to use to access the resource on the internet. Protocols include HTTP, HTTPS, or FTP.
  • Subdomain. A domain can be split into logical sections, called subdomains. The most common example is www, which means the domain is (automatically) part of the world wide web subdomain. Better examples of subdomains are store, blog, or app. For example, app.example.com, or blog.example.com.
  • Domain Name. The domain name is the actual address of your website. It is the host that owns the resources of your site. For instance, example.com is a domain name.
  • Port. The port is an optional part of a URL because it’s set automatically. It is a number that determines the “gate” via which you want to retrieve the resources.
  • File Path. The file path is like a file path on your computer. On a website, the web pages are files on a server. To access a particular web page, you need to specify the path to it on a server. For example, https://www.example.com/calculator.html.
  • Query Parameters. Query parameters can be inserted into a URL to perform an action like a search on the server.
  • Fragment. Fragment, hash, or anchor is used to specify a part of a page to be accessed. For example, example.com/blog/what-is-url#chapter1

Now you understand what makes up a URL.

In JavaScript, you can use the window.location object to access these URL parts. Let’s take a look at the window.location properties a bit closer.

If you are unfamiliar with URLs, make sure to read a comprehensive guide, What Is a URL?

Access URL Parts with window.location Properties

The window.location object has the following properties in JavaScript:

  • href. The entire URL of your current page.
  • protocol. The protocol that the URL uses.
  • host. The hostname and the port of a URL.
  • hostname. The hostname of a URL.
  • port. The port of the URL.
  • pathname. The file path in the URL.
  • search. The query parameters of the URL.
  • hash. The fragment or anchor of the URL.
  • origin. A combination of the protocol and host of the URL.

Here are examples of accessing these properties when the URL is https://www.codingem.com/best-pixel-art-software/#photoshop.

Different parts of URL in JS console

To make it easier to see, here is a zoomed-in image of accessing the URL properties.

Accessing different URL parts in JS console

Besides getting the current URL of a page, you can access parts of the URL easily. Instead of using regex or other heuristics to split the URL string, you can use the window.location properties to your advantage. This is the main way to operate with URLs using JavaScript.

Before you go, let’s talk about a commonly seen alternative, document.URL.

Get the Current URL with document.URL

Another popular way to get the current URL of a page is by accessing the URL property of the document.

document.URL

Unlike window.location.href, the document.URL gives you a read-only string that represents the current page’s URL. So if you don’t want to make changes to the URL string, then it might make more sense to use document.URL over window.location.href.

But the problem with document.URL approach is it has some bugs in Firefox.

For example, in Firefox 12, the document.URL doesn’t change when adding an anchor to the end of a URL.

So if you want to be 100% sure to get the URL and all of its parts, use the window.location.href.

Wrap Up

Thanks for reading!

Today you learned how to get the URL of a current page using JavaScript.

To put it short, use the window.location.href property to access the URL of the page. Keep in mind you can directly modify this property as well.

To get a read-only URL string, you might consider using the document.URL. But remember it has some bugs with Firefox.

Scroll to Top