如何用正则表达式捕获HTML/JS文件中的所有HTML类名？

直接使用以下正则表达式，可覆盖HTML class属性、JS模板字面量、classList.add调用等所有你提到的场景，精准捕获独立类名：

(?:class(?:Name\.add|=)\s*(?<q>["'`])|(?<=class(?:Name\.add|=)\s*(["'`])))(?:(?!\k<q>).)*?(?<class>[a-zA-Z0-9_-]+)(?=(?:(?!\k<q>).)*?\k<q>)

适配场景验证 #

• HTML静态class属性：<div class="header nav-bar"> 可捕获 header、nav-bar
• JS模板字面量：`<button class="${isValid ? 'is-valid' : 'is-invalid'}">` 可捕获 is-valid、is-invalid
• 动态类添加：element.classList.add('is-active', "has-shadow") 可捕获 is-active、has-shadow

正则逻辑拆解 #

1. 定位引号上下文：通过class=或classList.add定位类名所在的引号区域，捕获引号类型（单/双/反引号）到命名组q，确保只在当前引号内匹配
2. 非引号内容匹配：(?:(?!\k<q>).)*? 用非贪婪模式匹配引号内的任意内容，避免跨引号匹配
3. 捕获类名：(?<class>[a-zA-Z0-9_-]+) 严格匹配符合HTML规范的类名（字母、数字、下划线、连字符），如果需要支持Unicode类名，可替换为[^\s"']+`
4. 边界断言：正向断言确保当前类名处于同一引号范围内，避免误匹配引号外的内容

兼容旧环境版本 #

如果你的运行环境不支持ES2018的命名捕获组，可使用以下兼容版本（用数字捕获组替代命名组）：

(?:class(?:Name\.add|=)\s*(["'`])|(?<=class(?:Name\.add|=)\s*(["'`])))(?:(?!\1|\2).)*?([a-zA-Z0-9_-]+)(?=(?:(?!\1|\2).)*?(?:\1|\2))

内容的提问来源于stack exchange，提问作者Jose Carlos Ramírez