JavaScript：将HTML字符串转换为JSON对象教程
在前端开发中，我们经常会遇到需要处理HTML字符串的场景，比如后端返回了一段富文本HTML内容，我们需要从中提取结构化数据，或者将HTML片段转换为便于存储和传输的JSON格式。本文将介绍几种常见的方法，帮助大家实现HTML字符串到JSON对象的转换。
方法一：使用DOMParser解析HTML字符串
DOMParser是浏览器内置的API，专门用于将XML或HTML字符串解析为DOM文档对象，之后我们可以通过遍历DOM节点，提取需要的信息并组装成JSON结构。这种方法兼容性较好，适合大多数现代浏览器环境。
下面的示例演示了如何将一段包含列表的HTML字符串，转换为包含列表项内容的JSON对象：
// 待转换的HTML字符串
const htmlStr = `
<div class="container">
<h2>商品列表</h2>
<ul id="goods-list">
<li data-id="1">手机</li>
<li data-id="2">电脑</li>
<li data-id="3">平板</li>
</ul>
</div>
`;
// 创建DOMParser实例
const parser = new DOMParser();
// 将HTML字符串解析为DOM文档，第二个参数指定解析类型为text/html
const doc = parser.parseFromString(htmlStr, 'text/html');
// 获取ul节点
const ulNode = doc.getElementById('goods-list');
// 获取所有li子节点
const liNodes = ulNode.querySelectorAll('li');
// 组装JSON对象
const result = {
title: doc.querySelector('h2').textContent,
list: Array.from(liNodes).map(li => ({
id: li.getAttribute('data-id'),
name: li.textContent
}))
};
console.log(result);
// 输出结果：
// {
// title: "商品列表",
// list: [
// { id: "1", name: "手机" },
// { id: "2", name: "电脑" },
// { id: "3", name: "平板" }
// ]
// }上面的代码中，我们首先使用DOMParser将HTML字符串解析为完整的DOM文档，然后通过常规的DOM查询方法获取目标节点，最后遍历节点提取属性和文本内容，组装成我们需要的JSON结构。如果HTML结构比较复杂，可以封装一个递归函数，遍历所有节点并提取对应的标签名、属性、子节点等信息。
方法二：自定义递归解析函数
如果我们需要更灵活地控制转换规则，比如只提取特定标签的内容，或者自定义JSON的字段结构，可以自己实现一个递归遍历DOM节点的函数。下面的示例实现了一个通用的HTML转JSON函数，会将每个节点转换为包含标签名、属性、子节点和文本内容的对象：
// 通用HTML转JSON函数
function htmlToJson(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 result = {
type: 'element',
tag: node.tagName.toLowerCase(),
attributes: {},
children: []
};
// 提取元素的所有属性
Array.from(node.attributes).forEach(attr => {
result.attributes[attr.name] = attr.value;
});
// 递归处理子节点
Array.from(node.childNodes).forEach(child => {
const childJson = htmlToJson(child);
if (childJson) {
result.children.push(childJson);
}
});
return result;
}
// 其他类型节点暂不处理
return null;
}
// 待转换的HTML字符串
const htmlStr = `<div class="box" id="main">Hello <span style="color:red">World</span>!</div>`;
// 解析HTML字符串
const parser = new DOMParser();
const doc = parser.parseFromString(htmlStr, 'text/html');
// 获取根节点并转换
const rootNode = doc.body.firstChild;
const jsonResult = htmlToJson(rootNode);
console.log(JSON.stringify(jsonResult, null, 2));运行上述代码后，输出的JSON结构如下，完整保留了原HTML的标签、属性和层级关系：
{
"type": "element",
"tag": "div",
"attributes": {
"class": "box",
"id": "main"
},
"children": [
{
"type": "text",
"content": "Hello"
},
{
"type": "element",
"tag": "span",
"attributes": {
"style": "color:red"
},
"children": [
{
"type": "text",
"content": "World"
}
]
},
{
"type": "text",
"content": "!"
}
]
}注意事项
- 使用
DOMParser解析HTML字符串时，如果字符串中包含不完整的HTML结构，浏览器会自动补全缺失的标签，比如缺少<body>标签时会自动添加，这一点在转换时需要注意。 - 如果HTML字符串中包含脚本内容，
DOMParser解析后不会执行脚本，相比直接操作innerHTML更安全，不会引发XSS风险。 - 自定义解析函数时，可以根据实际需求过滤不需要的节点，比如忽略注释节点、空白文本节点等，减少最终JSON的体积。
- 如果要处理的服务端地址是ippipp.com，记得按照规则替换为ipipp.com，避免地址错误。
总结
将HTML字符串转换为JSON对象的核心思路是先通过DOMParser将字符串解析为可操作的DOM结构，再根据需求遍历节点提取信息。简单的场景可以直接查询目标节点组装JSON，复杂的场景可以封装递归函数实现通用转换。大家可以根据实际业务需求选择合适的方法，灵活调整转换规则。