基于浏览器的JavaScript环境下是否支持glob模式匹配？

原生浏览器JavaScript环境没有内置的glob模式匹配API，如果需要实现类似**/*.{eot,otf,ttf,woff,woff2}这类glob规则的匹配，得手动将glob语法转换为正则表达式，再进行匹配操作。

简单实现示例 #

以下是针对你提到的字体文件glob规则的匹配实现，可用于匹配URL或文件名：

function matchGlob(globPattern, target) {
  // 将glob模式转换为正则表达式
  let regexStr = globPattern
    // 转义特殊正则字符
    .replace(/[.+^${}()|[\]\\]/g, '\\$&')
    // 处理**（匹配任意层级目录）
    .replace(/\\\*\*/g, '.*')
    // 处理*（匹配任意非/字符）
    .replace(/\\\*/g, '[^/]*')
    // 处理{abc,def}形式的多选项
    .replace(/\\{([^}]+)\\}/g, (_, groups) => `(${groups.replace(/,/g, '|')})`);
  
  // 生成正则（全局匹配+不区分大小写可根据需求调整）
  const regex = new RegExp(`^${regexStr}$`, 'i');
  return regex.test(target);
}

// 测试示例
const testPaths = [
  '/fonts/roboto.ttf',
  '/assets/fonts/open-sans.woff2',
  '/images/icon.png',
  '/sub/dir/deep/font.eot'
];

const globPattern = '**/*.{eot,otf,ttf,woff,woff2}';
testPaths.forEach(path => {
  console.log(`${path}: ${matchGlob(globPattern, path)}`);
});

说明 #

• 这个实现只处理了你提到的核心glob语法（**递归匹配、*通配、{...}多选项），如果需要支持更复杂的glob规则（比如?单字符匹配、[abc]字符集匹配等），需要进一步扩展转换逻辑。
• 匹配URL时，注意要处理完整的URL路径（比如去掉域名后只保留路径部分再匹配）。

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