{"id":141,"date":"2019-09-16T16:49:03","date_gmt":"2019-09-16T16:49:03","guid":{"rendered":"https:\/\/tutorialio.com\/?p=141"},"modified":"2025-11-04T10:31:25","modified_gmt":"2025-11-04T10:31:25","slug":"get-the-full-url-or-query-string-of-current-page-in-javascript","status":"publish","type":"post","link":"https:\/\/hellonitish.com\/blog\/get-the-full-url-or-query-string-of-current-page-in-javascript\/","title":{"rendered":"Get the Full URL or Query String of Current Page in JavaScript"},"content":{"rendered":"<p>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 <code>Location<\/code> object returned by <code>window.location<\/code> property. Each of these properties can either return the full URL or a part of it.<\/p>\n<h2 id=\"get-the-full-url-of-current-page\">Get the Full URL of Current Page<\/h2>\n<p>You can get the full URL all the current with the user is on using the <code>window.location.href<\/code> 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.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\n\/\/ Output \u2014 \"https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\"\nconsole.log(window.location.href);<\/code><\/pre>\n<p>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 <code>google.com<\/code> to <code>tutorialio.com\/javascript\/<\/code>.<\/p>\n<h2 id=\"get-the-hostname-or-domain-of-current-page-or-url\">Get the Hostname or Domain of Current Page or URL<\/h2>\n<p>You can get the hostname of current page the user is on using the <code>window.location.hostname<\/code> property. Just like that <code>href<\/code> property, you can also use <code>hostname<\/code> to set to get the value of current hostname.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\n\/\/ Output \u2014 \"tutorialio.com\"\nconsole.log(window.location.hostname);<\/code><\/pre>\n<h2 id=\"get-the-path-name-of-current-page-or-url\">Get the Path Name of Current Page or URL<\/h2>\n<p>Getting the path name of the page or URL the visitor is currently on is also very easy. You just have to use the <code>window.location.pathname<\/code> property. It will return a string containing the initial <code>\/<\/code> followed by the path of the URL.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\n\/\/ Output \u2014 \"\/javascript\/faqs\/index.php\"\nconsole.log(window.location.pathname);<\/code><\/pre>\n<h2 id=\"get-the-query-string-of-current-page-or-url\">Get the Query String of Current Page or URL<\/h2>\n<p>You can also extract the query string from a URL with the help of <code>window.location.search<\/code> property. The property will return a <code>DOMString<\/code> containing a \u2018?\u2019 followed by the parameters or querystring of the URL.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\n\/\/ Output \u2014 \"?page=10&amp;sort=views\"\nconsole.log(window.location.search);<\/code><\/pre>\n<p>You can also extract the value of different parameters from the query string using the <code>searchParams<\/code> property which returns a <code>URLSearchParams<\/code> object allowing it to access the GET query string arguments in the URL.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\nvar urlObject = new URL(document.location.href);\nvar params = urlObject.searchParams;\n\n\/\/ Output \u2014 10\nvar page = params.get(\"page\");\n\n\/\/ Output \u2014 views\nvar sort = params.get(\"sort\");<\/code><\/pre>\n<h2 id=\"get-the-hash-or-fragment-identifier-of-the-current-page-or-url\">Get the Hash or Fragment Identifier of the Current Page or URL<\/h2>\n<p>If the URL contains a fragment identifier or hash, you can extract it using the <code>window.location.hash<\/code> property. This property returns a <code>#<\/code> followed by the fragment identifier of the URL.<\/p>\n<p class=\"lang-name\">JavaScript<\/p>\n<pre><code class=\"language-js\">\/\/ Actual URL \u2014 https:\/\/tutorialio.com\/javascript\/faqs\/index.php?page=10&amp;sort=views#top-spot\n\n\/\/ Output \u2014 \"#top-spot\"\nconsole.log(window.location.hash);<\/code><\/pre>\n<h2 id=\"quick-summary\">Quick Summary<\/h2>\n<p>Let\u2019s recap everything that we have covered in this tutorial.<\/p>\n<ol id=\"summary-points\">\n<li>You can get the full URL of the current page using the the <code>window.location.href<\/code> property.<\/li>\n<li>You can get the domain name from the URL of current page using the <code>window.location.hostname<\/code> property.<\/li>\n<li>You can get the pathname from the current URL a visitor is on using the <code>window.location.pathname<\/code> property.<\/li>\n<li>You can get the query string from the current URL using the <code>window.location.search<\/code> property. You can further get the value of individual parameters using the <code>searchParams<\/code> property on the URL object.<\/li>\n<li>You can get the hash or fragment identifier from a URL using the <code>window.location.hash<\/code> property.<\/li>\n<\/ol>\n<p>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.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[19],"class_list":["post-141","post","type-post","status-publish","format-standard","hentry","category-how-to-guides","tag-javascript"],"_links":{"self":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/comments?post=141"}],"version-history":[{"count":1,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions"}],"predecessor-version":[{"id":10234,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/posts\/141\/revisions\/10234"}],"wp:attachment":[{"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/media?parent=141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/categories?post=141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellonitish.com\/blog\/wp-json\/wp\/v2\/tags?post=141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}