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

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:

Article Tags :

JavaScript

Web Technologies

JavaScript-Questions