Get current Page URL, Path, and hash using jQuery; In this tutorial, you will learn how to get the current page URL, pathname, hostname, origin using the jQuery.
Let’s start the tutorial to find the current page URL and find the pathname, hostname, origin from the current page URL using jQuery with example.
How to get current Page URL, Path, and hash using jQuery?
- Use the syntax
$(location).attr("href");For find the current page full URL - Use the syntax
$(location).attr("origin");For get the base URL - Use the syntax
$(location).attr("pathname");for find the pathname of the current URL - Use the syntax
$(location).attr("pathname");for find the pathname of the current URL
Use the syntax $(location).attr("href"); For find the current page full URL
The following example will show you how to find the current page URL using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Current Page URL Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".getUrl").click(function(){
var pURL = $(location).attr("href");
alert(pURL);
});
});
</script>
</head>
<body>
<button type="button" class="getUrl">Get URL</button>
</body>
</html>
Use the syntax $(location).attr("origin"); For get the base URL
The following example will show you how to find the current base URL using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Current Page URL Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".getUrl").click(function(){
var originURL = $(location).attr("origin");
alert(originURL);
});
});
</script>
</head>
<body>
<button type="button" class="getUrl">Get URL</button>
</body>
</html>
Use the syntax $(location).attr("pathname"); for find the pathname of the current URL.
The following example will show you how to find the pathname from the current page the URL using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Pathname From Current Page URL Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".getUrl").click(function(){
var pathname = $(location).attr("pathname");
alert(pathname);
});
});
</script>
</head>
<body>
<button type="button" class="getUrl">Get URL</button>
</body>
</html>
Use the syntax $(location).attr("host"); for find the host of the current URL.
The following example will show you how to find the hostname from the current page the URL using jQuery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Get Hostname From Current Page URL Using jQuery</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".getUrl").click(function(){
var host = $(location).attr("host");
alert(host);
});
});
</script>
</head>
<body>
<button type="button" class="getUrl">Get URL</button>
</body>
</html>
Conclusion
Here you have learned how to get the current page URL. Also, you have learned how to get pathname, base URL, host from the current page URL.
