当前位置:首页 > JavaScript

js 实现pathmatcher

2026-04-05 15:07:27JavaScript

PathMatcher 实现方法

基本概念

PathMatcher 用于匹配 URL 路径或文件路径,常用于路由系统或文件系统操作。JavaScript 中可通过正则表达式或字符串处理实现路径匹配功能。

正则表达式实现

通过正则表达式匹配路径模式,支持通配符和参数提取:

function pathMatcher(pattern, path) {
  const regex = new RegExp('^' + pattern
    .replace(/\*/g, '.*')
    .replace(/\//g, '\\/')
    .replace(/:(\w+)/g, '(?<$1>[^/]+)') + '$');
  return path.match(regex);
}

// 示例用法
const result = pathMatcher('/users/:id/profile', '/users/123/profile');
console.log(result?.groups?.id); // 输出 "123"

通配符匹配

实现简单的通配符匹配功能,支持 * 匹配任意字符:

function wildcardMatch(pattern, path) {
  const regex = new RegExp(`^${pattern.split('*').map(escapeRegExp).join('.*')}$`);
  return regex.test(path);
}

function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 示例
wildcardMatch('/api/*/detail', '/api/users/detail'); // true

路径参数解析

从路径中提取命名参数:

function extractParams(pattern, path) {
  const paramNames = [];
  const regexPattern = pattern.replace(/:(\w+)/g, (_, name) => {
    paramNames.push(name);
    return '([^/]+)';
  });

  const match = new RegExp(`^${regexPattern}$`).exec(path);
  if (!match) return null;

  return paramNames.reduce((params, name, index) => {
    params[name] = match[index + 1];
    return params;
  }, {});
}

// 使用示例
const params = extractParams('/product/:category/:id', '/product/electronics/42');
// { category: 'electronics', id: '42' }

性能优化版本

对于高频使用的场景,可预先编译匹配模式:

class PathMatcher {
  constructor(pattern) {
    this.keys = [];
    this.regex = this.compile(pattern);
  }

  compile(pattern) {
    const tokens = pattern.split('/');
    const parts = tokens.map(token => {
      if (token.startsWith(':')) {
        this.keys.push(token.slice(1));
        return '([^/]+)';
      }
      return token;
    });
    return new RegExp(`^${parts.join('/')}$`);
  }

  match(path) {
    const match = this.regex.exec(path);
    if (!match) return null;

    return this.keys.reduce((result, key, index) => {
      result[key] = match[index + 1];
      return result;
    }, {});
  }
}

// 使用示例
const matcher = new PathMatcher('/blog/:year/:month/:slug');
const result = matcher.match('/blog/2023/10/hello-world');
// { year: '2023', month: '10', slug: 'hello-world' }

路径前缀匹配

检查路径是否以特定前缀开头:

function hasPathPrefix(path, prefix) {
  return path.startsWith(prefix) && 
    (path.length === prefix.length || path[prefix.length] === '/');
}

// 示例
hasPathPrefix('/admin/dashboard', '/admin'); // true
hasPathPrefix('/admin-dashboard', '/admin'); // false

路径规范化

处理路径中的 ... 等相对路径符号:

js 实现pathmatcher

function normalizePath(path) {
  const segments = path.split('/').filter(Boolean);
  const stack = [];

  for (const segment of segments) {
    if (segment === '.') continue;
    if (segment === '..') stack.pop();
    else stack.push(segment);
  }

  return '/' + stack.join('/');
}

// 示例
normalizePath('/a/b/.././c//d'); // "/a/c/d"

标签: jspathmatcher
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与响应式…

js实现轮播

js实现轮播

实现轮播图的基本思路 轮播图的核心逻辑是通过定时切换展示的图片或内容,通常结合左右滑动按钮和指示器(小圆点)增强交互性。以下是基于原生JavaScript的实现方法。 HTML结构 构建轮播图的HT…

js实现瀑布流

js实现瀑布流

实现瀑布流布局 瀑布流布局是一种常见的网页布局方式,常用于图片展示、商品列表等场景。以下是使用 JavaScript 实现瀑布流布局的几种方法。 纯 JavaScript 实现 通过计算元素的位置和…

js实现预览

js实现预览

文件上传预览实现 使用JavaScript实现文件上传预览功能,可以通过FileReader对象读取文件内容并显示预览。以下代码支持图片、文本和PDF文件的预览: // HTML部分需要包含inpu…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

利用js实现

利用js实现

使用 JavaScript 实现 在 JavaScript 中,可以通过多种方式实现功能,具体取决于需求。以下是几种常见的方法: 方法一:使用原生 JavaScript // 示例代码 funct…