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.
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.
Get Pathname From URL Javascript
To get the pathname of the current page URL, you can use the location.pathname property.
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.
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")
.
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.