Convert HTML Table to JSON

Giới thiệu về công cụ Convert HTML Table to JSON

Trong kỷ nguyên của các ứng dụng web hiện đại (SPA - Single Page Applications), dữ liệu thường được truyền tải qua lại giữa máy chủ (Server) và máy khách (Client) thông qua định dạng JSON (JavaScript Object Notation). Tuy nhiên, một lượng lớn thông tin có giá trị trên Internet (như bảng giá chứng khoán, thông số kỹ thuật sản phẩm, danh sách tỷ giá ngân hàng, hoặc lịch thi đấu thể thao) vẫn đang được hiển thị dưới dạng cấu trúc thẻ HTML Table truyền thống.

Để trích xuất (Web Scraping) và tái sử dụng nguồn dữ liệu này cho các ứng dụng nội bộ hoặc tích hợp vào API, lập trình viên buộc phải bóc tách dữ liệu từ các thẻ <table>, <tr>, <td> và cấu trúc lại chúng. Công cụ Convert HTML Table to JSON trực tuyến của VoVietHoang.top ra đời nhằm giải quyết triệt để vấn đề này. Chỉ với thao tác sao chép và dán, bạn có thể biến một đoạn mã HTML cồng kềnh thành một mảng JSON gọn gàng, có hệ thống Key-Value rõ ràng.

Tại sao không nên dùng Regex (Biểu thức chính quy) để phân tích HTML?

Rất nhiều nhà phát triển mắc sai lầm khi cố gắng sử dụng Biểu thức chính quy (Regular Expressions - Regex) để tìm kiếm nội dung giữa các thẻ <td> và </td>. Trong khoa học máy tính, HTML không phải là một ngôn ngữ chính quy (Regular Language); nó là một ngôn ngữ đánh dấu lồng nhau (Nested Markup Language). Việc sử dụng Regex cho HTML sẽ gặp phải các vấn đề nghiêm trọng sau:

• Thẻ lồng nhau (Nested Tags): Một ô trong bảng có thể chứa một bảng khác, hoặc chứa các thẻ <span>, <a>, <div> lồng nhau phức tạp. Regex rất dễ bị "bắt nhầm" thẻ đóng.
• Thuộc tính linh hoạt (Attributes): Thẻ HTML có thể chứa class, id, style, data-attributes (Ví dụ: <td class="text-center" data-val="10">). Viết Regex để bao quát mọi trường hợp này là cực kỳ thiếu hiệu quả.
• Cấu trúc thiếu chuẩn: Rất nhiều website cũ không tuân thủ chuẩn HTML5. Chúng có thể thiếu thẻ <thead>, thiếu thẻ đóng </td>, hoặc gộp chung tiêu đề và dữ liệu trong cùng một thẻ <tbody>.

Nguyên lý hoạt động của Parser DOM chuyên dụng

Để khắc phục những nhược điểm của Regex, công cụ của chúng tôi sử dụng hàm DOMParser API được tích hợp sẵn trong trình duyệt. Nó hoạt động như sau:

1. Khởi tạo DOM Ảo: Trình duyệt sẽ đọc chuỗi HTML của bạn và xây dựng một cây cấu trúc DOM (Document Object Model) ảo ẩn dưới nền. Quá trình này mô phỏng lại cách trình duyệt render website, do đó nó có khả năng tự động sửa lỗi các thẻ HTML bị thiếu hoặc viết sai cú pháp.
2. Nhận diện Header (Khóa JSON): Công cụ tìm kiếm thẻ <thead> hoặc các thẻ <th> để làm danh sách Key (Thuộc tính) cho các đối tượng JSON. Nếu bảng không có Header, hệ thống sẽ tự động tạo các Key mặc định như Column_1, Column_2.
3. Duyệt dữ liệu (Node Traversal): Hệ thống lặp qua từng hàng <tr> trong <tbody>, lấy nội dung văn bản (TextContent) của từng ô <td> và ghép nối (map) với Key tương ứng đã tìm thấy ở bước 2.

Nhờ quy trình này, kết quả JSON trả về luôn duy trì được tính logic, sạch sẽ và không bị dính các ký tự mã hóa dư thừa.

Ví dụ thực tế: Biến đổi bảng nhân sự

Dưới đây là minh họa trực quan để bạn hiểu rõ cách dữ liệu được định hình lại.

1. Đoạn mã HTML đầu vào (Input)

Giả sử bạn cào được đoạn mã HTML hiển thị danh sách nhân sự từ một website công ty:

<table class="employee-table">
  <thead>
    <tr>
      <th>Mã NV</th>
      <th>Họ và Tên</th>
      <th>Phòng ban</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>NV001</td>
      <td><strong>Võ Viết Hoàng</strong></td>
      <td>Kỹ thuật (IT)</td>
    </tr>
    <tr>
      <td>NV002</td>
      <td>Trần Mai Anh</td>
      <td>Nhân sự (HR)</td>
    </tr>
  </tbody>
</table>

2. Kết quả JSON đầu ra (Output)

Nếu bạn tích chọn "Xóa các thẻ HTML lồng bên trong" (loại bỏ thẻ <strong>), kết quả nhận được sẽ là một mảng Array of Objects cực kỳ gọn gàng:

[
  {
    "Mã NV": "NV001",
    "Họ và Tên": "Võ Viết Hoàng",
    "Phòng ban": "Kỹ thuật (IT)"
  },
  {
    "Mã NV": "NV002",
    "Họ và Tên": "Trần Mai Anh",
    "Phòng ban": "Nhân sự (HR)"
  }
]

Ứng dụng thực tiễn của công cụ

• Chuyển đổi dữ liệu cũ (Data Migration): Rất nhiều hệ thống quản trị nội dung (CMS) thập niên 2000 lưu trữ báo cáo dưới dạng HTML cứng trong cơ sở dữ liệu. Bằng cách sử dụng công cụ này, bạn có thể giải nén dữ liệu đó thành JSON để import vào các database hiện đại như MongoDB hay PostgreSQL.
• Xây dựng Mock API: Frontend Developer có thể copy một bảng dữ liệu từ Wikipedia, dán vào công cụ để tạo ngay một file data.json. File này dùng để mô phỏng API trả về, phục vụ việc thiết kế UI mà không cần chờ Backend làm xong cơ sở dữ liệu.
• Huấn luyện AI và Machine Learning: Các mô hình xử lý ngôn ngữ tự nhiên (NLP) thường yêu cầu dữ liệu đầu vào dạng văn bản có cấu trúc. Chuyển đổi HTML Table sang JSON giúp dữ liệu dễ dàng được phân tích bằng thư viện Pandas trong Python.

Hướng dẫn các bước thao tác

1. Chuẩn bị mã HTML: Truy cập trang web chứa bảng, nhấn chuột phải vào bảng chọn Inspect (Kiểm tra). Click chuột phải vào thẻ <table> trong bảng mã nguồn, chọn Copy -> Copy element.
2. Dán dữ liệu: Dán đoạn mã vừa copy vào khung "Mã HTML đầu vào". Hệ thống chấp nhận mã có chứa cả các thẻ div bọc ngoài, thuật toán sẽ tự động dò tìm thẻ table đầu tiên.
3. Tùy chỉnh: Khuyến nghị giữ nguyên tùy chọn "Tự động xóa các thẻ HTML lồng bên trong" để mảng JSON của bạn không bị dính các thẻ <a>, <span> hay <br>.
4. Xuất dữ liệu: Nhấn nút "Chuyển đổi thành JSON". Tệp văn bản định dạng chuẩn sẽ xuất hiện ở cột bên cạnh. Nhấn "Sao chép" để sử dụng cho mã nguồn của bạn.