Suppose you’re building a website or a web application and, for one reason or another, you need to get the current domain name in JavaScript.
What’s the best way to do that?
To get the value of the current domain name in JavaScript, reference the hostname
property of the window.location
object.
In this tutorial, I will show you exactly how to do that—and give you some of my best tips on how to work with it.
How It Works
If you opened up your browser’s console right now and referenced the following object:
// The hostname property of the window.location object
window.location.hostname
You would see that the hostname of this page is makersaid.com
.
Were this domain name prefixed with “www,” the value of the hostname would have been www.makersaid.com
.
The value of window.location.hostname
is a USVString, which means a sequence of Unicode scalar values. (In our JavaScript code, we treat USVStrings as regular strings.)
Ways to Use It
Store It for Subsequent Use
Nine times out of ten, you will only need to reference the string and store it for future use in a constant or variable:
// Store value of hostname in a constant
const domainName = window.location.hostname
// Store value of hostname in a variable
var domainName = window.location.hostname
Split It Into an Array
However, you can also split the string into an array at every dot (.) with the String.prototype.split()
method:
// Split value of hostname into an array
window.location.hostname.split('.')
Once again, if you fired up the browser’s console and gave this statement a spin, you’d get an array consisting of two values: ['makersaid', 'com']
.
Were this domain name prefixed with “www,” the array would have consisted of three values: ['www', 'makersaid', 'com']
.
Splitting the hostname
property into data elements in an array can be useful if you’re developing business logic for multiple domain names and need clean values to determine the current domain name.
Clean It From a Prefix
You can even go further and check if your hostname has a prefix, such as ‘www,’ and erase that prefix from the array by using the Array.shift()
method:
// Clean domain name value from 'www' or other prefix
function cleanDomain(removeValue) {
var domainName = window.location.hostname.split('.');
if (domainName.includes(removeValue)) {
domainName.shift();
console.log(domainName);
}
else {
console.log(domainName);
}
}
cleanDomain('www');
In Conclusion
Thank you for reading this far and I hope this tutorial helped you get the job done.
The window
object in JavaScript has a number of useful read-only properties that can be useful in your daily work. I recommend you experiment with them and learn them, as using them can make your code faster and leaner.