js get hostname from url

How to Get Hostname from URL using JavaScript#

If you are working with URLs in JavaScript, you may need to extract specific parts of the URL, such as the hostname. The hostname is the part of the URL that identifies the domain name of the website you are visiting. There are several ways to get the hostname from a URL in JavaScript.

Method 1: Using the window.location Object#

The easiest way to get the hostname from a URL in JavaScript is to use the window.location object. This object contains information about the current URL of the web page, including the hostname.

const url = window.location.href;
const hostname = window.location.hostname;
console.log('URL:', url);
console.log('Hostname:', hostname);

In the above example, we first get the current URL using window.location.href. We then extract the hostname using window.location.hostname and save it in the hostname variable. Finally, we log both the URL and the hostname to the console.

Method 2: Using the URL Object#

Another way to get the hostname from a URL in JavaScript is to use the URL object. This object provides a convenient way to parse and manipulate URLs.

const url = 'https://www.example.com/path/to/page.html';
const parsedUrl = new URL(url);
const hostname = parsedUrl.hostname;
console.log('URL:', url);
console.log('Hostname:', hostname);

In this example, we create a new URL object by passing in the URL we want to parse. We then extract the hostname using the hostname property of the parsed URL object and save it in the hostname variable. Finally, we log both the URL and the hostname to the console.

Method 3: Using Regular Expressions#

If you prefer using regular expressions, you can also extract the hostname from a URL using a regular expression pattern.

const url = 'https://www.example.com/path/to/page.html';
const regex = /^https?:\/\/([^/?#]+)(?:[/?#]|$)/i;
const matches = url.match(regex);
const hostname = matches && matches[1];
console.log('URL:', url);
console.log('Hostname:', hostname);

In this example, we define a regular expression pattern that matches the protocol (http or https) and extracts the hostname. We then use the match() method to apply the regular expression pattern to the URL and store the result in the matches variable. Finally, we extract the hostname from the matches array and save it in the hostname variable. We log both the URL and the hostname to the console.

These are three ways you can get the hostname from a URL in JavaScript. Choose the method that works best for your use case.