Get the current URL using jQuery?

Last Updated : 14 May, 2019

The current URL in jQuery can be obtained by using the ‘href’ property of the Location object which contains information about the current URL. The ‘href’ property returns a string with the full URL of the current page.

Syntax:

$(location).attr('href')

Example-1:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Get current URL using jQuery?</title> 
</head> 
  
<body> 
    <h1 style="color: green">GeeksForGeeks</h1> 
    <b>Get current URL using jQuery?</b> 
    <p>Click on the button below to get the current page URL</p> 
    <p> The current URL is: <span class="output"></span></p> 
    <button id="btn">Get current </button> 
    <script src= 
            "https://code.jquery.com/jquery-3.3.1.min.js"> 
  </script> 
    <script> 
        $('#btn').click(function() { 
            currLoc = $(location).attr('href'); 
            document.querySelector('.output').textContent = currLoc; 
        }); 
    </script> 
</body> 
  
</html> 

Output:

Before clicking the button:

get-curr-url-before

After clicking the button:

get-curr-url-after

Example-2:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Get current URL using jQuery?</title> 
</head> 
  
<body> 
    <h1 style="color: green">GeeksForGeeks</h1> 
    <b>Get current URL using jQuery?</b> 
    <span class="output"></span> 
    <script src= 
            "https://code.jquery.com/jquery-3.3.1.min.js"> 
  </script> 
    <script> 
        alert("host = " + $(location).attr('host') +  
              "\nhostname = " + $(location).attr('hostname') +  
              "\npathname = " + $(location).attr('pathname') +  
              "\nhref = " + $(location).attr('href') +  
              "\nport = " + $(location).attr('port') +  
              "\nprotocol = " + $(location).attr('protocol')); 
    </script> 
</body> 
  
</html> 

Output:

My Personal Notes

Related Articles