Get current URL with jQuery?

JavascriptJqueryUrl

Javascript Problem Overview

I am using jQuery. How do I get the path of the current URL and assign it to a variable?

Example URL:

http://localhost/menuname.de?foo=bar&number=0

Javascript Solutions

Solution 1 - Javascript

To get the path, you can use:

var pathname = window.location.pathname; // Returns path only (/path/example.html)
var url      = window.location.href;     // Returns full URL (https://example.com/path/example.html)
var origin   = window.location.origin;   // Returns base URL (https://example.com)

Solution 2 - Javascript

In pure jQuery style:

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

The location object also has other properties, like host, hash, protocol, and pathname.

Solution 3 - Javascript

http://www.refulz.com:8082/index.php#tab2?foo=789

Property	Result
------------------------------------------
host    	www.refulz.com:8082
hostname	www.refulz.com
port        8082
protocol	http:
pathname	index.php
href	    http://www.refulz.com:8082/index.php#tab2
hash	    #tab2
search	    ?foo=789

var x = $(location).attr('<property>');

This will work only if you have jQuery. For example:

<html>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script>
  $(location).attr('href');      // http://www.refulz.com:8082/index.php#tab2
  $(location).attr('pathname');  // index.php
</script>
</html>

Solution 4 - Javascript

If you need the hash parameters present in the URL, window.location.href may be a better choice.

window.location.pathname
=> /search

window.location.href 
 => www.website.com/search#race_type=1

Solution 5 - Javascript

You'll want to use JavaScript's built-in window.location object.

Solution 6 - Javascript

Just add this function in JavaScript, and it will return the absolute path of the current path.

function getAbsolutePath() {
    var loc = window.location;
    var pathName = loc.pathname.substring(0, loc.pathname.lastIndexOf('/') + 1);
    return loc.href.substring(0, loc.href.length - ((loc.pathname + loc.search + loc.hash).length - pathName.length));
}

I hope it works for you.

Solution 7 - Javascript

window.location is an object in javascript. it returns following data

window.location.host          #returns host
window.location.hostname      #returns hostname
window.location.path          #return path
window.location.href          #returns full current url
window.location.port          #returns the port
window.location.protocol      #returns the protocol

in jquery you can use

$(location).attr('host');        #returns host
$(location).attr('hostname');    #returns hostname
$(location).attr('path');        #returns path
$(location).attr('href');        #returns href
$(location).attr('port');        #returns port
$(location).attr('protocol');    #returns protocol

Solution 8 - Javascript

This is a more complicated issue than many may think. Several browsers support built-in JavaScript location objects and associated parameters/methods accessible through window.location or document.location. However, different flavors of Internet Explorer (6,7) don't support these methods in the same way, (window.location.href? window.location.replace() not supported) so you have to access them differently by writing conditional code all the time to hand-hold Internet Explorer.

So, if you have jQuery available and loaded, you might as well use jQuery (location), as the others mentioned because it resolves these issues. If however, you are doing-for an example-some client-side geolocation redirection via JavaScript (that is, using Google Maps API and location object methods), then you may not want to load the entire jQuery library and write your conditional code that checks every version of Internet Explorer/Firefox/etc.

Internet Explorer makes the front-end coding cat unhappy, but jQuery is a plate of milk.

Solution 9 - Javascript

For the host name only, use:

window.location.hostname

Solution 10 - Javascript

This will also work:

var currentURL = window.location.href;

Solution 11 - Javascript

java-script provides many methods to retrieve current URL which is displayed in browser's address bar.

Test URL :

http://
stackoverflow.com/questions/5515310/get-current-url-with-jquery/32942762
?
rq=1&page=2&tab=active&answertab=votes
#
32942762


resourceAddress.hash();
console.log('URL Object ', webAddress);
console.log('Parameters ', param_values);

Function:

var webAddress = {};
var param_values = {};
var protocol = '';
var resourceAddress = {
	
	fullAddress : function () {
		var addressBar = window.location.href;
		if ( addressBar != '' && addressBar != 'undefined') {
			webAddress[ 'href' ] = addressBar;
		}
	},
	protocol_identifier : function () {	resourceAddress.fullAddress();
	
		protocol = window.location.protocol.replace(':', '');
		if ( protocol != '' && protocol != 'undefined') {
			webAddress[ 'protocol' ] = protocol;
		}
	},
	domain : function () {		resourceAddress.protocol_identifier();
	
		var domain = window.location.hostname;
		if ( domain != '' && domain != 'undefined' && typeOfVar(domain) === 'string') {
			webAddress[ 'domain' ] = domain;
			var port = window.location.port;
			if ( (port == '' || port == 'undefined') && typeOfVar(port) === 'string') {
				if(protocol == 'http') port = '80';
				if(protocol == 'https') port = '443';			
			}
			webAddress[ 'port' ] = port;
		}
	},
	pathname : function () {		resourceAddress.domain();
	
		var resourcePath = window.location.pathname;
		if ( resourcePath != '' && resourcePath != 'undefined') {
			webAddress[ 'resourcePath' ] = resourcePath;
		}
	},
	params : function () {		resourceAddress.pathname();
	
		var v_args = location.search.substring(1).split("&");
		
		if ( v_args != '' && v_args != 'undefined')
		for (var i = 0; i < v_args.length; i++) {
			var pair = v_args[i].split("=");
			
			if ( typeOfVar( pair ) === 'array' ) {
				param_values[ decodeURIComponent( pair[0] ) ] = decodeURIComponent( pair[1] );
			}
		}
		webAddress[ 'params' ] = param_values;
	},
	hash : function () {		resourceAddress.params();
	
		var fragment = window.location.hash.substring(1);
		if ( fragment != '' && fragment != 'undefined')
			webAddress[ 'hash' ] = fragment;		
	}
};
function typeOfVar (obj) {
      return {}.toString.call(obj).split(' ')[1].slice(0, -1).toLowerCase();
}
  • protocol « Web-browsers use Internet Protocol by following some rules for communication between WebHosted Applications and Web Client(Browser). (http = 80, https (SSL) = 443, ftp = 21, etc.)

EX: With default port numbers

<protocol>//<hostname>:<port>/<pathname><search><hash>
https://en.wikipedia.org:443/wiki/Pretty_Good_Privacy
http://stackoverflow.com:80/
  • (//) « Host is the name given to an end-point(machine on which resource lives) on the Internet. www.stackoverflow.com - DNS IP Address of an Application (OR) localhost:8080 - localhost

Domain names are which you register by the rules and procedures of the Domain Name System(DNS) tree. DNS servers of someone who manages your domain with IP-Address for addressing purposes. In DNS server hierarchy the Root name of an stackoverlfow.com is com.

gTLDs      - com « stackoverflow (OR) in « co « google

Local system you have to maintain domain's which are not PUBLIC in Host Files. localhost.yash.com « localhsot - subdomain(web-server), yash.com - maindomain(Proxy-Server). myLocalApplication.com 172.89.23.777

  • (/) « The path gives info about the specific resource within the host that the Web client wants to access
  • (?) « An optional query is to pass a sequence of attribute–value pairs separated by a delimiter(&).
  • (#) « An optional fragment is often an id attribute of a specific element, and web browsers will scroll this element into view.

If parameter has an Epoch ?date=1467708674 then use.

var epochDate = 1467708674; var date = new Date( epochDate );

URL enter image description here

Authentication url with username:password, If usernaem/password contains @ symbol
like:

Username = `my_email@gmail`
Password = `Yash@777`

then You need to URL encode the @ as %40. Refer...

http://my_email%40gmail.com:Yash%[email protected]_site.com

encodeURI() (vs) encodeURIComponent() example

var testURL = "http:my_email@gmail:Yash777@//stackoverflow.com?tab=active&page=1#32942762";

var Uri = "/:@?&=,#", UriComponent = "$;+", Unescaped = "(-_.!~*')"; // Fixed
var encodeURI_Str = encodeURI(Uri) +' '+ encodeURI( UriComponent ) +' '+ encodeURI(Unescaped);
var encodeURIComponent_Str =  encodeURIComponent( Uri ) +' '+ encodeURIComponent( UriComponent ) +' '+ encodeURIComponent( Unescaped );
console.log(encodeURI_Str, '\n', encodeURIComponent_Str);
/*
 /:@?&=,# +$; (-_.!~*') 
 %2F%3A%40%3F%26%3D%2C%23 %2B%24%3B (-_.!~*')
*/

Solution 12 - Javascript

You can log window.location and see all the options, for just the URL use:

window.location.origin

for the whole path use:

window.location.href

there's also location.____

.host
.hostname
.protocol
.pathname

Solution 13 - Javascript

This will return the absolute URL of the current page using JavaScript/jQuery.

  • document.URL

  • $("*").context.baseURI

  • location.href

Solution 14 - Javascript

I have this to strip out the GET variables.

var loc = window.location;
var currentURL = loc.protocol + '//' + loc.host + loc.pathname;

Solution 15 - Javascript

If there is someone who wants to concatenate the URL and hash tag, combine two functions:

var pathname = window.location.pathname + document.location.hash;

Solution 16 - Javascript

You can simply get your path using js itself, window.location or location will give you the object of current URL

console.log("Origin - ",location.origin);
console.log("Entire URL - ",location.href);
console.log("Path Beyond URL - ",location.pathname);

Solution 17 - Javascript

All browsers support Javascript window object. It defines the window of the browser.

The global objects and functions become part of the window object automatically.

All global variables are window objects properties and all global functions are its methods.

The whole HTML document is a window property too.

So you can use window.location object to get all url related attributes.

Javascript

console.log(window.location.host);     //returns host
console.log(window.location.hostname);    //returns hostname
console.log(window.location.pathname);         //return path
console.log(window.location.href);       //returns full current url
console.log(window.location.port);         //returns the port
console.log(window.location.protocol)     //returns the protocol

JQuery

console.log("host = "+$(location).attr('host'));
console.log("hostname = "+$(location).attr('hostname'));
console.log("pathname = "+$(location).attr('pathname')); 
console.log("href = "+$(location).attr('href'));   
console.log("port = "+$(location).attr('port'));   
console.log("protocol = "+$(location).attr('protocol'));


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Solution 18 - Javascript

 var currenturl = jQuery(location).attr('href');

Solution 19 - Javascript

Here is an example to get the current URL using jQuery and JavaScript:

$(document).ready(function() {

    //jQuery
    $(location).attr('href');

    //Pure JavaScript
    var pathname = window.location.pathname;

    // To show it in an alert window
    alert(window.location);
});


$.getJSON("idcheck.php?callback=?", { url:$(location).attr('href')}, function(json){
    //alert(json.message);
});

Solution 20 - Javascript

var path = location.pathname returns the path of the current URL (jQuery is not needed). The use of window.location is optional.

Solution 21 - Javascript

The following are examples of useful code snippets that can be used – some of the examples use standard JavaScript functions and are not specific to jQuery:

See 8 Useful jQuery Snippets For URL’s & Querystrings.

Solution 22 - Javascript

To get the URL of the parent window from within an iframe:

$(window.parent.location).attr('href');

NB: only works on same domain

Solution 23 - Javascript

window.location will give you the current URL, and you can extract whatever you want from it...

Solution 24 - Javascript

If you want to get the path of the root site, use this:

$(location).attr('href').replace($(location).attr('pathname'),'');

Solution 25 - Javascript

Use window.location.href. This will give you the complete URL.

Solution 26 - Javascript

See purl.js. This will really help and can also be used, depending on jQuery. Use it like this:

$.url().param("yourparam");

Solution 27 - Javascript

Very Commonly Used top 3 ones are

1. window.location.hostname 
2. window.location.href
3. window.location.pathname

Solution 28 - Javascript

var newURL = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;

Solution 29 - Javascript

By the following code you can get the current URL in Jquery.

$(location).attr('hostname');                //origin URL
$(location).attr('pathname');                // path name
$(location).attr('hash');                    // everything comes after hash

Solution 30 - Javascript

// get current URL

$(location).attr('href');
var pathname = window.location.pathname;
alert(window.location);

Solution 31 - Javascript

In jstl we can access current url path using pageContext.request.contextPath, If you want to do a ajax call,

  url = "${pageContext.request.contextPath}" + "/controller/path"

Ex: in the page http://stackoverflow.com/questions/406192 this will give http://stackoverflow.com/controller/path

Solution 32 - Javascript

SHORTEST way (11 chars) in which you can do it is

let myUrl = ''+location

console.log(myUrl);

Categories
Recommended Javascript Solutions
Recommended Jquery Solutions
Recommended Url Solutions

Previous Solution:

How to determine a Python variable's type?

PythonTypes

Next Solution:

How do I break out of nested loops in Java?

JavaLoopsNested Loops

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionvenkatachalamView Question on Stackoverflow
Solution 1 - JavascriptRyan DohertyView Answer on Stackoverflow
Solution 2 - JavascriptBoris GuéryView Answer on Stackoverflow
Solution 3 - JavascriptrizonView Answer on Stackoverflow
Solution 4 - JavascriptjlfenauxView Answer on Stackoverflow
Solution 5 - JavascriptclawrView Answer on Stackoverflow
Solution 6 - JavascriptNeville BonaviaView Answer on Stackoverflow
Solution 7 - JavascriptWaghView Answer on Stackoverflow
Solution 8 - JavascriptnegutronView Answer on Stackoverflow
Solution 9 - JavascriptMahmoud FarahatView Answer on Stackoverflow
Solution 10 - JavascriptSuresh PattuView Answer on Stackoverflow
Solution 11 - JavascriptYashView Answer on Stackoverflow
Solution 12 - JavascriptdacopenhagenView Answer on Stackoverflow
Solution 13 - JavascriptRiyaz HameedView Answer on Stackoverflow
Solution 14 - JavascriptAram KocharyanView Answer on Stackoverflow
Solution 15 - JavascriptNisView Answer on Stackoverflow
Solution 16 - JavascriptMohideen bin MohammedView Answer on Stackoverflow
Solution 17 - JavascriptSumesh TGView Answer on Stackoverflow
Solution 18 - Javascripthari maliyaView Answer on Stackoverflow
Solution 19 - Javascriptuser3580413View Answer on Stackoverflow
Solution 20 - JavascriptJonathan LinView Answer on Stackoverflow
Solution 21 - JavascriptIssamovitchView Answer on Stackoverflow
Solution 22 - JavascriptCostaView Answer on Stackoverflow
Solution 23 - JavascriptZMR BINUView Answer on Stackoverflow
Solution 24 - Javascriptvikas mehtaView Answer on Stackoverflow
Solution 25 - JavascriptSaikumar AnireddyView Answer on Stackoverflow
Solution 26 - JavascriptChuanshi LiuView Answer on Stackoverflow
Solution 27 - JavascriptNitish Kumar PalView Answer on Stackoverflow
Solution 28 - JavascriptHema GanapathyView Answer on Stackoverflow
Solution 29 - JavascriptPooya PanahandehView Answer on Stackoverflow
Solution 30 - JavascriptAyan ChakrabortyView Answer on Stackoverflow
Solution 31 - JavascriptMaleen AbewardanaView Answer on Stackoverflow
Solution 32 - JavascriptKamil KiełczewskiView Answer on Stackoverflow