matches方法不支持正则表达式，仅接受CSS选择器；需结合classList或className提取类名后用正则校验，推荐Array.from(el.classList).some(cls => /^btn-/.test(cls))。
matches 方法本身不支持正则表达式，它只接受 CSS 选择器字符串（如 .active、[data-role="tab"]），不能直接传入 /^btn-.+/ 这样的正则对象。但你可以用它配合类名的提取和正则校验，实现“像用正则一样匹配类名”的效果。
先用 className 或 classList 提取类名再正则判断
这是最直接、兼容性好且语义清晰的做法：
-
element.className返回空格分隔的字符串（如"btn btn-primary large"），适合用RegExp.prototype.test()配合单词边界检查 -
element.classList是DOMTokenList，可转成数组后用some()+ 正则逐个匹配
✅ 推荐写法（安全匹配以 btn- 开头的类）：
const el = document.querySelector('#my-btn');
const hasBtnPrefix = Array.from(el.classList).some(cls => /^btn-/.test(cls));
// 或用 className（注意处理多空格/前后空格）
const hasBtnPrefix2 = /\bbtn-\w+/.test(el.className);
用 matches 模拟简单正则行为（仅限固定前缀/后缀）
虽然 matches 不支持正则，但 CSS 选择器有部分类似能力：
-
el.matches('[class^="btn-"]')→ 匹配class属性值以btn-开头（⚠️注意：是整个class属性字符串，不是单个类名） -
el.matches('[class*=" btn-"]')→ 匹配class中包含空格+btn-（模拟含该类，但易误判，不推荐）
❌ 这些方式不可靠，因为 class 属性值顺序不确定，且无法精准匹配“独立类名”。实际中应避免依赖它们做类名校验。
封装一个 matchesClass 工具函数
把类名提取 + 正则逻辑收拢，用起来就像增强版 matches：
Element.prototype.matchesClass = function(pattern) {
if (pattern instanceof RegExp) {
return Array.from(this.classList).some(cls => pattern.test(cls));
}
// 支持字符串选择器（回退到原生 matches）
return this.matches(pattern);
};
<p>// 使用示例
el.matchesClass(/^btn-.+/); // true 如果有 btn-primary、btn-lg 等
el.matchesClass(/^(?!icon-).+$/); // true 如果所有类都不以 icon- 开头
el.matchesClass('.disabled'); // 仍支持传统 CSS 选择器
注意事项
-
matches是针对整个元素的 CSS 选择器匹配，不是专为类名设计 —— 别强行让它干正则的活 - 涉及动态类名校验（如权限按钮、状态标记），优先用
classList.contains()或上面的正则遍历，更准确 - 正则中记得用
\b或数组遍历，避免btn匹配到subbtn
