如何检查正则匹配词含子串？Vue组件正则匹配规则咨询

嘿，我来帮你搞定这个正则匹配的需求！你的目标很明确：要匹配所有.vue组件文件，但文件名（不含扩展名）以Async结尾的文件必须排除——比如CountdownWarningAsync.vue这种要跳过，而AsyncCountdownWarning.vue或者普通的SomeComponent.vue都得匹配上。

核心思路 #

我们可以用正则的负向断言来实现“排除特定结尾”的逻辑，核心就是要确保：文件名（也就是最后一个/之后、.vue之前的部分）的结尾不是Async。

推荐正则表达式 #

这里给你两种靠谱的写法，按需选用：

写法1：负向后行断言（精准匹配basename结尾）

^.*/[^/]+(?<!Async)\.vue$

逐个拆解下逻辑：

• ^.*：匹配文件路径开头到最后一个/之前的所有内容
• /：匹配最后一个路径分隔符
• [^/]+：匹配文件名主体（不含扩展名，因为后面跟着.vue）
• (?<!Async)：负向后行断言——确保前面的文件名主体结尾不是Async
• \.vue$：匹配.vue扩展名，并且要求到字符串结尾（避免误匹配.vue.txt这类文件）

写法2：负向先行断言（检查路径整体结尾）

如果你觉得后行断言有点绕，也可以用这种更直观的写法：

^.*/(?!.*Async\.vue$)[^/]*\.vue$

解释一下：

• (?!.*Async\.vue$)：负向先行断言——直接确保整个路径字符串不会以Async.vue结尾，精准排除那些文件名以Async结尾的.vue文件
• 后面的[^/]*\.vue$则负责匹配所有合法的.vue文件

验证示例 #

• ❌ 不匹配的文件（符合预期）：
  • ./deals/deal/countdown/CountdownWarningAsync.vue
  • ./test/deal/countdown/SomeComponentAsync.vue
• ✅ 应该匹配的文件（符合预期）：
  • ./deals/deal/countdown/AsyncCountdownWarning.vue
  • ./deals/deal/countdown/SomeComponent.vue
  • ./recenthotels/RecentHotels.vue

这样就能完美满足你的需求啦！

内容的提问来源于stack exchange，提问作者Stephan-v