How to get protocol, domain and port from URL using JavaScript ? - GeeksforGeeks

30 May, 2019
The protocol, domain, and port of the current page can be found by two methods:
Method 1: Using location.protocol, location.hostname, location.port methods: The location interface has various methods that can be used to return the required properties.
The location.protocol property is used to return the protocol scheme of the URL along with the final colon(:).
The location.hostname is used to return the domain name of the URL.
The location.port property is used to return the port of the URL. It returns nothing if the port is not described explicitly in the URL.
Syntax:
protocol = location.protocol;
domain = location.hostname;
port = location.port;
Example:
<!DOCTYPE html><html>  <head>    <title>        Get protocol, domain, and port from URL    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        Get protocol, domain, and port from URL    </b>          <p>        Protocol is:         <span class="protocol"></span>    </p>          <p>        Domain is:         <span class="domain"></span>    </p>          <p>        Port is:         <span class="port"></span>    </p>          <button onclick="getDetails()">        Get protocol, domain, port    </button>          <script type="text/javascript">        function getDetails() {            protocol = location.protocol;            domain = location.hostname;            port = location.port;              document.querySelector('.protocol').textContent                    = protocol;            document.querySelector('.domain').textContent                    = domain;            document.querySelector('.port').textContent                    = port;        }    </script></body>  </html>                    
Output:
Before Clicking the button:
After Clicking the button:
Method 2: Using the URL interface: The URL interface is used to represent object URL. It can be used for getting the port, domain, and protocol as it has inbuilt methods to get these values.
The url.protocol property is used to return the protocol scheme of the URL along with the final colon(:).
The url.hostname is used to return the domain of the URL.
The url.port property is used to return the port of the URL. It returns ” if the port is not described explicitly.
Note: This API is not supported in Internet Explorer 11.
Syntax:
current_url = window.location.href;
url_object = new URL(current_url);

protocol = url_object.protocol;
domain = url_object.hostname;
port = url_object.port;
Example:
<!DOCTYPE html><html>      <head>    <title>        Get protocol, domain, and port from URL    </title></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        Get protocol, domain, and port from URL    </b>          <p>Protocol is: <span class="protocol"></span></p>    <p>Domain is: <span class="domain"></span></p>    <p>Port is: <span class="port"></span></p>          <button onclick="getDetails()">        Get protocol, domain, port    </button>          <script type="text/javascript">        function getDetails() {            current_url = window.location.href;            url_object = new URL(current_url);              protocol = url_object.protocol;            domain = url_object.hostname;            port = url_object.port;              document.querySelector('.protocol').textContent                    = protocol;            document.querySelector('.domain').textContent                    = domain;            document.querySelector('.port').textContent                    = port;        }    </script></body>  </html>                    
Output:
Before Clicking the button:
After Clicking the button:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?