HTML数据如何转换为JSON格式 HTML数据格式转换的完整教程-html教程-PHP中文网

HTML数据如何转换为JSON格式 HTML数据格式转换的完整教程

爱谁谁

发布： 2025-10-21 13:53:02

原创

456人浏览过

将HTML转换为JSON需提取结构化数据并映射为键值对，常用JavaScript或Python解析DOM，遍历表格、列表等元素，清洗文本后构建成JSON对象输出。

html数据如何转换为json格式 html数据格式转换的完整教程

将HTML数据转换为JSON格式，本质上是提取HTML中的结构化信息（如表格、列表、表单等），然后将其组织成JSON对象。这个过程通常用于网页爬虫、数据迁移或前端开发中。以下是完整的操作方法和步骤。

理解HTML与JSON的区别

HTML 是一种标记语言，用于展示网页内容；而 JSON 是轻量级的数据交换格式，适合存储和传输结构化数据。两者用途不同，因此转换时需提取HTML中的有意义数据，而非直接“转码”。

例如，一个HTML表格包含姓名和年龄，目标是将其转为如下JSON：

{
  "users": [
    { "name": "张三", "age": "25" },
    { "name": "李四", "age": "30" }
  ]
}

登录后复制

使用JavaScript在浏览器中提取并转换

如果你在浏览器环境中操作，可以直接用JavaScript解析DOM并生成JSON。

立即学习“前端免费学习笔记（深入）”；

以表格为例：

<table id="userTable">
  <tr><th>姓名</th><th>年龄</th></tr>
  <tr><td>张三</td><td>25</td></tr>
  <tr><td>李四</td><td>30</td></tr>
</table>

登录后复制

对应的JavaScript代码：

function tableToJSON() {
  const table = document.getElementById("userTable");
  const rows = table.querySelectorAll("tr");
  const result = [];
<p>for (let i = 1; i < rows.length; i++) { // 跳过表头
const cells = rows[i].querySelectorAll("td");
const obj = {
name: cells[0].textContent.trim(),
age: cells[1].textContent.trim()
};
result.push(obj);
}</p><p>return JSON.stringify({ users: result }, null, 2);
}</p><p>console.log(tableToJSON());

登录后复制

吉卜力风格图片在线生成

将图片转换为吉卜力艺术风格的作品

121

查看详情

使用Python进行自动化转换（适用于爬虫）

在服务器端或批量处理时，推荐使用Python配合BeautifulSoup库解析HTML，并输出JSON。

安装依赖：

pip install beautifulsoup4

登录后复制

示例代码：

from bs4 import BeautifulSoup
import json
<p>html_content = """
<table>
<tr><th>姓名</th><th>年龄</th></tr>
<tr><td>张三</td><td>25</td></tr>
<tr><td>李四</td><td>30</td></tr>
</table>
"""</p><p>soup = BeautifulSoup(html_content, 'html.parser')
rows = soup.find_all('tr')[1:]  # 跳过表头
data = []</p><p>for row in rows:
cells = row.find_all('td')
if len(cells) == 2:
data.append({
'name': cells[0].get_text(strip=True),
'age': cells[1].get_text(strip=True)
})</p><p>json_output = json.dumps({'users': data}, ensure_ascii=False, indent=2)
print(json_output)

登录后复制