如何让JavaScript获取当前HTML文件所在目录的URL路径？

当然有办法啦！这里有几种简单的纯前端JavaScript方案，帮你从页面URL中提取出所在目录的路径：

方法一：字符串截取法（最直接） #

利用字符串的lastIndexOf()找到最后一个斜杠的位置，再截取到该位置（包含斜杠）即可：

function test() {
  const fullUrl = window.location.href;
  // 找到最后一个"/"的索引，截取到该位置+1（保留结尾的"/"）
  const dirUrl = fullUrl.slice(0, fullUrl.lastIndexOf('/') + 1);
  alert(dirUrl);
}

这个方法兼容性极强，不管是本地file协议还是线上http/https协议都能正常工作。

方法二：利用location对象属性拆分 #

通过window.location的各个属性拆分重组目录URL：

function test() {
  // 获取页面路径部分（比如"/Users/Administrator/Desktop/test.html"）
  const pathName = window.location.pathname;
  // 截取路径到最后一个"/"的位置
  const dirPath = pathName.slice(0, pathName.lastIndexOf('/') + 1);
  // 拼接协议、主机和目录路径
  const dirUrl = window.location.protocol + '//' + window.location.host + dirPath;
  alert(dirUrl);
}

对于本地file协议来说，window.location.host是空值，所以最终会自动拼接成file:///C:/Users/Administrator/Desktop/，完全符合你的需求。

方法三：使用URL对象（现代浏览器推荐） #

现代浏览器支持URL构造函数，可以更优雅地处理URL：

function test() {
  const url = new URL(window.location.href);
  // 把路径按"/"分割成数组，移除最后一个文件名元素
  const pathSegments = url.pathname.split('/');
  pathSegments.pop();
  // 重新设置路径并加上结尾的"/"
  url.pathname = pathSegments.join('/') + '/';
  alert(url.href);
}

这种方法语义化更强，适合需要对URL做更多复杂操作的场景。

内容的提问来源于stack exchange，提问作者Thaju