Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 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.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • 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:



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!