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 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= </script></head><body> <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> |
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= </script></head><body> <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> |
Output:
Convert relative path URL to absolute path URL using JavaScript
Please Login to comment...