How to Get the Current URL via JavaScript: An Under the Hood Breakdown

How to Get the Current URL via JavaScript: Understanding What's Under the Hood

Imagine: you're sitting at your computer, you've opened a browser, and a long link is displayed in the address bar. You want your JavaScript script to "read" this link, break it down into parts, and do something useful with them. Sound familiar? You bet! This is one of the most popular questions on Stack Overflow — "Get the current URL with JavaScript?" has garnered hundreds of thousands of views. Why? Because no serious project can do without this task: dynamic navigation, analytics, forms, AJAX requests — everywhere you need to know where you are.

In this article, I won't just show you the magic line window.location.href, but will look under the hood of the browser. You will learn how the location object is structured, what properties it stores, how to safely parse a URL, and what pitfalls await you. Let's go!

Meet the window.location Object

Every time you open a web page, the browser creates a special object — window.location. It lives in the global namespace and contains all the information about the current URL. Just type in the console:

console.log(window.location);

You will see an object with many properties. The most popular ones are:

\n
• href — the full URL string (e.g., https://pythonlib.ru/blog?page=2#comments).
\n
• protocol — the protocol (https: or http:).
\n
• hostname — the host name (pythonlib.ru).
\n
• port — the port (if not specified, it's an empty string).
\n
• pathname — the path to the file or page (/blog).
\n
• search — the query string (everything after ?, e.g., ?page=2).
\n
• hash — the link fragment (everything after #, e.g., #comments).
\n

The browser automatically updates these properties when you follow a link or change the address bar. You can't just overwrite them (well, almost — more on that later), but you can read them as much as you like.

How to Get the Full URL: The Simplest Way

If you need the entire string, use the href property:

const currentUrl = window.location.href;\nconsole.log(currentUrl);\n// Output: "https://pythonlib.ru/blog?page=2#comments"

This is the "gold standard." It works in all browsers, including Internet Explorer (yes, it's still alive in some corporate networks). Remember it as the universal answer to the question "how to get the current URL in JavaScript."

Breaking Down the URL into Parts: Why Is This Necessary?

Let's say you're writing an online store. You need to understand what parameters are passed in the query string: ?category=books&sort=price. Or you want to smoothly scroll the page to an element with the anchor #reviews. Just taking href is not enough. You need to break it down into its components.

The most reliable way in modern JavaScript is to use the URL constructor:

const url = new URL(window.location.href);\nconsole.log(url.searchParams.get('category')); // "books"\nconsole.log(url.hash); // "#reviews"

The URL object provides access to the convenient searchParams method — this is a real query string parser. You can get, add, and remove parameters without manually splitting the string. Under the hood, it uses the same window.location properties but provides a cleaner API.

Under the Hood: How the Browser Processes a URL

When you enter an address into the browser's address bar, a whole chain of events occurs. The browser parses the string into components using the algorithm described in the WHATWG URL Standard specification. It looks something like this