How to Get The Current URL in JQuery – Definitive guide

URL is the uniform resource locater and the current URL shows the address of the website.

You can get the current URL in JQuery using $(location).attr('href') statement.

In this tutorial, you’ll learn the different methods available to get URLs in JQuery.

If You’re in Hurry…

You can use the below code snippet to get the current URL in JQuery and log it in the console.

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

When you check in the console, you’ll see the current URL of the page printed as shown below.

Output

https://www.jsowl.com/how-to-get-current-url-in-jquery

If You Want to Understand Details, Read on…

A URL contains different parts in it. Such as domain, port, path, and parameters. Let’s see the details of the URL structure with a sample URL.

When using JQuery, you need to use $() or JQuery() to denote its a jquery object and prefix # in the element id to access the element using its ID.

To use vanilla javascript to get the current URL, read How to Get the Current URL in Javascript?

Adding JQuery Reference

Add the below reference to the Jquery script. Otherwise, you’ll get Uncaught ReferenceError: $ is not defined error when trying to access the elements using $.

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

URl Strucuture and Sample URL

The below syntax shows the structure of the URL.

Syntax

<protocol>//<domain>:<port>/<path>/<query><hash>
  • protocolhttp or https – Denotes the network protocol
  • domain – Denotes the name of your website. Here, it is jsowl.com
  • port – Port number on which the communication happens with the webserver. Most common value is 8080 for http connection and 443 for https connection. 443 is the schemas default port.
  • path – Denotes the path of the current page in the website. path is how-to-get-current-url-in-jquery/ for this page.
  • query – Additional parameters to pass values while communicating to the website. For example, you can use this to pass the username if you want to server different content for each user
  • hash – Denotes the anchor of the page. Normally, this contains any subheading of the page. When you use this, the page will be scrolled automatically to this section. Current URL
https://www.jsowl.com/how-to-get-current-url-in-jquery/

Using window.location.href

The href property of the location interface stringifies the whole URL of the current page and returns it to the caller.

$(location).attr('href')

You can create a javascript method to return the current URL and reuse this method whenever you want to know the current URL.

Creating JS method to return a URL

function getURL() {
  return $(location).attr('href');
}

This method returns the current URL to the caller.

Get Domain From URL

When working with different domains, you may need to know the domain of the current URL.

The hostname property of the location interface returns the domain name of the current URL.

Use the below statement to log the domain name in the console.

Code

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

Output

jsowl.com

Get Current URL Path

When working with web applications with different pages, you need to get the current URL path to customize some options based on the page.

The pathname property of the location interface returns the pathname of the current webpage.

Use the below statement to log the current webpage path in the console.

Code

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

Output

how-to-get-current-url-in-jquery/

This is how you can get the path of the current URL in javascript.

Get URL Parameter

When working with applications that support customizations or caching, then you need to pass the options using the parameters to customize it.

For example, this website uses wp-rocket plugin for caching. When you want to see any uncached version of the page in this website, then you need to pass the parameter npwprocket with value 1 as shown below.

URL With Parameter

https://www.jsowl.com/how-to-get-current-url-in-jquery/?nowprocket=1

Now to get the URL parameters in JQuery, use the search property in the location interface.

It will list all the parameters passed in the URL including the ? at the beginning.

Code

console.log($(location).attr('search'));

Output

?nowprocket=1

Get URL without Parameters

If you want to get the full URL(Including domain and path) without parameters, there is no explicit property available.

You need to get the hostname and the pathname and concatenate it.

For example, the below URL includes domain name, path, and a parameter.

Sample URL

https://www.jsowl.com/how-to-get-current-url-in-jquery/?nowprocket=1

To get only the URL with path, use the following code.

Code

console.log($(location).attr('host') + $(location).attr('pathname'));

You’ll see the below output.

Output

https://www.jsowl.com/how-to-get-current-url-in-jquery/

This is how you can get the URL excluding the parameters in JQuery.

Get URL Port

You need to get the port details from a URL for any developmental or configuration purposes.

The port property of the location interface returns the Port of the URL.

Code

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

The default port of the https URL is 443. Hence, you’ll see the output as 443. However, if you are using any other applications hosted in different server configurations, you’ll see the appropriate port.

Output

443

This is how you can get the port number of the current URL in JQuery.

Get Last Part of URL

If you want to get the last part of the URL for any programmatic purposes, you can get it using the substring method.

Find the last index of the / and get the right side part of the split substring to get the last part of the URL.

Code

var url = $(location).attr('href');

console.log(url.substring(url.lastIndexOf('/') + 1));

Output

how-to-get-current-url-in-jquery/

JSfiddle

This tutorial is available in this JSFiddle.

Conclusion

URLs play an essential role for any webpage. It is important to find the current URL in JQuery to manipulate the current web pages.

In this tutorial, you’ve learned how to get the current URL in Jquery. You’ve also learned how to get the different parts of the URL, such as domain, path, port number, and parameters.

Modern web browsers support the tabbed way of browsing. You can follow the same steps to get the current tab URL in JQuery.

If you’ve any questions, please comment below.

You May Also Like

Leave a Comment