How to Get Domain Name From URL in JavaScript?

Last Updated : 18 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

In JavaScript, the URL object allows you to easily parse URLs and access their components. This is useful when you need to extract specific parts of a URL, such as the domain name. The hostname property of the URL object provides the domain name of the URL.

Prerequisite

Below are the following approaches to get a domain name from a URL in Javascript:

Table of Content

Using the URL Object

The new URL(url) constructor parses the URL and creates a URL object. This object has various properties that represent different parts of the URL. The hostname property of the URL object returns the domain name. For instance, for the URL https://www.example.com/path/to/resource?query=param, urlObject.hostname would return www.example.com. If the URL is invalid, the URL constructor will throw an error. In the catch block, you can handle this error, for example by logging it or returning a default value.

Example: This example shows the extraction of the domain name from a URL.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>How to get domain name from URL in JavaScript</h1>
    <p>Domain Name : <span id="span"></span></p>
    <script src="Index.js"> </script>
</body>

</html>
JavaScript 
const span = document.getElementById('span');

// Function to get the domain name from a URL
function getDomainName(url) {
    try {
        // Create a URL object
        const urlObject = new URL(url);

        // Return the hostname (domain name)
        return urlObject.hostname;
    } catch (error) {
        console.error("Invalid URL:", error);
        return null;
    }
}

// Example usage
const url = "https://www.example.com/path/to/resource?query=param";
const domainName = getDomainName(url);
span.innerHTML = domainName;
console.log("Domain Name:", domainName);

Output:

file
URL object

Using Regular Expressions

If you want more control or need to support environments where the URL object is not available, you can use regular expressions to extract the domain from the URL string.

Example: This example demonstrates the extraction of the domain name using Regex.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>How to get domain name from URL in JavaScript</h1>
    <p>Domain Name : <span id="span"></span></p>
    <script src="Index.js"> </script>
</body>

</html>
JavaScript 
const span = document.getElementById('span');

function getDomainFromUrl(url) {
    const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/i;
    const match = url.match(regex);
    return match ? match[1] : null; // Return the domain if found
}

// Usage
const domain = getDomainFromUrl('https://www.example.com/path?query=param');
console.log(domain); // Output: "example.com"
span.innerHTML = domain;

Output:

file
using Regex

Next Article
How to Get Domain Name From URL in JavaScript?

K
kamal1270be21
Improve
Article Tags :

Similar Reads