แปลง HTML เป็น JSON

Q: ขอผลลัพธ์เป็นสเปรดชีตแทน JSON ได้หรือไม่

ได้ [HTML to CSV](/html-to-csv) จะเขียนตารางเดียวกันเป็นแถวคั่นด้วยจุลภาค เปิดได้ใน Excel, Google Sheets หรือ Numbers

ดึงตารางออกจากหน้าเว็บที่บันทึกไว้ แล้วรับกลับมาเป็น JSON ที่โค้ดของคุณวนลูปอ่านได้ทันที เซลล์หัวตารางใช้เป็นชื่อคีย์ และทุกแถวของตารางจะกลายเป็นอ็อบเจ็กต์หนึ่งรายการในอาร์เรย์

หรือลากไฟล์ CSV, TSV, TXT … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

CSV และข้อความ

ตัวคั่น

อักขระที่ใช้คั่นคอลัมน์ในไฟล์ CSV และไฟล์ข้อความ ทั้งตอนอ่านและตอนเขียน ค่าอัตโนมัติจะตรวจหาจากไฟล์ต้นฉบับและเขียนด้วยจุลภาค

การเข้ารหัสข้อความ

UTF-8 ใช้ได้กับทุกภาษา เลือก UTF-8 พร้อม BOM หาก Excel บน Windows แสดงอักษรที่มีวรรณยุกต์หรืออักษรเอเชียเพี้ยนเมื่อเปิด CSV

แถวแรกเป็นส่วนหัว

ใช้แถวแรกเป็นชื่อคอลัมน์ ซึ่งจะกลายเป็นคีย์ JSON แท็ก XML ชื่อคอลัมน์ SQL และการจับคู่ฟิลด์ vCard ปิดตัวเลือกนี้หากแถวที่ 1 เป็นข้อมูล

ชีต

ชีตที่จะแปลง

สำหรับไฟล์ Excel, ODS และ Numbers: แปลงเฉพาะชีตแรก หรือทุกชีต (CSV หนึ่งไฟล์ต่อชีตใน ZIP หรือคีย์ JSON หนึ่งคีย์ต่อชีต)

JSON, XML และ SQL

จัดรูปแบบให้อ่านง่าย

เยื้องบรรทัดผลลัพธ์เพื่อให้คนอ่านได้ง่าย หากปิดไว้จะเขียนให้มีจำนวนบรรทัดน้อยที่สุด ซึ่งทำให้ไฟล์เล็กกว่า

โครงสร้าง JSON

อาร์เรย์ของออบเจ็กต์จะใช้ชื่อคอลัมน์เป็นคีย์ในทุกแถว ส่วนอาร์เรย์ของอาร์เรย์จะกะทัดรัดกว่าและเก็บส่วนหัวไว้เป็นอาร์เรย์แรก

ค่าข้อมูล

วันที่

เขียนเซลล์วันที่ใหม่ให้เป็นรูปแบบเดียวกัน ISO (2026-10-18) ปลอดภัยที่สุดสำหรับฐานข้อมูลและโค้ด ส่วนคงเดิมจะเก็บไว้ตามที่ปรากฏในต้นฉบับ

ตัดช่องว่าง

ลบช่องว่างที่ต้นและท้ายของทุกค่า ซึ่งเป็นสาเหตุที่พบบ่อยของการค้นหาข้อมูลล้มเหลวหลังนำเข้า

วิธีใช้เครื่องมือนี้

1
บันทึกหน้าเว็บหรือตาราง
ในเบราว์เซอร์ให้กด Ctrl+S (Cmd+S บน Mac) แล้วบันทึกไฟล์ HTML หรือคัดลอกโค้ดของตารางจากเครื่องมือนักพัฒนาไปใส่ในไฟล์ .html อัปโหลดได้สูงสุด 20 ไฟล์ ไฟล์ละไม่เกิน 95 MB
2
เลือกรูปแบบโครงสร้าง JSON
ระบบตั้งค่าเป็น Array of objects ให้แล้ว หากต้องการไฟล์ที่กะทัดรัดกว่า ให้ไปที่ การตั้งค่าขั้นสูง แล้วเปลี่ยน โครงสร้าง JSON เป็น Array of arrays หรือปิด จัดรูปแบบให้อ่านง่าย เพื่อให้ได้ผลลัพธ์บรรทัดเดียว
3
แปลงไฟล์แล้วนำข้อมูลไปใช้
กด แปลงเป็น JSON ดาวน์โหลดไฟล์ แล้วโหลดด้วย JSON.parse ใน JavaScript, json.load ใน Python หรือไคลเอนต์ API ใดก็ได้

บันทึกหน้าเว็บ อัปโหลดไฟล์ .html แล้วแต่ละแถวของตารางจะกลายเป็นออบเจกต์ JSON ที่ใช้เซลล์ส่วนหัวของตารางเป็นคีย์

เมื่อใดที่ต้องแปลงตารางบนเว็บเป็น JSON

ข้อมูลที่มีประโยชน์จำนวนมากมีอยู่แค่ในรูปตาราง HTML เช่น หน้าอัตราแลกเปลี่ยน ตารางคะแนนลีกกีฬา รายงานที่อินทราเน็ตแสดงให้ดูแต่ไม่ให้ดาวน์โหลด หรือหน้าสถานะที่แสดงเซิร์ฟเวอร์ทุกเครื่อง เบราว์เซอร์แสดงผลได้สวยงาม แต่นักพัฒนาฟรอนต์เอนด์ที่กำลังสร้างแผนภูมิ หรือผู้ทดสอบที่ต้องการข้อมูลตัวอย่าง ต้องการอาร์เรย์ของออบเจกต์มากกว่า

วิธีที่นิยมคือเขียนสแครปเปอร์ ดึงหน้าเว็บ แยกวิเคราะห์ด้วย Beautiful Soup หรือ Cheerio วนอ่านแต่ละแถวแล้วจับคู่เซลล์ ซึ่งคุ้มค่าเมื่อหน้าเว็บเปลี่ยนทุกวัน แต่สำหรับตารางที่ต้องการเพียงครั้งเดียว การอัปโหลดหน้าที่บันทึกไว้เร็วกว่าและไม่มีอะไรต้องดูแลต่อ

ตัวอย่างการแปลงตาราง HTML เป็น JSON

ตารางอินพุตที่มีส่วนหัว th คือ City และ Founded และเอาต์พุตแบบ Array of objects

<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 สไตล์อินไลน์ คลาส และส่วนของหน้าที่อยู่รอบตาราง
ตัดทิ้ง: รูปภาพและไอคอนในเซลล์ เพราะไม่มีค่าเป็นข้อความ
เซลล์ที่เป็นลิงก์จะเก็บข้อความที่มองเห็น ไม่ใช่ URL ที่อยู่เบื้องหลัง
ช่องว่างที่ต้นและท้ายเซลล์จะถูกตัดโดย ตัดช่องว่าง
เอาต์พุตเป็น UTF-8 ซึ่ง RFC 8259 กำหนดไว้สำหรับ JSON ที่แลกเปลี่ยนระหว่างระบบ

ข้อจำกัดของการแปลง HTML เป็น JSON

รับหน้าเว็บที่บันทึกไว้: .html .htm
หน้าต่อชุด: 20
ต่อไฟล์ที่อัปโหลด: 95 MB
จากนั้นไฟล์จะถูกลบ: 30 นาที

เปรียบเทียบ HTML กับ JSON

HTML

HyperText Markup Language

HTML คือภาษามาร์กอัปของเว็บ อธิบายครั้งแรกโดย Tim Berners-Lee ในช่วงต้นทศวรรษ 1990 และปัจจุบัน WHATWG ดูแลในฐานะมาตรฐานที่ปรับปรุงต่อเนื่อง (living standard) ไฟล์ HTML อธิบายหัวข้อ ย่อหน้า ลิงก์ ตาราง รูปภาพ และแบบฟอร์ม ส่วนการจัดรูปแบบมักมาจาก CSS เบราว์เซอร์ทุกตัวแสดงผล HTML ได้ และยังใช้กับเทมเพลตอีเมลและหน้าเว็บที่บันทึกไว้ ไฟล์ HTML ไฟล์เดียวมักอาศัยรูปภาพและสไตล์ชีตภายนอก จึงอาจแสดงผลผิดเพี้ยนเมื่อย้ายไปเพียงไฟล์เดียว

การบีบอัด: –
พื้นหลังโปร่งใส: –
ภาพเคลื่อนไหว: –
เปิดตัว: 1993 · Tim Berners-Lee; maintained by WHATWG

ตัวแปลงไฟล์ HTML

JSON

JavaScript Object Notation

JSON คือรูปแบบข้อความขนาดเบาสำหรับข้อมูลเชิงโครงสร้าง ได้รับความนิยมจาก Douglas Crockford ในช่วงต้นทศวรรษ 2000 และกำหนดเป็นมาตรฐาน RFC 8259 และ ECMA-404 แสดงอ็อบเจกต์ อาร์เรย์ สตริง ตัวเลข ค่าบูลีน และ null ด้วยไวยากรณ์ที่เรียบง่ายและอ่านง่าย เป็นรูปแบบเริ่มต้นของ API บนเว็บ ไฟล์การตั้งค่า และการแลกเปลี่ยนข้อมูลระหว่างแอปในแทบทุกภาษาโปรแกรม ไม่มีคอมเมนต์ วันที่ หรือสคีมาในตัว และไฟล์ขนาดใหญ่ที่ซ้อนกันหลายชั้นอ่านได้ยากหากไม่มีโปรแกรมดู

การบีบอัด: –
พื้นหลังโปร่งใส: –
ภาพเคลื่อนไหว: –
เปิดตัว: 2001 · Douglas Crockford

ตัวแปลงไฟล์ JSON

แปลง HTML เป็น JSON เมื่อตารางที่เผยแพร่ให้คนอ่าน ไม่ว่าจะอยู่ในหน้ารายงาน อินทราเน็ต หรือเว็บไซต์สถิติสาธารณะ ต้องนำไปป้อนให้สคริปต์ ไลบรารีแผนภูมิ หรือการทดสอบ API

ทั้งสองฟอร์แมตมาจากแนวคิดที่ต่างกัน HTML ซึ่ง Tim Berners-Lee อธิบายไว้เป็นครั้งแรกในปี 1991 และปัจจุบัน WHATWG ดูแลในฐานะมาตรฐานที่พัฒนาต่อเนื่อง ใช้มาร์กอัปเอกสารเพื่อแสดงผล ส่วน JSON ซึ่ง Douglas Crockford เป็นผู้กำหนดและได้รับการกำหนดมาตรฐานเป็น RFC 8259 และ ECMA-404 เก็บเฉพาะข้อมูลเท่านั้น การแปลงจากแบบแรกไปแบบหลังส่วนใหญ่คือการทิ้งส่วนการแสดงผล ผลลัพธ์จึงมักเล็กกว่าหน้าที่บันทึกไว้มาก สำหรับตารางที่มาในรูปฟีด XML ไม่ใช่หน้าเว็บ XML to 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 to CSV จะเขียนตารางเดียวกันเป็นแถวคั่นด้วยจุลภาค เปิดได้ใน Excel, Google Sheets หรือ Numbers