当前位置：首页 > JavaScript

js 实现pathmatcher

2026-01-31 22:48:47JavaScript

实现 PathMatcher 的方法

在 JavaScript 中，PathMatcher 通常用于匹配 URL 路径或文件路径的模式。以下是几种常见的实现方法：

使用正则表达式匹配路径

正则表达式可以灵活地匹配路径模式，例如通配符或动态参数：

js 实现pathmatcher

function matchPath(pattern, path) {
  const regexPattern = pattern
    .replace(/\//g, '\\/') // 转义斜杠
    .replace(/\*/g, '.*') // 通配符匹配任意字符
    .replace(/\:(\w+)/g, '(?<$1>[^\\/]+)'); // 动态参数捕获

  const regex = new RegExp(`^${regexPattern}$`);
  return regex.test(path);
}

// 示例用法
matchPath('/users/:id', '/users/123'); // true
matchPath('/files/*', '/files/images/logo.png'); // true

使用第三方库

一些流行的库（如 path-to-regexp）专门用于路径匹配：

js 实现pathmatcher

import { match } from 'path-to-regexp';

const matcher = match('/users/:id');
const result = matcher('/users/123'); // { path: '/users/123', params: { id: '123' } }

实现通配符匹配

对于简单的通配符（如 * 或），可以手动实现：

function wildcardMatch(pattern, path) {
  const patternParts = pattern.split('/');
  const pathParts = path.split('/');

  if (patternParts.length !== pathParts.length && !pattern.includes('')) {
    return false;
  }

  for (let i = 0; i < patternParts.length; i++) {
    if (patternParts[i] === '') return true;
    if (patternParts[i] !== '*' && patternParts[i] !== pathParts[i]) {
      return false;
    }
  }

  return true;
}

// 示例用法
wildcardMatch('/files/*', '/files/image.png'); // true
wildcardMatch('/docs/', '/docs/api/v1'); // true

使用 URL API 解析路径

现代浏览器支持 URL API，可以方便地解析路径：

function parsePath(path) {
  const url = new URL(path, 'http://example.com');
  return {
    pathname: url.pathname,
    search: url.search,
    hash: url.hash
  };
}

// 示例用法
parsePath('/users?id=123#profile'); 
// { pathname: '/users', search: '?id=123', hash: '#profile' }