如何在 JavaScript 中加入相对 URL

Question

我想连接两个字符串，每个字符串代表 Javascript 中的相对 URL。

我想使用以下示例加入基本 URL http://www.adress.com/more/evenmore：

1. ../../adress （以及预期的输出：http://www.adress.com/adress)
2. ../adress （具有预期输出http://www.adress.com/更多/地址）

最好的方法是什么？我正在考虑使用正则表达式并检查
相对 URL 前面有多少个 ../，然后从基本 URL 中减去该数量并将它们添加到剩下的内容中。

Answer 1

8 年后，许多浏览器（Internet Explorer 除外）都支持 URL构造函数 (URL(url [, base]))。

> new URL('../address', 'http://www.adress.com/more/evenmore/').href
"http://www.adress.com/more/address"
> new URL('../../address', 'http://www.adress.com/more/evenmore/').href
"http://www.adress.com/address"

Answer 2

以下函数分解 URL，然后解析它。

function concatAndResolveUrl(url, concat) {
  var url1 = url.split('/');
  var url2 = concat.split('/');
  var url3 = [ ];
  for (var i = 0, l = url1.length; i < l; i ++) {
    if (url1[i] == '..') {
      url3.pop();
    } else if (url1[i] == '.') {
      continue;
    } else {
      url3.push(url1[i]);
    }
  }
  for (var i = 0, l = url2.length; i < l; i ++) {
    if (url2[i] == '..') {
      url3.pop();
    } else if (url2[i] == '.') {
      continue;
    } else {
      url3.push(url2[i]);
    }
  }
  return url3.join('/');
}

Answer 3

使用 URI.js (urijs - npm)：absoluteTo()：

function joinUrl(baseUrl, url) {
    var theUrl = new URI(url);
    if (theUrl.is("relative")) {
        theUrl = theUrl.absoluteTo(baseUrl);
    }
    return theUrl.toString();
}

Answer 4

@ning 提到的 ECMAScript URL Web API 是一个很好的起点：特别是因为它可以在普通 JS 实现（Node 等）中使用，并且不需要您可以使用一个库来完成 nowq 实现已经完成的事情。请参阅 MDN 文档，了解更多具体示例 ，是一个很好的起点。

直接借用（某种程度上）他们的文档：

let m = 'https://developer.mozilla.org';

// ... omitted 

let d = new URL('/en-US/docs', m);

如果您要执行上述操作，则 console.log 的 .toString 构造的 URL 对象，您的输出将是：'https://developer.mozilla。 org/en-US/docs'。

重要的是，如果您查阅文档的语法部分，您会注意到 第二 参数是可选的，并且 第二 参数（如上面的示例所示）代表 < em>base URL（尽管仅在提供两个参数的情况下）。

如果两个参数值都是绝对 URL，Web API 将采用第一个并丢弃第二个。

如果您正在使用 Node.js，我建议您查看本机 path 模块在相对路径上工作，再次使用库。这里的主要动机是，旋转你自己的算法（可能只是在这里或那里调用path）可能比引入一个库更好，该库将引入几个其他依赖项，这些依赖项可能会引入漏洞和不必要的膨胀适合您的应用程序（或者对于您的需要来说太重）。

但是，如果您在前端工作，则不会有可用的 path - 正如 @cburgmer 的回答评论 - Web API 的 URL 不支持提到的相对路径情况。在这种情况下，您可能需要寻找一个库来为您完成此任务；然而，再次考虑到其他答案，我会考虑尝试一种家庭方法。

值得赞扬的是，URI.js 目前仅集成一个非开发人员。依赖并且占用空间不大。