跳到主要内容

HTML 表格转 JSON:从网页复制表格到对象数组的完整做法

把网页里的 HTML 表格转成干净的 JSON 对象数组,讲清楚 th 做键、每行做对象、清理标签和实体的细节,适合抓数据和爬虫预处理,全程浏览器本地完成不上传。

发布于 作者 李雷
#html #json #爬虫 #数据清洗 #前端

HTML 表格转 JSON:从网页复制表格到对象数组

抓数据这件事,最后一公里往往卡在表格上。你打开一个页面,想要的内容明明就在眼前,排得整整齐齐,可它是一张 <table>,塞满了 <b>、<a>、<br> 和 &amp; 这类东西。要在代码里用,得先把它变成结构化数据。最自然的目标格式就是 JSON 对象数组:表头做键,每一行做一个对象。这篇讲清楚这个转换里那些容易被忽略的细节。

为什么对象数组是默认目标

一张普通的数据表,第一行是列名,后面每一行是一条记录。这跟 JSON 对象数组的形状天然对得上:列名当对象的键,行里每个单元格当对应的值。转完之后你拿到的是 [{...}, {...}, {...}],直接 map、filter、按字段取值都顺手,不用再记第几列是什么。

具体规则只有一句:<th>(或首行)的每个单元格做键,后面每个 <tr> 做一个对象。第一行有 n 个表头,后面每行就有 n 个值,按位置一一对上塞进对象。如果某张表第一行其实是数据,没有真表头(常见于股票行情、价目这类表),硬拿它当键会造出莫名其妙的键名,这时候就该退回二维数组,得到 [["AAPL","196.21"],["MSFT","421.55"]],不凭空发明键。

一段真实的输入输出

说一千道一万,不如看一眼。假设你从某商品页复制下来这段标记:

<table>
  <thead>
    <tr><th>商品</th><th>价格</th><th>有货</th></tr>
  </thead>
  <tbody>
    <tr><td><b>4K 显示器</b></td><td>399</td><td>true</td></tr>
    <tr><td>机械键盘 &amp; 腕托</td><td>129</td><td>false</td></tr>
  </tbody>
</table>

打开类型推断后,转出来是这样:

[
  { "商品": "4K 显示器", "价格": 399, "有货": true },
  { "商品": "机械键盘 & 腕托", "价格": 129, "有货": false }
]

注意三处:<b> 标签被洗掉只留文字,&amp; 还原成了 &,纯数字 399 变成真正的 JSON number 而不是字符串 "399",true/false 变成布尔。这一步省掉的,正是你平时转完还要手动洗一遍的活儿。我在 toolora.info/zh/t/html-table-to-json/ 里把这套规则做成了开关,粘进去就出结果。

清理标签和实体,才是脏活的核心

抓来的表格几乎从不干净。单元格里随手裹着加粗、链接、换行,还有各种 HTML 实体。一个稳妥的转换要把每个单元格都收敛成纯文本:

  • <td><b>4K 显示器</b></td> 取可见文字,得到 4K 显示器。
  • <a href="...">链接</a> 只留锚文本,扔掉 href。
  • 两行之间的 <br> 当成一个空格,所以 北京<br>朝阳区 读成 北京 朝阳区,而不是粘成一坨。
  • &amp; 还原成 &,&nbsp; 还原成空格,&#233; 还原成 é。
  • <script> 和 <style> 里的内容整块丢掉,杂码绝不混进数据。

类型推断要留个心眼:它故意把 "1,234" 和 "￥99" 留成字符串,因为带千分位逗号和货币符号的本就不是纯数字;像 "007" 这种带前导零的 id、邮编、电话,也只有在关掉推断时才不会被改坏。想要数字和布尔时再打开,别让它默认开着。

当作爬虫预处理的一环

写爬虫时,我宁可少装一个依赖。为一次性的活儿装 cheerio、在循环里手搓正则,性价比很低。一张孤零零的 <table> 想变成种子数据或测试夹具,粘进来打开类型推断,几秒钟就拿到带真数字和布尔的对象数组,直接塞进脚本。

一个页面常常有好几张表:导航、页脚、侧栏里都可能藏着 <table>。默认只取源码里的第一张,这是你专门复制某张表时要的结果。如果整页粘进来又想要全部,就解析所有表格,输出变成数组,每个元素是一张表的 JSON,按出现顺序排。

导入前我还习惯先核一遍:列对不齐、多出来的 colspan、偷偷为空的单元格,在结构化的 JSON 里全都一眼看出来,坏行在这儿就抓到,而不是等它弄崩下游。

本地处理,粘进来的源码不乱跑

爬来的页面源码里常带着邮箱、会话令牌、cookie 提示条,你不会想让它们离开这台机器。靠谱的做法是整个转换都在浏览器标签页里用纯 JavaScript 跑:找表、读行、洗单元格、序列化。解析用字符串匹配而不是活的 DOM,所以粘进来的 HTML 从不被赋给文档,里面藏的内联脚本、跟踪像素、图片请求一个都不会触发。输入也不写进分享链接,你复制的链接只带选项设置,不带表格内容。

它和 CSV 系列工具的分工

JSON 不是唯一终点。如果你要的是给表格软件或数据库导入,CSV 往往更顺手,这时候可以先把表格转成 CSV。反过来,手里已经有 CSV 想变成对象数组,用 CSV 转 JSON 更直接。整条链路里,HTML 表格转 JSON 负责的就是从网页标记到结构化数据这一段,把最脏的标签清理和键值对齐替你做完,剩下的交给你的代码。

Made by Toolora · Updated 2026-06-13