Skip to content
Related Articles

Related Articles

Improve Article
Convert relative path URL to absolute path URL using JavaScript
  • Last Updated : 30 Jan, 2020

Given a relative URL, the task is to convert the relative URL to an absolute URL. Here, the base URL is also given. 2 approaches are discussed here, the first example has the baseURL provided by the user and the second takes it from the URL of the page.

Approach 1:

  • Get the relURL and baseURL from user.
  • Use .split() method to split the base and relative URL on “/” and get each portion in array, st and arr respectively.
  • Run a loop on arr length and for each turn, If the arr[i] == ‘..’ then pop the element from st array, else push the arr[i] in st array using .push() and .pop() method.
  • Join the st array using .join() method on “/” to get the absolute URL.

Example 1: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert relative path URL to
      absolute path URL using JavaScript.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var element = document.getElementById("body");
        var base = "https://geeksforgeeks.org/folder/";
        var relURL = "./fileName.txt";
        up.innerHTML = 
            "Click on the button to convert relative path"+
          " URL to absolute path URL.<br><br>BaseURL = '"
        + base + "'<br>Relative URL = '" + relURL + "'";
  
        function absolute(base, rel) {
            var st = base.split("/");
            var arr = rel.split("/");
            st.pop(); // ignore the current file name (or no string)
           // (ignore if "base" is the current folder without having slash in trail)
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] == ".")
                    continue;
                if (arr[i] == "..")
                    st.pop();
                else
                    st.push(arr[i]);
            }
            return st.join("/");
        }
  
        function GFG_Fun() {
            $('#GFG_DOWN').html(absolute(base, relURL));
        }
    </script>
</body>
  
</html>

Output:

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

Approach 2:

  • Get the relURL from user.
  • Create an anchor element using document.createElement(“a”) and set the href attribute equal to the relURL.
  • Use link.protocol, link.host and link.pathname to get the protocol, hostName and pathname(relURL) of the page respectively.

Example 2: This example implements the above approach.




<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Convert relative path URL to
      absolute path URL using JavaScript.
    </title>
    <script src=
    </script>
</head>
  
<body style="text-align:center;">
    <h1 style="color:green;">  
            GeeksForGeeks  
        </h1>
    <p id="GFG_UP">
    </p>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="GFG_DOWN" style="color: green;">
    </p>
    <script>
        var up = document.getElementById('GFG_UP');
        var element = document.getElementById("body");
        var relURL = "./fileName.txt";
        up.innerHTML = 
          "Click on the button to convert relative path URL to"+
          " absolute path URL.<br><br>Relative URL = '"
        + relURL + "'";
        var absolute = function(rel) {
            var link = document.createElement("a");
            link.href = rel;
            return (link.protocol + "//" + link.host + link.pathname);
        }
  
        function GFG_Fun() {
            $('#GFG_DOWN').html(absolute(relURL));
        }
    </script>
</body>
  
</html>

Output:

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



My Personal Notes arrow_drop_up
Recommended Articles
Page :