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, Hostname, parameters 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.
Recommended jQuery Tutorial
Recommended:-jQuery AJAX Form Submit PHP MySQL
Recommended:-jQuery | Event MouseUp By Example
Recommended:-Event jQuery Mouseleave By Example
Recommended:-jQuery Event Mouseenter Example
Recommended:-Event jQuery MouseOver & MouseOut By Example
Recommended:-keyup jquery event example
Recommended:-Event jQuery. Blur By Example
Recommended:-jQuery – Remove All Unwanted Whitespace From String
Recommended:-jQuery form submit event with example
Recommended:-keydown function jQuery
Recommended:-List of jQuery Events Handling Methods with examples
Recommended:-Jquery Selector by .class | name | #id | Elements
Recommended:-jQuery Ajax Get() Method Example
Recommended:-jQuery Get Data Text, Id, Attribute Value By Example
Recommended:-Set data attribute value jquery
Recommended:-select multiple class in jquery
Recommended:-How to Remove Attribute Of Html Elements In jQuery
Recommended:-Get radio button value jquery by id, name, class
Recommended:-jQuery scrolltop animate example
Recommended:-jQuery – Remove Elements From array jQuery
Recommended:-Array to Comma Separated String jQuery
Recommended:-jQuery Ajax Form Submit with FormData Example
Recommended:-jQuery Form Validation Custom Error Message
