JavaScript: Get Current URL and Components (Protocol, Domain, Port, Path, Query, 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 protocol, domain, port, path, query and hash.

If you'd like to avoid handling the parsing of URLs manually, especially with more complex URL formats such as Git's - read on How to Easily Parse URLs in JavaScript with parse-url!

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 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 - 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.

Generally speaking, URLs have a fairly standardized structure, where certain elements are optional, while others aren't:

<protocol>//<domain>:<port>/<path>/<query><hash>

Now, we can take a closer look at how to access the current URL, as well as each of its components using JavaScript.

How to Get Current URL in JavaScript

In JavaScript, the 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 href property:

let url = window.location.href
console.log(url)

This results in:

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

The 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

The window.location.origin property returns the base URL (protocol + hostname + port number) of the current URL:

console.log(window.location.origin)

https://www.stackabuse.com:8080

Get URL Protocol

The window.location.protocol property returns the protocol used by the current URL:

console.log(window.location.protocol)

https://

Get URL Host and Hostname

The window.location.host property returns the hostname and the port number of the current URL:

console.log(window.location.host)

www.stackabuse.com:8080

On the other hand, the window.location.hostname property returns the hostname of the current URL:

console.log(window.location.hostname)

www.stackabuse.com

Get URL Port

The window.location.port property returns the port number of the current URL:

console.log(window.location.port)

8080

GET URL Path

The window.location.pathname property returns the path section of the current URL:

console.log(window.location.pathname)

/category/article-title.html

Get URL Query and Hash

The window.location.search property returns **the query section ** of the current URL:

console.log(window.location.search)

?searchterm=Example+title

The window.location.hash property returns the hash section of the current URL:

console.log(window.location.hash)

#2

Conclusion

As we've seen, JavaScript provides a powerful, yet simple, way of accessing the current URL. The 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.

The Location object also can change and manipulate the current URL, as well as redirect the page to the new URL.