by Sai gowtham

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 : ""}`

Top Udemy Courses

JavaScript - The Complete Guide 2020 (Beginner + Advanced)
JavaScript - The Complete Guide 2020 (Beginner + Advanced)
45,614 students enrolled
52 hours of video content
View Course
React - The Complete Guide (incl Hooks, React Router, Redux)
React - The Complete Guide (incl Hooks, React Router, Redux)
284,472 students enrolled
40 hours of video content
View Course
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
Vue - The Complete Guide (w/ Router, Vuex, Composition API)
130,921 students enrolled
48.5 hours of video content
View Course