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

Css Tutorials & Demos

How rotate an image continuously in CSS

In this demo, we are going to learn about how to rotate an image continuously using the css animations.

How to create a Instagram login Page

In this demo, i will show you how to create a instagram login page using html and css.

How to create a pulse animation in CSS

In this demo, i will show you how to create a pulse animation using css.

Creating a snowfall animation using css and JavaScript

In this demo, i will show you how to create a snow fall animation using css and JavaScript.

Top Udemy Courses

JavaScript - The Complete Guide 2021 (Beginner + Advanced)
JavaScript - The Complete Guide 2021 (Beginner + Advanced)
64,026 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)
152,857 students enrolled
48.5 hours of video content
View Course