How to extract the hostname portion of a URL in JavaScript

In JavaScript, to extract the hostname from a URL, you can use the built-in URL object, which is the simplest and most reliable approach. Here is a clear, step-by-step example to demonstrate how to do it:

1. Create a URL object: First, use the URL constructor to instantiate a URL instance. This constructor accepts a URL string as its parameter.

2. Access the hostname property: After creating the URL instance, directly access its hostname property to retrieve the hostname of the URL.

Here is a specific code example:

javascript
function getHostname(url) {
    try {
        const urlObject = new URL(url);
        return urlObject.hostname;
    } catch (error) {
        console.error("Invalid URL:", error);
        return null;
    }
}

// Usage example
const url = "https://www.example.com:8080/path/name?query=123#fragment";
const hostname = getHostname(url);
console.log(hostname);  // Output: "www.example.com"

In this example:

• First, we attempt to create a URL object. If the URL is invalid, it may throw an error, so we use try...catch to catch any exceptions.
• If the URL is valid, we simply return the hostname property.
• Finally, we verify the correctness by printing the result.

The advantage of this method is that it is simple and adheres to modern web standards. Additionally, the URL object provides other useful properties and methods, such as protocol, pathname, search, etc., which greatly facilitate handling and analyzing URLs.