JavaScript 将相对路径URL转换为绝对路径URL

给定一个相对URL，任务是将相对URL转换为绝对URL。同时，提供了基本URL。这里讨论了两种方法，第一个示例由用户提供基本URL，第二个示例使用页面URL。

方法1

从用户获取relURL和baseURL。
使用 .split() 方法在”/”处分割基本URL和相对URL，并将每个部分分别存储在st和arr数组中。
对arr数组的长度运行循环，对于每个循环，如果arr[i] == '..'，则从st数组中弹出元素，否则使用 .push() 和 .pop() 方法将arr[i]推入st数组中。
使用 .join() 方法将st数组连接在”/”上以获得绝对URL。

示例1： 此示例实现了上述方法。

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </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>

输出：

JavaScript 将相对路径URL转换为绝对路径URL

方法2

从用户处获取relURL。
使用 document.createElement（“a”） 创建一个锚点元素，并将 href属性 设置为relURL。
使用 link.protocol，link.host和link.pathname 获取页面的协议、主机名和路径名（relURL）。

示例2： 此示例实现了上述方法。

<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </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>

输出：

JavaScript 将相对路径URL转换为绝对路径URL