How to get a client IP address using JavaScript?

How to get a client IP address using JavaScript?

Nishant Gour

Published on May 13, 2021

2 min read

Subscribe to my newsletter and never miss my upcoming articles

Listen to this article

In this article, we are to going to see how to get a client IP address using JavaScript.

What is IP address

An IP (Internet Protocol) address can be defined as the address of network hardware. or we can say that an IP address is a combination of numbers that uniquely identifies one’s system. It’s like a house has an address to get mail, just like that your computer has an address to receive the data from the web.

Depending upon javascript alone will not help us, so we will use jQuery as well. JavaScript works with third-party applications to fetch the IP addresses. These third-party application services fetch the IP address and simply return it in three formats, plain text, JSON, and JSONP format.

We can find many application services like ipify and ipinfo. But we are going to use - ipify , one of the most popular tools for finding IP addresses.

So let's see the implementation part:

.html file

!DOCTYPE html>
<html>

<head>
    <title>Getting Clients IP</title>
    <style>
        p, h1 {
            color: #175dcf;
        }

        #content{
            margin-top: 10%;
        }

    </style>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
    </script>

    <script>
        /* Add "https://api.ipify.org?format=json" statement
           this will communicate with the ipify servers in
           order to retrieve the IP address $.getJSON will
           load JSON-encoded data from the server using a
           GET HTTP request */

        $.getJSON("https://api.ipify.org?format=json",
                                          function(data) {

            // Setting text of element P with id hashnode
            $("#hashnode").html(data.ip);
        })
    </script>
</head>

<body>
    <center id="content">

       <a href="https://codingnuts.hashnode.dev/"> 
<img  src="https://img.shields.io/badge/Hashnode-2962FF?style=for-the-badge&logo=hashnode&logoColor=white"/>
</a>
        <h1>Nishant's Blog</h1>
        <h3>Your Public IP Adress is Shown Below:</h3>

        <p id="hashnode"></p>

    </center>
</body>

</html>

OUTPUT

2021-05-13-15-27-36.gif

Note: Not Supported for some browsers.

So this is it for today!.

I hope you liked it!. Let's catch up in the next articles and Stay tuned.

If you liked it, Please Support Me

Did you find this article valuable?

Support Nishant Gour by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors