How to Get the Domain from a URL in JavaScript

To extract the domain from a URL in JavaScript, use the URL object:

let url = "https://www.example.com/path/name?query=string";
let domain = new URL(url).hostname;
console.log(domain); // "www.example.com"

This method provides a quick and easy way to retrieve the domain from a URL.

Working with URLs is a common task in web development. One frequent requirement is extracting the domain from a given URL. Whether you’re handling routing, logging, or analytics, being able to accurately extract the domain is essential. This article explores various methods to get the domain from a URL in JavaScript, providing detailed explanations and code examples for each approach.

Using the URL Object

The URL object in JavaScript is a powerful tool designed to work with URLs. It offers a straightforward way to extract different parts of a URL, including the domain.

Example 1: Using the URL Object

let url = "https://www.example.com/path/name?query=string";
let domain = new URL(url).hostname;
console.log(domain); // "www.example.com"

Explanation:

• let url = “https://www.example.com/path/name?query=string”;
  Initializes the variable url with a string containing a full URL.
• let domain = new URL(url).hostname;
  • new URL(url) creates a new URL object from the given URL string.
  • .hostname retrieves the domain part of the URL (e.g., “www.example.com“).
  • The domain is then stored in the variable domain.
• console.log(domain);
  Logs the value of domain, which is “www.example.com“.

let url = "https://www.example.com/path/name?query=string";
let domain = url.match(/:\/\/(www\.)?(.[^/:]+)/i)[2];
console.log(domain); // "example.com"

Using Split Method

The split method can be used to break down the URL string and extract the domain. This approach is simpler but less robust compared to using the URL object or regular expressions.

Example 3: Using Split Method

let url = "https://www.example.com/path/name?query=string";
let domain = url.split('/')[2];
console.log(domain); // "www.example.com"

Explanation:

• let url = “https://www.example.com/path/name?query=string”;
  Initializes the variable url with a string containing a full URL.
• let domain = url.split(‘/’)[2];
  • The split(‘/’) method breaks the URL string into an array using “/” as the delimiter.
  • [2] accesses the third element of the array, which contains the domain.
  • The domain is then stored in the variable domain.
• console.log(domain);
  Logs the value of domain, which is “www.example.com“.

Using a Custom Function

Creating a custom function to extract the domain from a URL can encapsulate the logic, making it reusable and easier to maintain.

Example 4: Custom Function

function getDomainFromUrl(url) {
  return new URL(url).hostname;
}

let url = "https://www.example.com/path/name?query=string";
let domain = getDomainFromUrl(url);
console.log(domain); // "www.example.com"

Explanation:

• function getDomainFromUrl(url) { return new URL(url).hostname; }
  Defines a custom function getDomainFromUrl that takes a URL string as a parameter and returns the domain using the URL object.
• let url = “https://www.example.com/path/name?query=string”;
  Initializes the variable url with a string containing a full URL.
• let domain = getDomainFromUrl(url);
  Calls the custom function getDomainFromUrl with the URL string and stores the returned domain in the variable domain.
• console.log(domain);
  Logs the value of domain, which is “www.example.com“.

Using Lodash Library

Lodash is a popular utility library that simplifies many common tasks in JavaScript, including URL parsing.

Example 5: Using Lodash

First, include Lodash in your project:

<script src="https://cdn.jsdelivr.net/npm/lodash/lodash.min.js"></script>

Then use Lodash to extract the domain:

let url = "https://www.example.com/path/name?query=string";
let domain = _.chain(url).split('/').nth(2).value();
console.log(domain); // "www.example.com"

Explanation:

• let url = “https://www.example.com/path/name?query=string”;
  Initializes the variable url with a string containing a full URL.
• let domain = _.chain(url).split(‘/’).nth(2).value();
  • _.chain(url) creates a Lodash chain sequence from the URL string.
  • split(‘/’) breaks the URL string into an array using “/” as the delimiter.
  • nth(2) accesses the third element of the array, which contains the domain.
  • value() retrieves the value from the Lodash chain.
  • The domain is then stored in the variable domain.
• console.log(domain);
  Logs the value of domain, which is “www.example.com“.

Conclusion

Extracting the domain from a URL in JavaScript can be accomplished using various methods, each suitable for different scenarios. Whether using the built-in URL object, regular expressions, the split method, a custom function, or the Lodash library, JavaScript provides robust tools for working with URLs. Understanding these methods allows you to choose the most appropriate one for your specific needs, ensuring your code is efficient and effective.

By mastering these techniques, you can handle URL parsing tasks with confidence, making your web development projects more robust and maintainable.