How to extract the hostname portion of a URL in JavaScript?

Front End Technology Javascript Web Development

In this tutorial, we will see how to extract the hostname portion of a URL in JavaScript.

What is a URL?

An alternative term for a web address is a URL. For example, tutorialpoints.com is a word-based URL. An IP address can also be used as a URL (ex. 192.168.2.24). Since names are simpler to recall than numbers, most users submit the name’s address when searching on the internet

A URL is a method by which web browsers ask web servers for specific pages. The syntax/format of a URL is given below.

Syntax

scheme://prefix.domain:port/path/filename

Parameters

scheme − specifies the kind of Internet service (http or https is being used in general)
prefix − specifies a domain prefix (www is the default for http)
domain − describes the internet domain name (ex.tutorialpoints.com)
port − specifies the host's port number (80 is the default for http)
path − establishes a server-side path
filename − specifies the name of a resource or document

Typical URL Schemes

HTTP - hypertext transfer protocol

HTTP is used in common web pages. This is not an encrypted protocol.

HTTPS - secure hypertext transfer protocol

HTTPS is used in secure web pages. This is an encrypted protocol.

FTP - File transfer protocol

FTP is used to download or upload files.

Now let us see the way to get the hostname in a URL.

Using hostname property of current window location

In this section, we will see how to get the hostname in a url using the hostname property of the current window location

Syntax

Follow the syntax below to get the hostname.

First
window.location.hostname;

Here we access the hostname property from the current window's location.

Algorithm

STEP 1 − Get the current URL
STEP 2 − Display the hostname from the current URL using the current window location hostname syntax.

Example

In this example, we have set empty Dom to display output. We have written the code to get the hostname from the current website location.


<html>
<body>
   <h2>Using the <i>current window location's hostname</i> property</h2>
   <p id="idNullDom"></p>
   <p id="idHostDom"></p>
   <script>
      var varUrl = window.location.href;
      var varNullDom = document.getElementById("idNullDom");
      varNullDom.innerHTML = "Current url " + varUrl;
      var varHostDom = document.getElementById("idHostDom");
      varHostDom.innerHTML = "Location hostname " + (window.location.hostname);
   </script>
</body>
</html>

Using hostname Property of the URL.

In this section, we will see how to get the hostname in a URL using the hostname property of any URL. Here, we have created the custom URL object using the new URL() constructor.

Syntax

Follow the syntax below to get the hostname.

var url = new URL("www.sample.com");
var hostname = url.hostname;

Here we access the hostname property from the URL directly. We use new URL method to create a new URL and then the hostname property of this url is taken.

Example

In this example, the code creates a sample url using new URL() method. The he hostname is displayed by accessing the hostname property of the URL itself.


<html>
<body>
   <h2>Using the <i>any url's hostname</i> property</h2>
   <p id="idSampDom"></p>
   <script>
      var sampUrl = new URL("https://www.tutorialspoint.com/How-toextract-the-hostname-portion-of-a-URL-in-JavaScript");
      var varSampDom = document.getElementById("idSampDom");
      varSampDom.innerHTML = "url hostname " + (sampUrl.hostname);
   </script>
</body>
</html>

In this tutorial, we have learned to get the hostname in a URL using the hostname property in JavaScript.

The hostname property is a built-in JavaScript property and easy to access the hostname from the current URL as well as from any URL created using new URL() method.