How do you get the current URL in JavaScript?

In JavaScript, getting the current URL refers to obtaining the URL of the current webpage or the web page’s address that the user is currently viewing in their web browser.

There are various ways to get the current URL in JavaScript:

1. Using the window.location object:

The window.location object is a built-in object in JavaScript that represents the current URL of the web page. It provides properties and methods to manipulate the current URL.

To get the current URL, you can simply access the "href" property of the window.location object, like this:

var currentURL = window.location.href;
console.log(currentURL);

The window.location.href property returns a string that contains the complete URL of the current web page, including the protocol (e.g., "http://" or "https://"), domain name, port number (if specified), path, and query parameters.

2. Using the document.URL property:

The document.URL property is another way to get the current URL in JavaScript. It returns the same value as window.location.href, which is the complete URL of the current web page.

Here’s an example:

var currentURL = document.URL;
console.log(currentURL);

3. Using the location.toString() method:

The location object in JavaScript also has a toString() method that returns the current URL as a string. You can use it to get the current URL like this:

var currentURL = location.toString();
console.log(currentURL);

4. Using the window.location.protocol, window.location.hostname, window.location.port, window.location.pathname, and window.location.search properties:

If you want to access different parts of the current URL separately, you can use the window.location object’s properties, such as window.location.protocol, window.location.hostname, window.location.port, window.location.pathname, and window.location.search.

For example:

var protocol = window.location.protocol;
var hostname = window.location.hostname;
var port = window.location.port;
var pathname = window.location.pathname;
var search = window.location.search;

console.log("Protocol: " + protocol);
console.log("Hostname: " + hostname);
console.log("Port: " + port);
console.log("Pathname: " + pathname);
console.log("Search: " + search);

The window.location.protocol property returns the protocol of the current URL (e.g., "http:" or "https:"). The window.location.hostname property returns the domain name of the current URL (e.g., "www.example.com"). The window.location.port property returns the port number of the current URL (e.g., "80" or "443" for HTTP and HTTPS, respectively). The window.location.pathname property returns the path of the current URL (e.g., "/example/page.html"). The window.location.search property returns the query parameters of the current URL (e.g., "?param1=value1&param2=value2").

5. Using the URL object:

The URL object is a built-in object in JavaScript that provides various methods and properties for working with URLs. You can create a new URL object with the current URL, and then access its properties and methods to get different parts of the current URL.

For example:

var currentURL = new URL(window.location.href);
var protocol = currentURL.protocol;
var hostname = currentURL.hostname;
var port = currentURL.port;
var pathname = currentURL.pathname;
var search = currentURL.search;

console.log("Protocol: " + protocol);
console.log("Hostname: " + hostname);
console.log("Port: " + port);
console.log("Pathname: " + pathname);
console.log("Search: " + search

6. Using the window.location.hash property:

The window.location.hash property allows you to get the hash portion of the current URL, which includes the fragment identifier (e.g., "#section1") if present.

You can simply access the window.location.hash property to get the current hash value, like this:

var hash = window.location.hash;
console.log(hash);

7. Using the window.location.origin property:

The window.location.origin property returns the origin of the current URL, which includes the protocol, domain name, and port number (if specified). You can use this property to get the origin of the current URL, like this:

var origin = window.location.origin;
console.log(origin);

8. Using the window.location.searchParams object:

The window.location.searchParams object is a built-in object that provides methods to work with query parameters in the URL. You can use it to get and manipulate the query parameters of the current URL.

Here’s an example:

var searchParams = new URLSearchParams(window.location.search);
var param1 = searchParams.get("param1");
var param2 = searchParams.get("param2");

console.log("param1: " + param1);
console.log("param2: " + param2);

In this example, we create a new URLSearchParams object with the window.location.search property, which represents the query parameters of the current URL.

Then, we can use the get() method of the URLSearchParams object to retrieve the values of specific query parameters.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.