Get the Full URL or Query String of Current Page in JavaScript

Author — Nitish Kumar

Every now and then you will want to get the full URL of current page in a project you are working on. Fortunately, JavaScript allows us to get different parts of a URL or the complete URL as a unit. In this post, you will learn about different properties of the Location object returned by window.location property. Each of these properties can either return the full URL or a part of it.

On This Page
  1. Get the Full URL of Current Page
  2. Get the Hostname or Domain of Current Page or URL
  3. Get the Path Name of Current Page or URL
  4. Get the Query String of Current Page or URL
  5. Get the Hash or Fragment Identifier of the Current Page or URL
  6. Quick Summary

Get the Full URL of Current Page

You can get the full URL all the current with the user is on using the window.location.href property. The property can be used to get as well as set the current URL. When this value is changed the user will navigate to the supplied URL.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

// Output — "https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot"
console.log(window.location.href);

You can also set the URL to a value that is different from the current origin of the document. This will allow you to take user from a URL like google.com to tutorialio.com/javascript/.

Get the Hostname or Domain of Current Page or URL

You can get the hostname of current page the user is on using the window.location.hostname property. Just like that href property, you can also use hostname to set to get the value of current hostname.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

// Output — "tutorialio.com"
console.log(window.location.hostname);

Get the Path Name of Current Page or URL

Getting the path name of the page or URL the visitor is currently on is also very easy. You just have to use the window.location.pathname property. It will return a string containing the initial / followed by the path of the URL.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

// Output — "/javascript/faqs/index.php"
console.log(window.location.pathname);

Get the Query String of Current Page or URL

You can also extract the query string from a URL with the help of window.location.search property. The property will return a DOMString containing a ‘?’ followed by the parameters or querystring of the URL.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

// Output — "?page=10&sort=views"
console.log(window.location.search);

You can also extract the value of different parameters from the query string using the searchParams property which returns a URLSearchParams object allowing it to access the GET query string arguments in the URL.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

var urlObject = new URL(document.location.href);
var params = urlObject.searchParams;

// Output — 10
var page = params.get("page");

// Output — views
var sort = params.get("sort");

Get the Hash or Fragment Identifier of the Current Page or URL

If the URL contains a fragment identifier or hash, you can extract it using the window.location.hash property. This property returns a # followed by the fragment identifier of the URL.

JavaScript

// Actual URL — https://tutorialio.com/javascript/faqs/index.php?page=10&sort=views#top-spot

// Output — "#top-spot"
console.log(window.location.hash);

Quick Summary

Let’s recap everything that we have covered in this tutorial.

  1. You can get the full URL of the current page using the the window.location.href property.
  2. You can get the domain name from the URL of current page using the window.location.hostname property.
  3. You can get the pathname from the current URL a visitor is on using the window.location.pathname property.
  4. You can get the query string from the current URL using the window.location.search property. You can further get the value of individual parameters using the searchParams property on the URL object.
  5. You can get the hash or fragment identifier from a URL using the window.location.hash property.

Let me know if there is anything that you want me to clarify. Also, you are more than welcome to comment if you know other techniques to get the full URL of current page or extract the hash or query string from that URL in JavaScript.

Rate this post —

Very PoorPoorAverageGoodExcellent (No Ratings Yet)
Loading...

Tags:

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0%