Determine the Domain Name Using JavaScript

Introduction

When developing web applications, you might encounter scenarios where different behavior is needed based on which domain a user accesses your site. Whether for A/B testing, personalizing content, or managing multiple domains pointing to the same application, it’s important to determine the current domain name using JavaScript. This tutorial will guide you through detecting and extracting the domain name from a URL using various methods in JavaScript.

Understanding the location Object

The window.location object provides several properties that describe different parts of the URL. Among these is hostname, which contains the host name, including subdomains (e.g., www.example.com). To extract just the base domain without subdomains, we’ll need to manipulate this property.

Using location.hostname

The simplest way to start retrieving domain-related information is by accessing window.location.hostname. This provides a straightforward method of obtaining the full host name:

let hostname = window.location.hostname;
console.log("Full Hostname: ", hostname); // e.g., www.example.com

Removing Subdomains

To isolate just the primary domain (e.g., example.com from www.example.com), we need a method to strip away subdomains.

Using String Manipulation

One straightforward approach involves string manipulation. Here’s how you can achieve this:

function getDomainName(hostName) {
    let parts = hostName.split('.');
    if (parts.length > 2) {
        return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
    }
    return hostName;
}

let domain = getDomainName(window.location.hostname);
console.log("Base Domain: ", domain); // e.g., example.com

Using Regular Expressions

For more complex scenarios, such as domains like bbc.co.uk, regular expressions provide a robust solution. Here’s an example using regex to handle various domain structures:

function extractDomain(hostname) {
    let match = hostname.match(/^(?:.*?\.)?([a-zA-Z0-9\-_]{3,}\.(?:\w{2,8}|\w{2,4}\.\w{2,4}))$/);
    return match ? match[1] : null;
}

let domainName = extractDomain(window.location.hostname);
console.log("Extracted Domain: ", domainName); // e.g., example.com or bbc.co.uk

Custom Function with Subdomain Control

You might need flexibility to include subdomains under certain conditions. Here’s a function that can optionally preserve subdomains:

function getDomain(url, includeSubdomain = false) {
    url = url.replace(/(https?:\/\/)?(www\.)?/i, '');
    
    if (!includeSubdomain) {
        let parts = url.split('.');
        return `${parts[parts.length - 2]}.${parts[parts.length - 1]}`;
    }
    
    return url.split('/')[0];
}

console.log(getDomain(window.location.href)); // e.g., example.com
console.log(getDomain(window.location.href, true)); // e.g., www.example.com

Best Practices

• Test with Various Domains: Ensure your function works across a variety of domain structures, including TLDs like .co.uk.
• Consider Edge Cases: Some domains may not follow typical patterns; thorough testing helps catch these.
• Keep It Modular: Design functions that can be easily modified or extended for specific requirements.

Conclusion

Determining the correct domain name in JavaScript involves understanding URL components and applying string manipulation or regular expressions. By following this tutorial, you should now have a toolkit to detect domains accurately within your web applications.