Convert relative path URL to absolute path URL using JavaScript

0 0 2 minutes read

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 the array, st, and arr respectively.
Run a loop on arr length and for each turn, If the arr[i] == ‘..’ then pop the element from an st array, else push the arr[i] in an 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.

html

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color:green;"> 
        zambiatek 
    </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://zambiatek.com/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>

Output:

Convert relative path URL to absolute path URL using JavaScript

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.

html

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script> 
</head> 
<body> 
    <h1 style="color:green;"> 
        zambiatek 
    </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>