JavaScript通过文件地址获取文件名称

news2025/3/13 21:25:26

在 JavaScript 中，可以通过文件链接地址提取文件名称。文件名称通常是链接中最后一个 / 之后的部分，可能还包含查询参数或哈希片段。以下是几种常见的提取文件名称的方法：

方法 1：使用 `URL` 对象和 `pathname`

URL 对象可以解析链接地址，并通过 pathname 获取路径部分，然后提取文件名。

代码示例：

function getFileNameFromUrl(url) {
  // 创建 URL 对象
  const urlObj = new URL(url);

  // 获取路径部分（例如：/path/to/file.pdf）
  const pathname = urlObj.pathname;

  // 提取文件名（最后一个 / 之后的部分）
  const fileName = pathname.substring(pathname.lastIndexOf('/') + 1);

  return fileName;
}

// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

方法 2：使用 `split` 和 `pop`

通过 split 方法将链接地址按 / 分割成数组，然后使用 pop 获取最后一个部分。

代码示例：

function getFileNameFromUrl(url) {
  // 去掉查询参数和哈希片段
  const cleanUrl = url.split('?')[0].split('#')[0];

  // 按 / 分割路径，获取最后一个部分
  const fileName = cleanUrl.split('/').pop();

  return fileName;
}

// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

方法 3：使用正则表达式

通过正则表达式匹配文件名部分。

代码示例：

function getFileNameFromUrl(url) {
  // 匹配最后一个 / 之后的部分（不包括查询参数和哈希片段）
  const regex = /\/([^\/?#]+)[^\/]*$/;
  const match = url.match(regex);

  // 如果匹配成功，返回文件名
  return match ? match[1] : null;
}

// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

方法 4：处理带有查询参数或哈希片段的情况

如果文件名可能包含查询参数或哈希片段，可以通过以下方法提取纯净的文件名。

代码示例：

function getFileNameFromUrl(url) {
  // 创建 URL 对象
  const urlObj = new URL(url);

  // 获取路径部分
  const pathname = urlObj.pathname;

  // 提取文件名（最后一个 / 之后的部分）
  const fileNameWithParams = pathname.substring(pathname.lastIndexOf('/') + 1);

  // 去掉查询参数和哈希片段
  const fileName = fileNameWithParams.split('?')[0].split('#')[0];

  return fileName;
}

// 示例
const url = "https://example.com/path/to/file.pdf?query=123#section";
const fileName = getFileNameFromUrl(url);
console.log(fileName); // 输出：file.pdf

方法 5：处理没有文件名的链接

如果链接地址没有文件名（例如以 / 结尾），可以返回一个默认值或空字符串。

代码示例：

function getFileNameFromUrl(url) {
  const urlObj = new URL(url);
  const pathname = urlObj.pathname;

  // 如果路径以 / 结尾，返回空字符串或默认值
  if (pathname.endsWith('/')) {
    return ''; // 或者 return 'index.html';
  }

  // 提取文件名
  const fileName = pathname.substring(pathname.lastIndexOf('/') + 1);
  return fileName;
}

// 示例
const url1 = "https://example.com/path/to/file.pdf";
const url2 = "https://example.com/path/to/";

console.log(getFileNameFromUrl(url1)); // 输出：file.pdf
console.log(getFileNameFromUrl(url2)); // 输出：'' 或 'index.html'