Get the current URL with JavaScript?

How to Get the Current URL with JavaScript

Learn various JavaScript methods to retrieve the full URL, hostname, path, and other components of the current web page.

Accessing the current URL is a fundamental task in web development, often required for dynamic content loading, analytics tracking, conditional rendering, or building navigation. JavaScript provides several properties within the window.location object that allow you to retrieve different parts of the URL. This article will guide you through the most common methods and their practical applications.

Understanding the window.location Object

The window.location object (or simply location) is a special object that contains information about the current URL. It's part of the Window interface and provides properties to access various components of the URL, such as the protocol, hostname, port, pathname, search query, and hash fragment. Understanding these components is key to effectively manipulating and retrieving URL information.

flowchart LR
    A[window.location] --> B[href]
    A --> C[protocol]
    A --> D[host]
    A --> E[hostname]
    A --> F[port]
    A --> G[pathname]
    A --> H[search]
    A --> I[hash]
    B["Full URL (href)"]
    C["Protocol (e.g., 'http:')"]
    D["Host (hostname:port)"]
    E["Hostname (e.g., 'example.com')"]
    F["Port (e.g., '8080')"]
    G["Pathname (e.g., '/path/to/page.html')"]
    H["Query String (e.g., '?param=value')"]
    I["Hash Fragment (e.g., '#section')"]

Components of the window.location object

Retrieving the Full URL

The most straightforward way to get the complete URL of the current page is by using the window.location.href property. This property returns a string containing the entire URL, including the protocol, hostname, port, path, query string, and hash fragment.

// Get the full URL
const fullUrl = window.location.href;
console.log(fullUrl); // Example: "https://www.example.com:8080/path/page.html?query=string#hash"

// You can also use document.URL, though window.location.href is generally preferred
const documentUrl = document.URL;
console.log(documentUrl); // Same as window.location.href

Using window.location.href to get the full URL

Accessing Specific URL Components

Beyond the full URL, you often need only specific parts. The window.location object provides individual properties for each component, making it easy to extract exactly what you need.

// Assuming current URL is: https://www.example.com:8080/path/page.html?id=123&name=test#section1

console.log(window.location.protocol); // "https:"
console.log(window.location.host);     // "www.example.com:8080"
console.log(window.location.hostname); // "www.example.com"
console.log(window.location.port);     // "8080" (empty string if default port 80/443)
console.log(window.location.pathname); // "/path/page.html"
console.log(window.location.search);   // "?id=123&name=test"
console.log(window.location.hash);     // "#section1"

Extracting individual URL components using window.location properties

Parsing Query Parameters

The window.location.search property returns the query string, including the leading ?. To work with individual parameters, you'll typically need to parse this string. The URLSearchParams API is the modern and recommended way to do this.

// Assuming current URL is: https://www.example.com/search?query=javascript&page=2

const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);

const queryValue = urlParams.get('query');
const pageValue = urlParams.get('page');

console.log(`Query: ${queryValue}`); // "Query: javascript"
console.log(`Page: ${pageValue}`);   // "Page: 2"

// Iterate over all parameters
for (const [key, value] of urlParams.entries()) {
  console.log(`${key}: ${value}`);
}

Parsing URL query parameters using URLSearchParams