Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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?
An alternative term for a web address is a URL. For example, tutorialpoints.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 ask web servers for specific pages. 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.tutorialpoints.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
Typical URL Schemes
HTTP - hypertext transfer protocol
HTTP is used in common web pages. This is not an encrypted protocol.
HTTPS - secure hypertext transfer protocol
HTTPS is used in secure web pages. This is an encrypted protocol.
FTP - File transfer protocol
FTP is used to download or upload files.
Now let us see the way to get the hostname in a URL.
Using hostname property of current window location
In this section, we will see how to get the hostname in a url using the hostname property of the current window location
Syntax
Follow the syntax below to get the hostname.
First window.location.hostname;
Here we access the hostname property from the current window's location.
Algorithm
STEP 1 − Get the current URL
STEP 2 − Display the hostname from the current URL using the current window location hostname syntax.
Example
In this example, we have set empty Dom to display output. We have written the code to get the hostname from the current website location.
<html> <body> <h2>Using the <i>current window location's hostname</i> property</h2> <p id="idNullDom"></p> <p id="idHostDom"></p> <script> var varUrl = window.location.href; var varNullDom = document.getElementById("idNullDom"); varNullDom.innerHTML = "Current url " + varUrl; var varHostDom = document.getElementById("idHostDom"); varHostDom.innerHTML = "Location hostname " + (window.location.hostname); </script> </body> </html>
Using hostname Property of the URL.
In this section, we will see how to get the hostname in a URL using the hostname property of any URL. Here, we have created the custom URL object using the new URL() constructor.
Syntax
Follow the syntax below to get the hostname.
var url = new URL("www.sample.com");
var hostname = url.hostname;
Here we access the hostname property from the URL directly. We use new URL method to create a new URL and then the hostname property of this url is taken.
Example
In this example, the code creates a sample url using new URL() method. The he hostname is displayed by accessing the hostname property of the URL itself.
<html> <body> <h2>Using the <i>any url's hostname</i> property</h2> <p id="idSampDom"></p> <script> var sampUrl = new URL("https://www.tutorialspoint.com/How-toextract-the-hostname-portion-of-a-URL-in-JavaScript"); var varSampDom = document.getElementById("idSampDom"); varSampDom.innerHTML = "url hostname " + (sampUrl.hostname); </script> </body> </html>
In this tutorial, we have learned to get the hostname in a URL using the hostname property in JavaScript.
The hostname property is a built-in JavaScript property and easy to access the hostname from the current URL as well as from any URL created using new URL() method.
9K+ Views
