Introduction

In browser JavaScript, "current page" can mean different things: full URL, pathname, route name, or pagination index in app state. Choosing the right definition avoids bugs in analytics, navigation guards, and UI highlighting. The browser APIs for current location are simple, but SPA routing adds additional considerations.

Core Sections

Get Full URL and Path from window.location

For standard web pages, window.location provides everything you need.

1console.log(window.location.href);      // full URL
2console.log(window.location.origin);    // protocol plus host
3console.log(window.location.pathname);  // path only
4console.log(window.location.search);    // query string
5console.log(window.location.hash);      // fragment

Use pathname for route-like checks and href for full-link logging.

Parse Query Parameters Safely

Avoid manual string splitting for query parameters. Use URLSearchParams instead.

const params = new URLSearchParams(window.location.search);
const page = params.get("page") || "1";
console.log("page param:", page);

This handles encoding and missing values more reliably.

Current Page in Single-page Applications

In SPA frameworks, navigation may update the URL without full reload. Use framework router state when available, and listen to route changes for analytics.

window.addEventListener("popstate", () => {
    console.log("navigated to:", window.location.pathname);
});

For client-side router libraries, prefer official route hooks over raw global listeners.

Determine Active Navigation Link

A common use case is marking the active menu item based on current path.

1function markActiveNav() {
2    const current = window.location.pathname;
3    document.querySelectorAll("nav a").forEach((a) => {
4        const target = new URL(a.href).pathname;
5        a.classList.toggle("active", target === current);
6    });
7}
8
9markActiveNav();

This keeps navigation state aligned with the current page URL.

Differentiate URL Page from Pagination Page

Do not confuse current URL path with current page number in paginated content lists. Pagination state may live in query params, app state, or server-rendered context. Define naming clearly, such as currentRoute and currentPageIndex.

const currentRoute = window.location.pathname;
const currentPageIndex = Number(new URLSearchParams(window.location.search).get("page") || 1);
console.log(currentRoute, currentPageIndex);

Clear naming prevents logic mix-ups in larger codebases.

Security and Reliability Notes

Never trust current URL data blindly for authorization checks. Client-side state can be manipulated. Treat location data as UI context, and enforce permissions on the server or trusted backend API.

For robust analytics, normalize routes before sending events so dynamic IDs do not explode metric cardinality.

Normalize Route Data for Analytics

Raw URL paths can include IDs and transient query values that create noisy analytics dimensions. Normalize route patterns before reporting page views.

1function normalizePath(pathname) {
2    return pathname
3        .replace(/\/users\/\d+/g, "/users/:id")
4        .replace(/\/orders\/\d+/g, "/orders/:id");
5}
6
7const routeForMetrics = normalizePath(window.location.pathname);
8console.log("normalized route:", routeForMetrics);

This keeps dashboards readable and makes trend analysis meaningful. You can still attach raw URLs as debug metadata, but primary metrics should use normalized route identifiers.

Clear route naming conventions make navigation logic and observability far easier to maintain.

In larger applications, build a small routing utility module that exposes getCurrentRoute, getQueryParam, and normalization helpers. Centralized helpers reduce duplicated parsing code and lower the risk of inconsistent behavior between pages. This also makes unit testing route-dependent logic much easier.

Standardized helpers and naming conventions reduce routing bugs during rapid feature delivery.

This discipline improves both debugging speed and analytics data quality.

A small utility layer pays off quickly in large front-end codebases.

Common Pitfalls

• Using raw string parsing for query parameters instead of built-in URL utilities.
• Treating SPA route state exactly like full-page navigation behavior.
• Mixing route path with pagination index semantics.
• Highlighting active links with loose substring checks that match wrong routes.
• Using client URL checks as security controls rather than server validation.

Summary

• Use window.location to access current page URL components.
• Parse query values with URLSearchParams for reliability.
• In SPAs, align with router events and state.
• Separate route identity from pagination index concepts.
• Treat current URL as UI context, not a security boundary.