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

给定一个相对 URL，任务是将相对 URL 转换为绝对 URL。这里还给出了基本 URL。这里讨论了 2 种方法，第一个示例具有用户提供的 baseURL，第二个示例从页面的 URL 中获取。

方法一：

• 从用户那里获取 relURL 和 baseURL。
• 使用.split() 方法在“/”上拆分基本 URL 和相对 URL，并分别获取数组、st 和 arr 中的每个部分。
• 在 arr 长度上运行一个循环，每转一圈，如果 arr[i] == '..' 然后从 st 数组中弹出元素，否则使用.push() 和 .pop( ) 方法。
• 在“/”上使用.join() 方法加入 st 数组以获取绝对 URL。

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

  

    
        Convert relative path URL to
      absolute path URL using JavaScript.
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    
        click here
    
    
    
    
        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));
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

方法二：

• 从用户那里获取 relURL。
• 使用document.createElement(“a”)创建一个锚元素并将href 属性设置为等于 relURL。
• 使用link.protocol、link.host和link.pathname分别获取页面的协议、hostName和pathname(relURL)。

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

  

    
        Convert relative path URL to
      absolute path URL using JavaScript.
    
    
    

  

      
            GeeksForGeeks  
        
    
    
    
        click here
    
    
    
    
        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));
        }
    

  

输出：

• 在点击按钮之前：
  
• 点击按钮后：