- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
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.
- Related Articles
- Extract hostname from URL string in JavaScript?
- How to extract part of a URL in MySQL?
- How to reverse a portion of an array in JavaScript?
- How to get a decimal portion of a number with JavaScript?
- How to show the full URL of a document with JavaScript?
- How to get the title and full URL of a document in JavaScript?
- How to use JavaScript to replace a portion of string with another value?
- How to encode and decode a URL in JavaScript?
- How to get current URL in JavaScript?
- How to validate URL address in JavaScript?
- How to parse an URL in JavaScript?
- How to decode a URL using JavaScript function?
- How to encode a URL using JavaScript function?
- How to create a URL object using JavaScript?
- How to get the current URL with JavaScript?
