JavaScript Get URL

Retrieving the current URL in JavaScript is a common task in web development. Whether you need to perform analytics, modify page behavior based on the URL, or extract specific query parameters, understanding how to get the URL is essential. In this article, we'll explore several methods to accomplish this.

Why Get the URL?

There are various reasons why you might need to get the current URL in JavaScript, such as:

1. Analytics: Track user behavior and page visits.
2. Dynamic Content: Load or modify content based on the URL.
3. Navigation: Implement custom navigation logic.
4. Query Parameters: Extract and use query parameters for dynamic functionality.

Methods to Get the URL

JavaScript provides multiple ways to retrieve the current URL. Let's explore the most common methods:

Method 1: Using window.location

The window.location object contains information about the current URL. It has several properties that can be used to get different parts of the URL.

Getting the Full URL:

let url = window.location.href;
console.log(url);

Getting the Protocol:

let protocol = window.location.protocol;
console.log(protocol); // Output: http: or https:

Getting the Hostname:

let hostname = window.location.hostname;
console.log(hostname); // Output: www.example.com

Getting the Pathname:

let pathname = window.location.pathname;
console.log(pathname); // Output: /path/to/page

Getting the Search (Query) Parameters:

let searchParams = window.location.search;
console.log(searchParams); // Output: ?param1=value1&param2=value2

Method 2: Using document.URL

The document.URL property returns the entire URL of the current document.

Example:

let url = document.URL;
console.log(url);

Method 3: Using location.origin

The location.origin property returns the protocol, hostname, and port number of the URL.

Example:

let origin = location.origin;
console.log(origin); // Output: http://www.example.com

Extracting URL Parameters

To extract specific query parameters from the URL, you can use the URLSearchParams object.

Example:

let params = new URLSearchParams(window.location.search);

let param1 = params.get('param1');
console.log(param1); // Output: value1

let param2 = params.get('param2');
console.log(param2); // Output: value2

Advanced Usage

Example: Handling Hash Fragments

To get the hash fragment (the part of the URL after the #), use window.location.hash.

Example:

let hash = window.location.hash;
console.log(hash); // Output: #section1

Example: Parsing the URL

You can create a new URL object to parse and manipulate the URL easily.

Example:

let url = new URL(window.location.href);

let protocol = url.protocol;
let hostname = url.hostname;
let pathname = url.pathname;
let searchParams = url.searchParams;

console.log(protocol);   // Output: http:
console.log(hostname);   // Output: www.example.com
console.log(pathname);   // Output: /path/to/page
console.log(searchParams); // Output: URLSearchParams {}

Example: Constructing URLs

You can also construct new URLs using the URL object.

Example:

let url = new URL('http://www.example.com');
url.pathname = '/path/to/page';
url.search = '?param1=value1&param2=value2';

console.log(url.href); // Output: http://www.example.com/path/to/page?param1=value1&param2=value2

Conclusion

Retrieving the current URL in JavaScript is a fundamental skill for web developers. Whether you use window.location, document.URL, or the URL object, each method provides a versatile way to access and manipulate URL components. By understanding these techniques, you can enhance your web applications with dynamic content, analytics, and custom navigation, ensuring a more robust and interactive user experience.