UltKit

HTML 轉 JSON 轉換器

從已儲存的網頁中取出表格,轉成程式可以直接迴圈處理的 JSON。標題儲存格決定鍵名,表格的每一列都會成為陣列中的一個物件。

資料轉換器

或將CSV, TSV, TXT … 檔案拖曳到這裡 ·

每個檔案最大 95 MB· 最多 20 個檔案· 30 分鐘後刪除

輸出

檔案會在我們的伺服器上處理,並於 30 分鐘後刪除。

使用方式

  1. 1

    儲存網頁或表格

    在瀏覽器中按 Ctrl+S(Mac 為 Cmd+S)並保留 HTML 檔案,或從開發人員工具複製表格的標記,貼到 .html 檔案中。最多可上傳 20 個檔案,每個檔案 95 MB。

  2. 2

    選擇 JSON 結構

    系統已預設為物件陣列。在進階設定下,將 JSON 結構切換為陣列的陣列,可得到更精簡的檔案;關閉格式化排版則會輸出成單行。

  3. 3

    轉換並使用資料

    按下轉換為 JSON並下載檔案,即可在 JavaScript 中用 JSON.parse、在 Python 中用 json.load,或用任何 API 用戶端載入。

儲存網頁後上傳 .html 檔案,表格的每一列都會轉成以表格標題儲存格為鍵的 JSON 物件。

什麼時候需要把網頁表格轉成 JSON

很多有用的資料只存在於 HTML 表格中:匯率頁面、運動聯賽排名、內部網路顯示卻不讓您下載的報表、列出所有伺服器的狀態頁面。瀏覽器顯示得很漂亮,但要製作圖表的前端開發人員,或需要測試資料的測試人員,想要的是物件陣列。

常見的做法是寫爬蟲:抓取網頁,用 Beautiful Soup 或 Cheerio 解析,逐列走訪並對應儲存格。頁面每天都在變動時,這樣做很值得。如果只是需要一次的表格,上傳儲存好的網頁更快,也不用維護任何東西。

HTML 表格轉 JSON 範例

輸入的表格含有 City 和 Founded 兩個 th 標題,輸出為物件陣列
<table>
  <tr><th>City</th><th>Founded</th></tr>
  <tr><td>Porto</td><td>1123</td></tr>
  <tr><td>Graz</td><td>1128</td></tr>
</table>

[
  { "City": "Porto", "Founded": 1123 },
  { "City": "Graz", "Founded": 1128 }
]

轉換時保留與捨棄的內容

  • 保留:儲存格文字、作為鍵的標題列,以及列的順序
  • 捨棄:CSS、行內樣式、class,以及表格以外的頁面內容
  • 捨棄:儲存格內的圖片和圖示,因為沒有文字值
  • 連結儲存格保留顯示的文字,而不是背後的網址
  • 儲存格開頭和結尾的空白會由去除空白移除
  • 輸出為 UTF-8,這也是 RFC 8259 對系統間交換的 JSON 所要求的編碼

HTML 轉 JSON 的限制

支援已儲存的網頁
.html .htm
每批次頁數
20
每個上傳檔案
95 MB
之後檔案會被刪除
30 分鐘

HTML 與 JSON 對照

HTML

超文字標記語言

HTML 是網頁的標記語言,由 Tim Berners-Lee 在 1990 年代初期提出,現由 WHATWG 以持續更新的標準維護。HTML 檔案用來描述標題、段落、連結、表格、圖片和表單,樣式通常由 CSS 提供。所有瀏覽器都能呈現 HTML,電子郵件範本和儲存的網頁也使用它。單一 HTML 檔案常依賴外部圖片和樣式表,單獨移動後可能會顯示異常。

壓縮方式
–
透明度
–
動畫
–
推出年份
1993 · Tim Berners-Lee; maintained by WHATWG
HTML 轉檔工具

JSON

JavaScript 物件表示法

JSON 是用於結構化資料的輕量文字格式,由 Douglas Crockford 在 2000 年代初期推廣,並標準化為 RFC 8259 和 ECMA-404。它以簡單易讀的語法表示物件、陣列、字串、數字、布林值和 null。幾乎所有程式語言都把它當作網頁 API、設定檔和應用程式間資料交換的預設格式。它沒有內建註解、日期或結構描述,大型巢狀檔案不用檢視器很難閱讀。

壓縮方式
–
透明度
–
動畫
–
推出年份
2001 · Douglas Crockford
JSON 轉檔工具

當報表頁面、內部網路或公開統計網站上,為人類讀者發布的表格需要提供給腳本、圖表程式庫或 API 測試使用時,就需要把 HTML 轉成 JSON。

這兩種格式源自不同的傳統。HTML 由 Tim Berners-Lee 於 1991 年首次描述,現由 WHATWG 以持續更新的標準維護,用來標記供顯示的文件。JSON 由 Douglas Crockford 制定,並標準化為 RFC 8259 和 ECMA-404,只存放資料。從前者轉到後者,主要就是捨棄呈現相關的內容,所以結果通常比儲存的網頁小得多。如果表格來自 XML 資料來源而非網頁,可以用 XML 轉 JSON 完成對應的工作。

HTML 轉 JSON 常見問題

轉換器會讀取整個網頁,還是只讀表格?

只轉換表格標記:也就是 table、tr、th 和 td 元素內的列與儲存格。導覽選單、段落,以及用 div 元素排出來的卡片版面都不是表格資料,因此不會轉成 JSON。

JSON 的鍵名來自哪一列?

標題列,通常是表格最上方的 th 儲存格。開啟第一列為標題列後,其文字會成為下方每個值的鍵,例如標題為 Population 的欄位,會在每個物件中產生 "Population": "…"。

colspan 和 rowspan 儲存格如何處理?

合併儲存格涵蓋多個格線位置,但只有一個值。這個值只會出現在第一個位置,因此轉換後請檢查被跨越的欄位;如果表格依賴合併的標題,請用程式碼補上空缺。

為什麼 JSON 裡的數字帶有逗號或註腳符號?

網頁表格是寫給人看的,儲存格可能寫成 1,204,000 或 8.3[2]。像 1123 這樣的單純數字會變成 JSON 數字,但上述儲存格不是有效數字,會保留為字串;進行運算前,請先用程式碼去掉千分位符號和註腳標記。

可以從網站擷取表格嗎?

這取決於網站的條款和資料本身,而不是檔案格式。公開統計資料和您自己匯出的報表通常沒問題;重複使用他人內容前,請先確認條款。

可以改輸出試算表而不是 JSON 嗎?

可以。HTML 轉 CSV 會把同一個表格寫成以逗號分隔的列,可在 Excel、Google 試算表或 Numbers 中開啟。