How to extract the hostname portion of a URL in JavaScript

Understanding URL structures

Before showcasing methods to extract hostnames, let's understand the URL components:

• Protocol: http or https
• Hostname: Our big fish, the domain name.
• Port: The unsung hero - an optional TCP port number.
• Pathname: The file or directory following the domain.
• Search: AKA query string, starting with ?.
• Hash: A fragment identifier beginning with #; likes to hang around at the end.

Familiarity with URL structure can make extraction that much smoother.

Common scenarios and solutions

Extracting current page's hostname

The current page's hostname is accessible via JavaScript's native window.location object:

let hostname = window.location.hostname; // Do you know where you are?


Mind you, while window.location.host will fish out the hostname with a port if it exists, .hostname will politely ignore the port.

Parsing a URL string

For extracting the hostname from any URL string, URL constructor is our hero:

let hostname;
try {
  hostname = new URL('https://www.example.com').hostname; // Try this on for size!
} catch (error) {
  console.error('Invalid URL. We tumble sometimes, don't we?');
}


Regular expressions for the courageous

Regular expressions, while not as inviting or straightforward as the URL object, are a robust tool for URL parsing:

let regex = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?]+)/;
let matches = regex.exec('https://www.example.com');
let hostname = matches && matches[1]; // Matches are made in heaven, and in JS.


A word of caution: with new TLDs and international domains, regular expressions could be a rough ride.

Decoding best practices

Cross-browser compatibility

Ensure your solution works smoothly across browsers. The URL object is now widely supported, but a quick compatibility check doesn't hurt. Trust but verify, right?

Non-standard ports and you

When dealing with URLs which include non-standard ports, use the .hostname property for a clean extraction of the hostname, no port strings attached!

hostname = new URL('https://www.example.com:8080/path?query').hostname; // 'www.example.com' sans the port!


Stripping unnecessary URL components

A pure hostname extraction implies removing any extraneous parts from the URL:

const hostname = new URL('https://www.example.com/path?query').hostname; // 'www.example.com'


Dealing with non-standard URLs

For times when you encounter non-standard URLs, the URL object constructor works with protocol-relative URLs (//www.example.com) and URLs minus a protocol:

const hostname = new URL('//www.example.com', window.location.origin).hostname; // 'www.example.com', didn't see that coming, did you?
