提取HTML属性需用正则匹配属性名与值组合，支持双引号、单引号及无引号值，并单独处理布尔属性；但因HTML灵活性，正则无法完全可靠，推荐优先使用DOMParser解析。
要提取所有 HTML 属性，关键是匹配属性名和值的组合，而不是只抓标签或内容。正则表达式可以快速完成这项任务，但需注意 HTML 的灵活性（如单引号、双引号、无引号值、布尔属性等），不能依赖过于简化的模式。
匹配常见属性格式（含引号）
大多数属性形如 name="value" 或 name='value'。可用以下正则提取：
/\s+([a-zA-Z][a-zA-Z0-9\-]*)\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/g
-
$1 捕获属性名（如
class、data-id） - $2 捕获双引号内的值
- $3 捕获单引号内的值
-
$4 捕获无引号的值（如
disabled、checked）
处理布尔属性（无等号、无值）
像 disabled、required 这类布尔属性不带 =，需单独匹配：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
/\s+([a-zA-Z][a-zA-Z0-9\-]*)(?=\s+\/?>|>|\s+[a-zA-Z])/gi
- 利用先行断言确保该单词是独立属性名，而非标签名或普通文本
- 建议与前一个正则分步执行，避免干扰带值属性的捕获
规避常见陷阱
HTML 不是严格语法，正则无法 100% 安全解析嵌套或畸形结构。要注意：
- 不匹配注释、script/style 内容中的伪属性（需先剥离这些区域）
- 避免跨标签匹配（如
中误连两个属性）
- 不推荐用单个正则提取“完整属性对”，而应逐标签处理或结合 DOM 解析更可靠
实际使用建议
若在 JavaScript 中处理，可先用
DOMParser转为文档，再遍历元素获取element.attributes——更健壮；仅当必须纯字符串处理（如日志清洗、模板预处理）时，才用上述正则，并搭配String.prototype.matchAll()提取全部结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
