提取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 这类布尔属性不带 =，需单独匹配：
立即学习“前端免费学习笔记（深入）”；
/\s+([a-zA-Z][a-zA-Z0-9\-]*)(?=\s+\/?>|>|\s+[a-zA-Z])/gi
- 利用先行断言确保该单词是独立属性名，而非标签名或普通文本
- 建议与前一个正则分步执行，避免干扰带值属性的捕获
规避常见陷阱
HTML 不是严格语法，正则无法 100% 安全解析嵌套或畸形结构。要注意：
- 不匹配注释、script/style 内容中的伪属性（需先剥离这些区域）
- 避免跨标签匹配（如
<div class="a"> <p id="b"> 中误连两个属性） </p> <li>不推荐用单个正则提取“完整属性对”，而应逐标签处理或结合 DOM 解析更可靠</li> <h3>实际使用建议</h3> <p>若在 JavaScript 中处理，可先用 <code>DOMParser转为文档，再遍历元素获取element.attributes——更健壮；仅当必须纯字符串处理（如日志清洗、模板预处理）时，才用上述正则，并搭配String.prototype.matchAll()提取全部结果。
