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 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 -
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 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:
Locationobject contains the information regarding the URL of the currently loaded webpage. It belongs to
window, though, we can access it directly because
windowis hierarchically located at the top of the scope To get the current URL, we'll leverage the
Locationobject and retrieve its
var url = window.location.href console.log(url)
This results in:
hrefproperty contains the full URL to the currently loaded resource. If you'd like to retrieve some certain components, rather than the entire URL, the
Locationobject has various properties as well.
Get URL Origin
window.location.originproperty returns the base URL (protocol + hostname + port number) of the current URL:
Get URL Protocol
window.location.protocolproperty returns the protocol used by the current URL:
Get URL Host and Hostname
window.location.hostproperty returns the hostname and the port number of the current URL:
On the other hand, the
window.location.hostnameproperty returns the hostname of the current URL:
Get URL Port
window.location.portproperty returns the port number of the current URL:
GET URL Path
window.location.pathnameproperty returns the path section of the current URL:
Get URL Query and Hash
window.location.searchproperty returns **the query section ** of the current URL:
window.location.hashproperty returns the hash section of the current URL:
Locationobject, accessed by the
Windowinterface enables us to get not only the string representation of the current URL but every single section of it. The
Locationobject also can change and manipulate the current URL, as well as redirect the page to the new URL.