Firstly, let's take a look at a URL:
It's a made-up URL, that contains several components - the protocol, domain, port, path, query and hash.
The URL we've defined consists of different segments, divided by certain special characters such as
#. Each of these segments is a URL component:
Protocol - The protocol of a URL refers to the URL segment which defines which protocol is used for data transfer. 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 -
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.htmlsegment, meaning that it points to the
article-title.htmlfile 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+titlesection of the example URL and is a result of the user entering the search term
Example titleon the
article-title.htmlpage 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
idattribute. In our case, we aim at
#2, scrolling the user's view to the tag with an
Generally speaking, URLs have a fairly standardized structure, where certain elements are optional, while others aren't:
Location object contains the information regarding the URL of the currently loaded webpage. It belongs to
window, though, we can access it directly because
window is hierarchically located at the top of the scope
To get the current URL, we'll leverage the
Location object and retrieve its
let url = window.location.href console.log(url)
This results in:
href property contains the full URL to the currently loaded resource. If you'd like to retrieve some certain components, rather than the entire URL, the
Location object has various properties as well.
Get URL Origin
window.location.origin property returns the base URL (protocol + hostname + port number) of the current URL:
Get URL Protocol
window.location.protocol property returns the protocol used by the current URL:
Get URL Host and Hostname
window.location.host property returns the hostname and the port number of the current URL:
On the other hand, the
window.location.hostname property returns the hostname of the current URL:
Get URL Port
window.location.port property returns the port number of the current URL:
GET URL Path
window.location.pathname property returns the path section of the current URL:
Get URL Query and Hash
window.location.search property returns **the query section ** of the current URL:
Check out our hands-on, practical guide to learning Git, with best-practices, industry-accepted standards, and included cheat sheet. Stop Googling Git commands and actually learn it!
window.location.hash property returns the hash section of the current URL:
Location object, accessed by the
Window interface enables us to get not only the string representation of the current URL but every single section of it.
Location object also can change and manipulate the current URL, as well as redirect the page to the new URL.