Getting the protocol, domain, port from a URL with JavaScript

In this tutorial, we are going to learn about how to get the protocol, domain name, port from a current URL using JavaScript.

Using the window.location object

The window.location object contains different properties that are holding data related to the current page URL.

Consider, we have the following URL:

http://localhost:3000

Getting the protocol

To get the protocol (like https or http) from a URL, we can use the window.location.protocol property in JavaScript.

window.location.protocol;  // http

Getting the domain name

To get the domain name from a URL, we can use the window.location.hostname property.

window.location.hostname;  // localhost

Getting the Port number

To get the port number from a URL, we can use the window.location.port property.

window.location.hostname;  // localhost

You can also join all together to create a full url like this:

const protocol = window.location.protocol;
const domain = window.location.hostname;
const port = window.location.port;


const full = `${protocol}://${domain}:${port? port : ""}`