jQuery Get Current Page URL, Path, Host and hash

jQuery get current Page URL, Path, and hash; Through this tutorial, i am going to show you how to get the current page URL, path name, host name, origin, hash using the jQuery.

How to get current Page URL, Path, and hash using jQuery

See the following syntax with example to get current Page URL, Path, and hash using jQuery:

For get the current page full URL
- Use the syntax $(location).attr("href");
For get the base URL
- Use the syntax $(location).attr("origin");
For get the pathname of the current URL
- Use the syntax $(location).attr("pathname");
For get the pathname of the current URL
- Use the syntax $(location).attr("pathname");

For find the current page full URL

Use the syntax $(location).attr("href");

Example for how to find the current page URL using jQuery; as shown below:

<!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>

For get the base URL

Use the syntax $(location).attr("origin");

Example for how to find the current base URL using jQuery; as shown below:

<!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>

For get the pathname of the current URL

Use the syntax $(location).attr("pathname");

Example for how to find the pathname from the current page the URL using jQuery; as shown below:

<!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>

For get the host of the current URL

Use the syntax $(location).attr("host");

Example for how to find the hostname from the current page the URL using jQuery; as shown below:

<!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

jQuery get current Page URL, Path, and hash; Through this tutorial, you have learned how to get the current page URL, path name, host name, origin, hash using the jQuery.