Get the Current URL with JavaScript

In this article, you will learn how to get the current URL with JavaScript.

Window Location

To get the current URL, you can use the JavaScript window.location object.

Let’s take a look at an example of the current page address (URL) that contains several components – the protocol, domain, port, path, query and hash:

https://www.plantpot.works:8080/example/index.html?s=JavaScript#toc2

Get the full URL path

To get the full URL path of the current URL, you can use the window.location.href property:

const url = window.location.href;

console.log(url);
// https://www.plantpot.works:8080/example/index.html?s=JavaScript#toc2

Get the URL components

To get the components of the current URL, you can use each property of the window.location object:

// Protocol
const protocol = window.location.protocol;

console.log(protocol);
// https://


// host
const host = window.location.host;

console.log(host);
// www.plantpot.works:8080


// hostname
const hostname = window.location.hostname;

console.log(hostname);
// www.plantpot.works


// port
const port = window.location.port;

console.log(port);
// 8080


// pathname
const path = window.location.pathname;

console.log(path);
// /example/index.html


// query
const query = window.location.search;

console.log(path);
// ?s=JavaScript


// hash
const hash = window.location.hash;

console.log(hash);
// #toc2