Convert relative path URL to absolute path URL using JavaScript
Last Updated :
24 Jan, 2023
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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...