When a user visits a page of your website or application, the URL of the page is displayed in the address bar of their web browser.
The URL is a unique identifier that allows users to access the web page from anywhere on the internet, and it is used by the browsers to request the web page from the server and to display the page content to the user.
Getting the current URL of the page can be very useful in various situations.
For example, you can highlight the navbar items corresponding to the current page. This gives the users clarity about their current location on the website, making it easier for them to navigate to other pages.
In this article, I’ll explain how you can get the current URL with the help of simple Javascript code. So without any further ado, let’s begin.
Getting the Current URL with Window.location.href Property
The only thing you need to get the current URL of the page in JavaScript is the window.location.href
property.
The window.location.href
property returns the entire URL of the current page, including the protocol, domain, port number (if any), path, query string, and fragment identifier.
For example:
function getCurrentURL(){ // Return the current page's URL return window.location.href; } let currentURL = getCurrentURL(); console.log(currentURL); // Output 👇 // 'https://example.com/get-current-url/?author=John'
As you can see from the above output, the window.location.href
property gives you the whole URL of the current page including the query parameters.
Getting Each Part of the Current URL with Window.location
The href
was just one property that we used to get the URL of the current page from the window.location
object.
The window.location
object also has several other properties that provide useful information about the current URL.
These properties are as follows:
window.location.href
– Returns the complete URL of the current page, including the protocol (e.g., “https://”), the domain name, and the path to the resource.window.location.protocol
– Returns the protocol of the current URL (e.g., “https:”).window.location.host
– Returns the hostname and port number of the current URL (e.g., “example.com:8080”).window.location.hostname
– Returns the hostname of the current URL (e.g., “example.com”).window.location.port
– Returns the port number of the current URL (e.g., “8080”).window.location.pathname
– Returns the path and filename of the current URL (e.g., “/folder/page.html”).window.location.search
– Returns the query string of the current URL (e.g., “?key=value”).window.location.hash
– Returns the fragment identifier of the current URL (e.g., “#section”).
For example, if we run the window.location
on a sample page of our website, it will give us an object with the following information:
console.log(window.location); // Output: 👇 // { // "href": "https://programmersportal.com/get-current-url/?author=manoj", // "origin": "https://programmersportal.com", // "protocol": "https:", // "host": "programmersportal.com", // "hostname": "programmersportal.com", // "port": "", // "pathname": "/get-current-url/", // "search": "?author=manoj", // "hash": "" // }
If you want to have a closer look at these properties, you can inspect your browser’s window and see all the properties along with their values there:

Splitting the URL with String.split() Method
You can also get the different parts of the URL by splitting it on each occurrence of the "/"
character.
For splitting the URL string, you can use the String.split()
method.
The String.split()
method splits a string into substrings at a given character(s) and returns an array that contains the resulting substrings.
For example:
// Sample URL const URL = "https://programmersportal.com/get-current-url/?author=manoj"; // Split the URL string at '/' const urlArr = URL.split('/'); console.log(urlArr); // Output: ['https:', '', 'programmersportal.com', 'get-current-url', '?author=manoj']
Conclusion
In this article, we learned how we can get the URL of the currently active page with the help of JavaScript.
In summary, if you want to get the current URL in JavaScript, you can use the global window.location
object.
The window.location
object contains several properties such as the host, hostname, href, origin, port, etc. which you can easily access according to your requirement.
If you only want to get the current URL, you can directly use the window.location.href
property.
Thanks for reading.