¿Cómo analizar una URL en nombre de host y ruta en JavaScript?
la
Ejemplo 1:
HTML
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h2 style="color:green;">
Required URL is:
</h2>
<p id="para1"></p>
<button onclick="my_function()">
Parse It
</button>
<p id="para2"></p>
<p id="para3"></p>
<!--Script to parse the URL of
the current web page-->
<script>
document.getElementById("para1")
.innerHTML = window.location.href;
function my_function() {
document.getElementById("para2")
.innerHTML =
`<h3 style="color:green;">Hostname : </h3>` +
window.location.hostname;
document.getElementById("para3")
.innerHTML =
`<h3 style="color:green;">Path : </h3>` +
window.location.pathname;
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Antes de hacer clic en el botón
Después de hacer clic en el botón:
Después de hacer clic en el botón
Ejemplo 2 Este ejemplo analiza la URL predefinida.
HTML
<!DOCTYPE html>
<html>
<body style="text-align: center;">
<h2 style="color: green;">
Required URL is:
</h2>
<p id="para1"></p>
<button onclick="my_function()">
Parse It
</button>
<p id="para2"></p>
<p id="para3"></p>
<!--Script to parse predefined URL -->
<script>
var my_url = new URL(
"https://write.geeksforgeeks.org/post/");
document.getElementById("para1")
.innerHTML = my_url;
function my_function() {
document.getElementById("para2")
.innerHTML =
`<h3 style="color:green;">Hostname : </h3>`
+ my_url.hostname;
document.getElementById("para3")
.innerHTML =
`<h3 style="color:green;">Path : </h3>`
+ my_url.pathname;
}
</script>
</body>
</html>
Producción:
Antes de hacer clic en el botón:
Antes de hacer clic en el botón
Después 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 tanyagarg3434 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA