Location Object in Javascript

If you want to get all information about the current page URL, you can use the location object.

It is a global object that is available in all browsers. It is used to get the current URL, hostname, pathname, protocol, port, and other information.

To access the location object, you can use the window.location or document.location or just location.

Properties of Location Object

The location object has many properties that are used to get information about the current page URL.

Here is the list of all properties of the location object.

Property	Description
location.href	Returns the entire URL of the current page.
location.protocol	Returns the protocol of the current page URL. It returns the protocol with a colon (:) at the end. For example, http: or https:
location.host	Returns the hostname and port number of the current page URL.
location.hostname	Returns the hostname of the current page URL.
location.port	Returns the port number of the current page URL.
location.pathname	Returns the path of the current page URL.
location.search	Returns the query string of the current page URL.
location.hash	Returns the hash value of the current page URL.

Methods of Location Object

The location object has many methods. These methods are used to change the current page URL.

Here is the list of all methods of the location object.

Method	Description
location.assign()	Loads a new document.
location.reload()	Reloads the current document.
location.replace()	Replaces the current document with a new one.

Get Current URL Path

To get the current URL path, you can use the location.href property.

Here is an example to get the current URL path.

Example

var url = location.href;
console.log(url);

▶ Try it

Get Hostname From URL

There are 2 properties that return the hostname of the URL - location.host and location.hostname.

The location.host property returns the hostname and port number of the current page URL.

The location.hostname property returns the hostname of the current page URL.

Example

// hostname with port number
var host = location.host;
console.log("Host - " + host);

// just hostname
var hostName = location.hostname;
console.log("HostName - " + hostName);

▶ Try it

Get Protocol From URL Javascript

To get the protocol of the current page URL, you can use the location.protocol property.

Here is an example to get the protocol of the current page URL.

Example

var Protocol = location.protocol;
console.log("Protocol - " + Protocol);

▶ Try it

Get Pathname From URL Javascript

To get the pathname of the current page URL, you can use the location.pathname property.

Example

var Pathname = location.pathname;
console.log("Pathname - " + Pathname);

▶ Try it

Get Query String Using Javascript

We can get a query string from the search property of the location object. It will return everything after ? including question marks.

Example

var queryString = location.search;
console.log("queryString - " + queryString);

▶ Try it

URL assign and replace Method

Using the assign() and replace() method of location object to load another document by passing the address of the new document.

To load new documents, pass the URL as a parameter. Example: location.assign("https://www.tutorialstonight.com").

Example

location.assign("https://www.tutorialstonight.com");

▶ Try it

There is another method replace() which does the same task of loading new documents in the window but it does not create any entry of browser history, hence can't go to the previous page after using this but can go to the forward direction.

Example

location.replace("https://www.tutorialstonight.com");

▶ Try it

❮ Prev Next ❯