JavaScript 解析 URL 中的文件路径

在 JavaScript 中解析 URL 中的文件路径，可以使用内置的 URL 对象。这个对象提供了一种简单而强大的方式来解析、构建、规范化和编码 URL。

下面是一个示例，展示如何使用 URL 对象来解析 URL 并提取文件路径（包括文件名）：

// 假设我们有一个 URL
const urlString = 'https://example.com/path/to/file.txt?query=123#hash';

// 创建一个 URL 对象
const url = new URL(urlString);

// 提取路径名（包括文件名）
const pathname = url.pathname;

console.log('Pathname:', pathname);  // 输出: Pathname: /path/to/file.txt

// 如果需要提取文件名，可以进一步处理 pathname
const fileName = pathname.split('/').pop();

console.log('File Name:', fileName);  // 输出: File Name: file.txt

在这个示例中：

完整示例：解析 URL 并提取各部分

以下是一个更完整的示例，展示如何解析 URL 并提取其各个部分：

const urlString = 'https://example.com/path/to/file.txt?query=123#hash';
const url = new URL(urlString);

console.log('Protocol:', url.protocol);  // 输出: Protocol: https:
console.log('Hostname:', url.hostname);  // 输出: Hostname: example.com
console.log('Port:', url.port);          // 输出: Port: （默认为空字符串，因为没有指定端口）
console.log('Pathname:', url.pathname);  // 输出: Pathname: /path/to/file.txt
console.log('Search:', url.search);      // 输出: Search: ?query=123
console.log('Hash:', url.hash);          // 输出: Hash: #hash

// 提取文件名
const fileName = url.pathname.split('/').pop();
console.log('File Name:', fileName);  // 输出: File Name: file.txt

// 提取查询参数
const queryParams = new URLSearchParams(url.search);
const queryValue = queryParams.get('query');
console.log('Query Value:', queryValue);  // 输出: Query Value: 123

注意

• URL 对象在现代浏览器中广泛支持，但在某些旧版本的浏览器（如 Internet Explorer）中可能不受支持。如果你需要在这些旧版浏览器中运行代码，请考虑使用其他库（如 url 模块在 Node.js 中，或第三方库如 whatwg-url）。
• URLSearchParams 对象用于处理查询字符串，使其更容易访问和操作查询参数。