Dada una URL relativa, la tarea es convertir la URL relativa en una URL absoluta. Aquí también se proporciona la URL base. Aquí se analizan 2 enfoques, el primer ejemplo tiene la URL base proporcionada por el usuario y el segundo la toma de la URL de la página.
Enfoque 1:
- Obtenga la relURL y la baseURL del usuario.
- Use el método .split() para dividir la URL base y relativa en «/» y obtenga cada porción en la array, st y arr respectivamente.
- Ejecute un ciclo en la longitud de arr y para cada turno, si arr[i] == ‘..’, extraiga el elemento de st array, de lo contrario, presione arr[i] en st array usando .push() y .pop( ) método .
- Únase a la array st usando el método .join() en «/» para obtener la URL absoluta.
Ejemplo 1: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Convert relative path URL to
absolute path URL using JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Enfoque 2:
- Obtenga la relURL del usuario.
- Cree un elemento ancla usando document.createElement(“a”) y establezca el atributo href igual a relURL.
- Use link.protocol, link.host y link.pathname para obtener el protocolo, hostName y pathname (relURL) de la página respectivamente.
Ejemplo 2: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
Convert relative path URL to
absolute path URL using JavaScript.
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</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>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA