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

在 web 开发过程中，相对路径是一个常见的概念。相对路径是根据当前文件的位置来查找其他文件的位置。相对路径是一种灵活的方式，因为当文件被移动到其他位置时，相对路径可以自动更新。但是，有时候我们需要将相对路径转换为绝对路径，以便可以在任何位置使用它。下面让我们来看看如何使用 JavaScript 将相对路径 URL 转换为绝对路径 URL。

方法一：使用 a 标签

我们可以使用 <a> 标签来将相对路径 URL 转换为绝对路径 URL。这个方法相对简单，只需要创建一个 <a> 标签，将相对路径作为 href，并获取该标签的 href 属性即可。

function relativeToAbsolute(url) {
  var a = document.createElement('a');
  a.href = url;
  return a.href;
}

方法二：使用 URL 对象

我们也可以使用原生的 URL 对象来转换相对路径 URL 为绝对路径 URL。这是由 WHATWG 定义的标准 API，可以通过 new URL() 创建一个 URL 对象。

function relativeToAbsolute(url) {
  return (new URL(url, window.location.href)).href;
}

方法三：使用正则表达式

我们可以使用正则表达式将相对路径 URL 转换为绝对路径 URL。这种方法比较复杂，但是它可以自定义一些规则来解析相对路径 URL。

function relativeToAbsolute(url) {
  var base = window.location.href;
  var stack = base.split('/'),
      parts = url.split('/');
  stack.pop(); // remove current file name (or empty string)
                 // (omit if "base" is the current folder without trailing slash)
  for (var i=0; i<parts.length; i++) {
    if (parts[i] == ".")
      continue;
    if (parts[i] == "..")
      stack.pop();
    else
      stack.push(parts[i]);
  }
  return stack.join("/");
}

以上是三种将相对路径 URL 转换为绝对路径 URL 的方法，您可以根据自己的需求来选择合适的方法进行使用。