在Web开发中，我们经常会拿到一段现成的HTML文本，比如从接口返回的富文本、从本地存储读取的页面碎片，需要把它们变成结构化的JS对象来读取内容、修改属性或统计节点。直接当成字符串处理不仅麻烦，还容易出错，利用浏览器DOM能力可以低成本完成转换。
为什么不直接用正则解析
HTML本身是有层级和属性的语言，正则只能处理简单无嵌套的片段。遇到<div><span>文字</span></div>这种结构，正则很难正确表达父子关系，也会忽略自闭合标签和命名空间。使用浏览器内置解析器能得到真实的节点树，再遍历成JS对象最可靠。
核心实现思路
借助DOMParser把字符串变成Document，然后从body的首个子节点开始递归读取。每个元素节点抽取标签名、属性集合和子节点，文本节点记录内容即可。
// 将HTML片段字符串转化为JS对象
function htmlToJsObject(htmlStr) {
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');
const root = doc.body.firstElementChild;
function traverse(node) {
if (node.nodeType === Node.TEXT_NODE) {
const text = node.textContent.trim();
return text ? { type: 'text', content: text } : null;
}
if (node.nodeType === Node.ELEMENT_NODE) {
const attrs = {};
for (const attr of node.attributes) {
attrs[attr.name] = attr.value;
}
const children = [];
node.childNodes.forEach(child => {
const item = traverse(child);
if (item) children.push(item);
});
return {
type: 'element',
tag: node.tagName.toLowerCase(),
attributes: attrs,
children: children
};
}
return null;
}
return traverse(root);
}
// 使用示例
const html = '<div class="box"><span>你好</span>世界</div>';
const obj = htmlToJsObject(html);
console.log(obj);
转换后的对象结构
以上示例会生成如下结构的普通JS对象，完全脱离DOM也可读取：
| 字段 | 含义 |
|---|---|
| type | 节点类型，element或text |
| tag | 元素标签名小写 |
| attributes | 元素属性键值对 |
| children | 子节点对象数组 |
操作与注意事项
- 如果HTML片段含多个顶层元素，可遍历
body的所有子节点再组装成数组。 - SVG或MathML等命名空间节点，tagName可能带前缀，按需处理。
- 转换后的对象可直接用JSON.stringify发给后端，或做节点对比。
- 不要在Node.js环境直接使用DOMParser，需要借助jsdom等库。
小结
把已有HTML片段转化为JS对象，本质是用DOM解析加递归提取。掌握这种方法后，无论是内容过滤、属性批量修改还是结构分析，都可以在纯数据层面完成，不必频繁操作真实DOM。