How to Get the Current Page URL in jQuery

How to Get the Current Page URL in jQuery

Here we will explain 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.

Let’s see :

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.

You may like

  1. How to Get Current Page URL, Domain, Query String in PHP
  2. Laravel Get Current URL Example

Leave a Reply

Your email address will not be published. Required fields are marked *