Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to extract the hostname portion of a URL in JavaScript?
In this tutorial, we will see how to extract the hostname portion of a URL in JavaScript.
What is a URL?
A URL (Uniform Resource Locator) is a web address that identifies a specific resource on the internet. For example, tutorialspoint.com is a word-based URL. An IP address can also be used as a URL (ex. 192.168.2.24). Since names are simpler to recall than numbers, most users submit the name's address when searching on the internet.
A URL is a method by which web browsers request specific pages from web servers. The syntax/format of a URL is given below.
Syntax
scheme://prefix.domain:port/path/filename
Parameters
scheme ? specifies the kind of Internet service (http or https is being used in general)
prefix ? specifies a domain prefix (www is the default for http)
domain ? describes the internet domain name (ex. tutorialspoint.com)
port ? specifies the host's port number (80 is the default for http)
path ? establishes a server-side path
filename ? specifies the name of a resource or document
Using window.location.hostname for Current Page
The simplest way to get the hostname of the current page is using the window.location.hostname property. This returns only the domain name without protocol, port, or path.
Syntax
window.location.hostname;
Example
This example demonstrates how to extract the hostname from the current page URL using window.location.hostname.
<html>
<body>
<h2>Using the <i>current window location's hostname</i> property</h2>
<p id="currentUrl"></p>
<p id="hostname"></p>
<script>
var currentUrl = window.location.href;
var hostname = window.location.hostname;
document.getElementById("currentUrl").innerHTML = "Current URL: " + currentUrl;
document.getElementById("hostname").innerHTML = "Hostname: " + hostname;
</script>
</body>
</html>
Using URL Constructor for Any URL
To extract the hostname from any URL (not just the current page), you can create a URL object using the new URL() constructor and access its hostname property.
Syntax
var url = new URL("https://www.example.com/path");
var hostname = url.hostname;
Example
This example shows how to extract hostname from a custom URL string using the URL constructor.
<html>
<body>
<h2>Using the <i>URL constructor</i> to extract hostname</h2>
<p id="urlInfo"></p>
<p id="extractedHostname"></p>
<script>
var sampleUrl = new URL("https://www.tutorialspoint.com/javascript/index.htm");
document.getElementById("urlInfo").innerHTML = "Sample URL: " + sampleUrl.href;
document.getElementById("extractedHostname").innerHTML = "Extracted Hostname: " + sampleUrl.hostname;
</script>
</body>
</html>
Multiple URL Examples
Let's see how hostname extraction works with different URL formats:
<html>
<body>
<h2>Hostname Extraction from Different URLs</h2>
<div id="results"></div>
<script>
var urls = [
"https://www.google.com/search?q=javascript",
"http://localhost:3000/api/users",
"https://github.com/user/repo/blob/main/file.js",
"https://subdomain.example.org:8080/path"
];
var results = document.getElementById("results");
urls.forEach(function(urlString) {
var url = new URL(urlString);
results.innerHTML += "<p><b>URL:</b> " + urlString + "</p>";
results.innerHTML += "<p><b>Hostname:</b> " + url.hostname + "</p><hr>";
});
</script>
</body>
</html>
Comparison of Methods
| Method | Use Case | Returns |
|---|---|---|
window.location.hostname |
Current page hostname | Domain name only |
new URL().hostname |
Any URL string | Domain name only |
Conclusion
Extracting hostnames in JavaScript is straightforward using the hostname property. Use window.location.hostname for the current page and new URL().hostname for any URL string. Both methods return clean domain names without protocol or port information.
12K+ Views
