可行但需谨慎：matchall()可提取格式良好的引号包裹属性（如key="val"、key='val'、key=val）及合规无引号值，但无法处理嵌套、不规范html、未转义引号、跨行或脚本内伪属性；推荐domparser方案更健壮。
直接用 matchAll() 提取 HTML 标签中所有具名属性键值对是可行的，但需谨慎设计正则——它无法解析嵌套结构或处理不规范 HTML，仅适用于格式良好、属性值被引号包裹（或无引号但无空格）的简单场景。
匹配带引号的属性（推荐：双引号/单引号/反引号）
使用支持多组捕获的正则，匹配 key="value"、key='value'、key=`value` 三种常见形式，并忽略空格和自闭合符号：
const html = '<div id="box" class="main active" data-count="42" data-user="\'{"name":"Alice"}\'" title="`Hello" world></div>';
const attrRegex = /(\w+)\s*=\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`)/g;
const matches = [...html.matchAll(attrRegex)];
const attrs = matches.map(m => {
const key = m[1];
const value = m[2] ?? m[3] ?? m[4]; // 取对应引号内的内容
return { key, value };
});
// [{key:"id", value:"box"}, {key:"class", value:"main active"}, ...]
兼容无引号属性值（需满足 HTML 规范限制）
HTML 允许无引号属性值（如 disabled、checked、value=abc123），但要求值中不能含空格、=、"、'、`、、<code>>、/。可扩展正则覆盖：
- 先匹配带引号的（优先级高）
- 再匹配无引号：用
\w+|[^\s"'>/=]+捕获合法裸值
合并正则示例：
const attrRegexLoose = /(\w+)\s*=\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\s"'>/=]+))/g; // 注意：第5组 ([^\s"'>/=]+) 对应无引号值，m[5] 即为 value
避免常见陷阱
以下情况 matchAll() 无法可靠处理，需提前过滤或换方案：
- 属性值含未转义的引号（如
title="He said "Hi""）→ 正则会提前截断 - 属性跨行书写（HTML 允许，但正则默认不跨行）→ 加
/s标志仍难保证语义正确 - 注释、CDATA、script/style 内容中的伪属性 → 会被误匹配
- 自定义语法如 Vue 的
:id="expr"或 React 的on:click→ 需额外适配前缀逻辑
若 HTML 来源不可控，建议先用 DOMParser 解析成元素，再遍历 element.attributes，更健壮：
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const el = doc.body.firstElementChild;
const attrsFromDOM = Array.from(el.attributes).map(a => ({ key: a.name, value: a.value }));
提取后进一步处理值（可选）
若属性值是 JSON 字符串（如 data-config='{"theme":"dark"}'），可安全解析：
attrs.forEach(({ key, value }) => {
if (key.startsWith('data-') && value?.startsWith('{') || value?.startsWith('[')) {
try {
const parsed = JSON.parse(value);
console.log(key, '→', parsed);
} catch (e) {
console.warn(`Invalid JSON in ${key}:`, value);
}
}
});
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
