JavaScript正则表达式如何匹配子目录下指定后缀文件？

嘿，很高兴能帮到你！既然你已经搞定了根目录下的后缀匹配，那扩展到指定子目录其实只需要在正则里加一段子目录的匹配规则就好啦～

核心思路 #

我们需要让正则满足两个条件：

1. 路径中必须包含 /app/ 或 /asset/ 这类指定子目录的标识
2. 文件名结尾必须是 .htm/.html/.js/.css

基础版正则（适配绝对路径） #

先给你一个最常用的版本，适配以斜杠开头的绝对路径：

const targetRegex = /^(?:\/(app|asset)\/).*\.(htm|html|js|css)$/;

我来拆解一下每个部分的作用：

• ^：匹配字符串的开头，确保我们从路径的最开始检查
• (?:\/(app|asset)\/)：
  • (?:...) 是非捕获组，用来把内部规则打包，不会额外存储匹配结果
  • \/(app|asset)\/ 精准匹配 /app/ 或 /asset/ 这个目录片段
• .*：匹配子目录后面的任意内容（比如子子目录、文件名前缀，只要不是换行符都能匹配）
• \.(htm|html|js|css)$：就是你原来的规则，匹配指定后缀，$ 确保字符串结尾就是这些后缀

测试示例 #

用JS的test()方法来验证：

// 匹配成功的情况
console.log(targetRegex.test('/app/index.html')); // true
console.log(targetRegex.test('/asset/css/main.css')); // true
console.log(targetRegex.test('/app/modules/user.js')); // true

// 匹配失败的情况
console.log(targetRegex.test('/index.html')); // false（根目录文件）
console.log(targetRegex.test('/other/lib.js')); // false（非指定子目录）
console.log(targetRegex.test('/app/logo.png')); // false（后缀不符合）

适配相对路径的版本 #

如果你的场景里有相对路径（比如app/page.htm这种没有开头斜杠的），可以稍微调整正则：

const relativeRegex = /^(?:(?:\/|^)(app|asset)\/).*\.(htm|html|js|css)$/;

这里把开头的\/换成了(?:\/|^)，意思是匹配开头的斜杠或者字符串的起始位置，这样相对路径也能被匹配：

console.log(relativeRegex.test('app/page.htm')); // true
console.log(relativeRegex.test('asset/js/common.js')); // true

可选优化：更严格的文件名匹配 #

如果你想限制文件名只能是合法的字符（比如字母、数字、下划线、短横线），可以把.*换成[\w\-\.\/]*，这样就不会匹配包含特殊字符的路径了：

const strictRegex = /^(?:\/(app|asset)\/)[\w\-\.\/]*\.(htm|html|js|css)$/;

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