必须用正则class\s=\s["'](1)["']精准提取class属性值，启用.模式并限定*.html等路径，再用\b[a-za-z0-9_-]+\b提取独立类名去重为列表。"' ↩
怎么在HTML中精准提取class属性值
直接搜 card 会匹配注释、JS字符串、CSS规则，根本不可靠。必须用正则限定在 class= 属性上下文中，且兼容单双引号、空格、多类名。
启用正则模式（点右下角 .* 图标或按 Alt+R），查找框填：
class\s*=\s*["']([^"']*)["']
这个表达式能捕获所有引号内的完整 class 值，比如 class="header card active" 中的 header card active。注意：[^"']* 比 .*? 更稳，不会跨引号越界。
- 必须先
File → Open Folder…加载项目，否则Ctrl+Shift+F不生效 -
Where框务必填*.html, *.htm, *.vue, *.jsx，避免扫进 JS 或 JSON - 如果结果里混有
className="xxx"（JSX），需额外加className\s*=\s*["']([^"']*)["']单独处理
如何提取单个类名并去重为列表
上面的正则提取的是整行 class 值，但你真正要的是独立类名（如从 "header card active" 拆出 header、card、active）。Sublime 不支持嵌套正则，得两步走。
第一步：用 Find All（Alt+Enter）选中所有 class 值；第二步：再对已选中文本单独开查找面板，输入：
\b([a-zA-Z0-9_-]+)\b
勾选 in selection，再点 Find All —— 这时所有独立类名会被高亮选中，Ctrl+C 复制出来就是纯文本列表。
- 别用
\w+：它会匹配card-header中的card和header两段，破坏连字符语义 - 复制后粘贴到新文件，可用
Ctrl+H+^(.*)$\s+^1$（开启. matches newline）去重，但 Sublime 不自动排序，需手动整理 - 若类名含 Unicode（如中文类名），需把
[a-zA-Z0-9_-]扩展为[\p{L}\p{N}_-]，但 Sublime v4+ 的 PCRE 不支持\p{}，只能退回到[\u4e00-\u9fa5\w_-]
为什么 Find in Files 提取结果带路径和行号
Ctrl+Shift+F 的设计目标是“定位”，不是“导出”。它输出的是 file.js:123:class="card" 这种带上下文的格式，无法直接复制出干净类名。
真要批量提取，必须分场景：
- 单文件：用
Ctrl+F+ 正则 +Find All→Ctrl+L（选整行）→Ctrl+Shift+L（拆成多光标）→ 再用第二个正则提取类名 - 多文件但结构统一：先
Find in Files定位到所有含class=的文件，记下路径；再逐个打开，用第一种方法提取 - 想跳过人工步骤？别依赖 Sublime 原生功能——它不提供“导出匹配项为 CSV/数组”选项，这是硬限制
容易被忽略的边界问题
真正卡住人的不是正则语法，而是那些“看起来应该能匹配却漏掉”的情况：
-
class属性用了换行或缩进：如class=\n "header\n card"，此时必须勾选. matches newline，并改用class\s*=\s*["']([\s\S]*?)["'] - 模板语言（Pug/Jade）：
.card.header这种写法完全不出现class=，正则彻底失效，得换插件或切到编译后 HTML - 动态 class 拼接：像
className={`card ${isActive ? 'active' : ''}`}，正则只能定位到整行，无法安全拆解逻辑——这种必须人工介入，不能图省事
最后提醒一句：Sublime 的正则引擎不支持递归、条件断言、命名组，也解析不了 JSX 语义。一旦遇到嵌套括号、三元表达式、clsx 调用，就该停手，别硬套正则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
