JavaScript: Get Current URL and Components (Protocol, Domain, Port, Path, Query, Hash)

JavaScript: Get Current URL and Components (Protocol, Domain, Port, Path, Query, Hash)

JavaScript: Get Current URL and Components (Protocol, Domain, Port, Path, Query, Hash) We'll take a look at how to get the current URL in JavaScript, including its components such as the protocol, domain, port, path, query and hash.

Introduction

In this tutorial, we'll take a look at how to get the current URL of a loaded HTML page, using JavaScript.

Firstly, let's take a look at a URL:

https://www.stackabuse.com:8080/category/article-title.html?searchterm=Example+title#2

It's a made-up URL, that contains several components - the protocoldomainportpathquery and hash.

URL Components

The URL we've defined consists of different segments, divided by certain special characters such as /? and #. Each of these segments is a URL component:

  • Protocol - The protocol of an URL refers to the URL segment which defines which protocol for data transfer is used. In our case, we're using https://, signifying the HTTPS protocol.
  • Domain - The domain, also known as the hostname of an URL refers to the proceeding section of a URL - www.stackabuse.com.
  • Port - The port section of an URL is specified after the domain, preceded by :. Most of the time, the port isn't public, so you'll rarely actually see it in deployed applications, but very commonly in the development phase.
  • Path - The path section of an URL follows the domain name and port. It specifies a single resource on a website, HTML page, image, or some other type of file or directory. In our example, the path refers to the /category/article-title.html segment, meaning that it points to the article-title.html file on the server.
  • Query - The query is a string that is usually used to enable internal searches on a website. The query section refers to the ?articleTitle=Example+title section of the example URL and is a result of the user entering the search term Example title on the article-title.html page of the website.
  • Hash - The hash section is usually used to represent an anchor on the page, which is commonly a heading, but can be any other <div> or tag, given that we aim at its id attribute. In our case, we aim at #2, scrolling the user's view to the tag with an id=2.

javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Hire Dedicated JavaScript Developers -Hire JavaScript Developers

Hire dedicated JavaScript Developers who are proficient in AngularJS, ReactJS, NodeJS, & VueJS frameworks. Get flexible hiring models as per your business requirements.

What is JavaScript - Stackfindover - Blog

What is PHP: - Who invented PHP, how it works, answers to all such questions about PHP, and much other information, you are going to

JavaScript Shopping Cart - Javascript Project for Beginners

JavaScript Shopping Cart - javascript shopping cart tutorial for beginnersBuy me a coffee 🍺 https://www.paypal.com/paypalme/ziddahSource Code: https://bit....

The essential JavaScript concepts that you should understand

The essential JavaScript concepts that you should understand - For successful developing and to pass a work interview

JavaScript compound assignment operators

We use assignment operator in JavaScript to store values in a variable. Read more...