How to extract the host name from URL using JavaScript ?

To extract the hostname portion from a URL, we can use the location object that represents information about the current URL. It is the element of the window object and a client-side object.

Syntax:

window.location.propertyname

Example 1: In this example, we will use the self URL, where the code will run to extract the hostname.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>
            Get domain from URL
        </title>
    </head>
      
    <body>
        <h1 style="color: green"
            GeeksforGeeks 
        </h1>
          
        <b>URL is:</b
          
        <script>
            document.write(window.location.href);
        </script>
              
        <br>
        <b>hostname is:</b
          
        <script>
            document.write(window.location.hostname);
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

Example 2: In this example, we will ask for the URL to the user and then will perform the extraction of hostname on that URL.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <title>Extracting URL</title>
    </head>
      
    <body>
        <h1 style="color: green;">GeeksforGeeks</h1>
        <b>Extracting URL</b>
        <br><br>
        <form name="f1">
            <input type="text" name="txt" 
                   placeholder="Paste URL"/>
            <input type="button" value="click" 
                   onclick="url2()" />
        </form>
        <script>
            function url2() {
      
                var url3 = document.f1.txt.value;
      
                var j = url3.indexOf("://");
      
                var host = "";
      
                for (i = j + 3; i < url3.length; i++) {
                    if (url3.charAt(i) != '/') {
                        host = host + "" + url3.charAt(i);
                    } else {
                        break;
                    }
                }
                document.write(host);
            }
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.