How to Get the Current URL with JavaScript?

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:

Use window.location object to get the current URL in JavaScript

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.

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.