Skip to content
Related Articles

Related Articles

Improve Article

JavaScript | Check whether a URL string is absolute or relative

  • Difficulty Level : Easy
  • Last Updated : 31 Dec, 2019

The task is to check if the passed URL is absolute or relative. Below are the few approaches:
Approach 1:

  • Use Regular Expression which checks if the URL contains “//” at a position in the URL .

    Example 1: This example uses the approach discussed above.




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Test if a URL string is absolute or relative?
        </title>
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color: green">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP"
           style="font-size: 20px; 
                  font-weight: bold;">
        </p>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN" 
           style="color:green; font-size: 26px; 
                  font-weight: bold;">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var URL = "https://geeksforgeeks.org";
            el_up.innerHTML =
    "Click on the button to check if the URL is relative or"+
              " Absolute.<br>URL = '" + URL + "'";
      
            function gfg_Run() {
                var RgExp = new RegExp('^(?:[a-z]+:)?//', 'i');
                if (RgExp.test(URL)) {
                    el_down.innerHTML = "This is Absolute URL.";
                } else {
                    el_down.innerHTML = "This is Relative URL.";
                }
            }
        </script>
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:

    Approach 2:

    • Use .indexOf() method to get to know if the position of “://” has index greater than 0 or position of “//” has index equal to 0. Both these condition check leads us to the absolute URL.

    Example 2: This example uses the approach discussed above.




    <!DOCTYPE HTML>
    <html>
      
    <head>
        <title>
            Test if a URL string is absolute or relative?
        </title>
        <script src=
        </script>
    </head>
      
    <body style="text-align:center;">
        <h1 style="color: green">  
                GeeksForGeeks  
            </h1>
        <p id="GFG_UP"
           style="font-size: 20px; font-weight: bold;">
        </p>
        <button onclick="gfg_Run()">
            Click Here
        </button>
        <p id="GFG_DOWN" 
           style="color:green; 
                  font-size: 26px; 
                  font-weight: bold;">
        </p>
        <script>
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var URL = "/myfolder/test.txt";
            el_up.innerHTML = 
    "Click on the button to check if the URL is"+
              " relative or Absolute.<br>URL = '" + URL + "'";
      
            function gfg_Run() {
                if (URL.indexOf('://') > 0 || URL.indexOf('//') === 0) {
                    el_down.innerHTML = "This is Absolute URL.";
                } else {
                    el_down.innerHTML = "This is Relative URL.";
                }
            }
        </script>
    </body>
      
    </html>

    Output:

    • Before clicking on the button:
    • After clicking on the button:



    My Personal Notes arrow_drop_up
Recommended Articles
Page :