Get the current URL with JavaScript

In this tutorial, I will show you how to get the current URL with JavaScript.

Getting the current URL using JavaScript is a common task in web development. There are various ways to accomplish this, and the community has provided multiple answers.

Let’s explore the methods and understand when to use each one.

Using window.location.href

The most straightforward way to obtain the current page’s URL is by using the window.location.href property. This method is widely supported and provides both read and write access to the URL associated with the current frame.

Example

// Get the current page URL
var currentURL = window.location.href;
console.log(currentURL);

In this example, currentURL will contain the complete URL of the current page.

Using document.URL

If you only need to retrieve the URL as a read-only string, you can use the document.URL property. This property should contain the same value as window.location.href.

Example

// Get the current page URL using document.URL
var currentURL = document.URL;
console.log(currentURL);

The above JavaScript code snippet retrieves and logs the current page’s complete URL using document.URL.

This approach is generally safe, but note that there have been reports of a bug in Firefox with this method, so it’s advisable to test its compatibility with your target browsers.

Additional Tips

Here are some additional for Working with URLs in JavaScript.

Relative Path

If you require a relative path, you can retrieve it using window.location.pathname.

Example

var relativePath = window.location.pathname;
console.log("Relative Path:", relativePath);

Host Name

To obtain the hostname, access window.location.hostname.

Example

var hostName = window.location.hostname;
console.log("Host Name:", hostName);

Protocol

For extracting the protocol separately, use window.location.protocol.

Example

var protocol = window.location.protocol;
console.log("Protocol:", protocol);

Hash Tag

To fetch the hashtag(#) of the URL, access window.location.hash.

Example

var hashTag = window.location.hash;
console.log("Hash Tag:", hashTag);

Complete URL Composition

Compose the complete URL by combining various components.

Example

var composedURL = window.location.protocol + '//' + window.location.hostname + window.location.pathname + window.location.hash;
console.log("Complete URL Composition:", composedURL);

Simplified Version

If you are already in the window scope, use a simplified approach.

Example

var protocol = location.protocol;
var host = location.hostname;
var path = location.pathname;
var hash = location.hash;
var fullURL = location.href;
console.log("Simplified Version:", fullURL);

Additional Methods

For those preferring an actual URL object, instantiate it using new URL().

Example

// Using URL object
const url = new URL(window.location.href);
console.log("URL Object:", url);

For those who want different alternatives, consider the following:

• document.location.toString()
• window.location

Example

// Using document.location.toString()
var urlAsString = document.location.toString();
console.log(urlAsString);

// Using window.location
var hostURL = window.location;
console.log(hostURL);

Choose the method that best fits your needs and ensures compatibility with your target browsers.