跳至主要內容
Lizely

JSON 轉 HTML 表格轉換工具

將嚴格的 JSON 物件轉換為轉義、可複製的 HTML 表格，並提供確定性的合併欄位與安全的文字預覽。

隱私權：你的檔案不會離開裝置，所有處理均在瀏覽器本機完成。

使用方式

  1. 1.貼上一個嚴格的 JSON 物件或非空的物件陣列。
  2. 2.轉換並檢視合併欄位、缺失的資料格、null 值、巢狀的 JSON 文字與轉義預覽。
  3. 3.複製 HTML 碎片，加入目的地特定的字幕與樣式，並在最終頁面測試它。

關於JSON 轉 HTML 表格轉換工具

JSON 轉 HTML 表格轉換工具可將結構化的 JSON 記錄轉為易讀的表格標記，適用於檔案、原型、郵件草稿、靜態頁面及開發人員交接。貼上一個物件或物件陣列，執行轉換，檢視 React 動態預覽，並複製精確的 HTML。所有操作皆在當前瀏覽器標籤頁完成。此工具不會上傳資料、評估 JavaScript、呼叫 API 或使用 innerHTML 插入產生的標記。

輸入必須為符合 RFC 8259 定義的嚴格 JSON 格式。註解、尾隨逗號、未定義值、NaN、Infinity、BigInt 語法以及 JavaScript 物件字面量皆被拒絕。單一物件轉為一筆資料。陣列必須至少包含一個物件，且每個陣列成員必須為物件。原始值與原始值陣列因無法提供穩定的命名欄位而被拒絕。

欄位為第一個出現的物件中可列舉的鍵值，依首次出現順序合併。第一筆資料中的鍵值會先出現，後續資料中出現的新增鍵值會追加。缺失的鍵值會變成空格。明確的 null 值會顯示為文字 null，因此缺失與實際的 JSON null 會被區分，不會合併為相同輸出。字串維持為字串，數值與布林值使用可讀的 JSON 語法，巢狀陣列或物件則轉為緊湊的 JSON 文字。

每一個標題與資料格皆在放入 th 或 td 標籤前，針對 HTML 文字情境進行轉義。安姆斯、小於、大於、引號與撇號皆會被轉義。例如 <script> 會以文字形式顯示，而非變成標籤。頁面預覽由 React 文位元組點根據原始資料值構建，而非透過注入產生的 HTML。這提供了一道額外的防護，讓不信任的輸入與可執行標記之間保持隔離。

結果使用一個包含 thead（表頭）與一個標題行、以及 tbody（資料行）包含所有資料行的表格元素。刻意不加入 CSS 類名、內聯樣式、字幕、ID、連結、排序控制項或依賴目的地的可訪問性陳述。相關的樣式與字幕應由使用頁面自行加入，並確認周圍文件能提供足夠的上下文。此轉換工具不會推論欄位型別或建立資料屬性。

巢狀資料以資料形式呈現，而非遞迴展開。這確保了欄位模型的決定性，並避免因陣列的笛卡兒積而無意中擴增資料行。若目的地需要關係型展平、標準化子表、點路徑欄位或每筆巢狀項目一筆資料，應先依據明確的方案轉換資料，再使用此輸出。細節的 JSON 保留在單一欄位中，雖然對表格閱讀可能不夠方便，但內容完整無損。

物件鍵值順序依照解析 JavaScript 物件所顯示的順序，後續紀錄僅貢獻之前未見的鍵值。JSON 文字中重複的成員名稱無法保留，因為標準 JSON 解析會在表格產生前解決這些重複鍵值；請勿使用重複鍵值作為資料。類似原型的名稱如 __proto__ 會被視為自有屬性，從不被賦值至正常的原型載入累積器。

限制為 500,000 輸入字元、10,000 欄位、200 欄位與 5,000,000 輸出字元。若超出限制，工具將失敗，不會截斷。八個外部測試案例涵蓋字串、數值、布林值、null、對 HTML 敏感的文字、引號、巢狀陣列與不重疊的物件鍵。請在最終目的地檢視複製的片段，保留不信任內容於文字情境中，並符合目的地的內容安全策略與可訪問性需求。

方法與來源

解析嚴格的 JSON，要求物件形狀的記錄，合併第一齣現的鍵值，區分缺失與 null，將巢狀值序列化為緊湊的 JSON，對所有標題與資料格進行 HTML 文字情境轉義，並使用 React 文位元組點呈現預覽。

常見問題

為何缺失的資料為空白，而 null 值則顯示為 null？
缺失的屬性與明確的 JSON null 有不同含意。輸出保留此區別，不會默默將其合併。
JSON 文字能在預覽中產生指令碼嗎？
產生的片段會對 HTML 文字字元進行轉義，預覽使用 React 文位元組點，而非注入的標記。仍需審查複製片段在下游的使用方式。
為何巢狀物件會保留在單一欄位？
遞迴展平需要特定業務的行與欄位策略。緊湊的 JSON 保留巢狀值，不假設任何策略。

相關工具

開發者工具 使用指南

查看全部