How to get the current URL of the page in JavaScript/JQUERY?

We’ll discuss different methods of window.location object to obtain the current URL of the page in JavaScript or JQUERY. The current URL represents a full page URL. We can also get current domain, hostname, pathname, protocol, port, hash and other components of the full page URL. You can also redirect the current page URL to other addresses with the properties of window.location object.

We take a sample URL URL to understand the components of a URL. The current URL comprises the following components.

• Protocol (http, https)
• Sub domain (forum)
• Root domain (web4college.com)
• Top-Level Domain (com)
• Path (/questions/index.php)
• Query string (id=5)
• hash (#go)

Get URL in JavaScript

In JavaScript, window.location object handles the URL. There are different methods that we can use to get the current full page URL or domain URL.

In this case, we'll take the current page URL as sample.

Window.location.href

It returns the full page URL i.e. https://www.web4college.com/js/questions/how-to-get-current-url-in-javascrip-jquery.php

Window.location.href

>> https://www.web4college.com/js/questions/how-to-get-current-url-in-javascrip-jquery.php

We can use regular expressions to extract the domain, sub domain and other components from this full page URL.

Window.location.pathname

It returns only the path i.e. js/questions/how-to-get-current-url-in-javascrip-jquery.php

Window.location.pathname

>> /js/questions/how-to-get-current-url-in-javascrip-jquery.php

Window.location.hostname

It returns the hostname of the url i.e. web4college.com

Window.location.href

>> www.web4college.com

Window.location.origin

It returns the base URL of the page i.e. both the protocol and the hostname

Window.location.origin

>> https://www.web4college.com

Please don’t confuse the window.location.origin with window.location.hostname. Because it is a part of hostname and protocol.

Window.location.protocol

It returns the protocol of the URL.

Window.location.protocol

>> https

Window.location.hash

It returns the hashed part of the current URL that comes after the hash ('#'). This hash is useful to navigate different sections within a single page.

Window.location.hash

Since we don't have hashed part in the current page URL, it can't return any hashed part.

Window.location.port

It returns the port number present in the address. For example, 80, 3000, etc.

Window.location.port

Since we don't have port in the current URL, it can't return any port number.

Get current URL in JQUERY

You can also get the current page URL with the JQUERY. See the following examples.

Again We have an example URL, https://forum.web4college.com:3000/questions/index.php?id=5#go

$(location).attr('href');

It returns the full page address and is the same as window.location.host

$(location).attr('href');

>> https://forum.web4college.com/questions/index.php?id=5(#go)

$(location).attr('pathname');

It returns only the pathname of the page address and is the same as window.location.pathname

$(location).attr('pathname');

>> /js/questions/how-to-get-current-url-in-javascrip-jquery.php

$(location).attr('hostname');

It returns the hostname of the current URL and is the same as window.location.hostname

$(location).attr('hostname');

>> web4college.com

$(location).attr('origin');

It is a combination of hostname and protocol and is the same as window.location.origin

$(location).attr('origin');

>> https://www.web4college.com

$(location).attr('protocol');

It returns the protocol present in the current URL and is the same as window.location.protocol

$(location).attr('protocol');

>> https

$(location).attr('hash');

It returns the hashed part and is the same as window.location.hash

$(location).attr('hash');

>> #go

$(location).attr('port');

It returns the port number and is the same as window.location.port

$(location).attr('port');

>> 3000

Summary

You can use any of the above-given methods to get the URL or the components of the URL. You can also change the values of the properties of the window.location object to redirect the URL to other addresses.