Convert relative path URL to absolute path URL using JavaScript

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

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.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.