แปลง XML เป็น JSON

ป้อน XML ทางด้านซ้ายเพื่อเริ่มการแปลง

พร้อม

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

คำแนะนำที่เกี่ยวข้อง

แปลง JSON เป็น XML

จัดรูปแบบ JSON

JSON เป็น CSV

JSON → YAML

คิวรี JSONPath

จัดรูปแบบ XML

เกี่ยวกับการแปลง XML เป็น JSON: แปลงข้อมูล XML เป็นออบเจกต์ JSON มาตรฐานโดยอัตโนมัติ

การแปลง XML เป็น JSON คือกระบวนการแปลงข้อมูลในรูปแบบ XML (eXtensible Markup Language) เช่น ข้อความ SOAP, ฟีด RSS, ไฟล์กำหนดค่า ให้เป็นออบเจกต์ JSON (JavaScript Object Notation) XML เป็นรูปแบบข้อมูลดั้งเดิมของระบบองค์กร, SOAP Web Service, ไฟล์กำหนดค่า, เอกสาร Office ส่วน JSON เป็นมาตรฐานจริงของ Web API สมัยใหม่, JavaScript, ฐานข้อมูล NoSQL ทั้งสองรูปแบบมีข้อดีแตกต่างกัน: XML มีการอธิบายตนเองที่เข้มงวด รองรับ namespace และการตรวจสอบ schema อย่างกว้างขวาง ส่วน JSON กระชับ แยกวิเคราะห์ง่าย เข้ากับ JavaScript ได้โดยธรรมชาติ ในการพัฒนามักจำเป็นต้องแปลงข้อความ XML เป็น JSON เพื่อให้ frontend หรือไมโครเซอร์วิสสมัยใหม่ใช้งานได้ เครื่องมือนี้สร้างขึ้นเพื่อทำให้กระบวนการนี้เป็นอัตโนมัติ

หัวใจหลักของเครื่องมือนี้คือการใช้ DOMParser เนทีฟของเบราว์เซอร์ในการแยกวิเคราะห์ XML แล้วท่อง DOM tree โดยอัตโนมัติเพื่อสร้างออบเจกต์ JSON DOMParser เป็น XML parser ที่มีในตัวเบราว์เซอร์ ปฏิบัติตามมาตรฐาน W3C DOM รองรับคุณสมบัติ XML 1.0 ทั้งหมด เช่น XML namespace, CDATA, คอมเมนต์, แอตทริบิวต์ ข้อได้เปรียบของการแยกวิเคราะห์บน DOM คือไม่ต้องพึ่งพาไลบรารีภายนอก มีประสิทธิภาพดี และสอดคล้องตามมาตรฐาน

กฎการแมปการแปลงนั้นเข้าใจง่ายมาก: แต่ละองค์ประกอบ XML จะถูกแปลงเป็นออบเจกต์ JSON แอตทริบิวต์ขององค์ประกอบจะถูกแปลงเป็นฟิลด์ของออบเจกต์โดยตรง (ไม่ใช้คำนำหน้า @ เพื่อหลีกเลี่ยงข้อกำหนดการตั้งชื่อที่สับสนที่พบบ่อย) เนื้อหาข้อความขององค์ประกอบจะถูกเก็บในฟิลด์ value องค์ประกอบที่มีชื่อซ้ำกันจะถูกรวมเป็นอาร์เรย์อัตโนมัติ ตัวอย่างเช่น <bookstore><book id="1"><title>Great Gatsby</title></book><book id="2"><title>Brief History</title></book></bookstore> จะถูกแปลงเป็น {bookstore: {book: [{id: "1", title: {value: "Great Gatsby"}}, {id: "2", title: {value: "Brief History"}}]}}

การแมปแอตทริบิวต์แบบตรงโดยไม่มีคำนำหน้าเป็นทางเลือกในการออกแบบที่สำคัญของเครื่องมือนี้ เครื่องมือแปลง XML จำนวนมากจะใช้คำนำหน้าพิเศษเช่น @attribute, #text เพื่อแยกแยะแอตทริบิวต์และข้อความ ซึ่งแม้จะถูกต้องแต่สร้างโครงสร้าง JSON ที่ค่อนข้างแปลกและยากต่อการใช้งานโดยตรงใน JavaScript การแมปแอตทริบิวต์โดยตรงของเครื่องมือนี้ทำให้ JSON ที่ได้มีโครงสร้างใกล้เคียงกับโมเดลข้อมูลทางธุรกิจจริงมากขึ้น นักพัฒนาสามารถกำหนดประเภทที่สอดคล้องกันใน TypeScript interface ได้โดยตรง

การรวมองค์ประกอบที่ซ้ำกันเป็นอาร์เรย์เป็นการออกแบบที่สำคัญอีกประการของการแปลง XML เป็น JSON XML ไม่มีแนวคิดเรื่องอาร์เรย์โดยธรรมชาติ จำเป็นต้องใช้องค์ประกอบที่ซ้ำกัน (เช่น <item> หลายรายการ) เพื่อแสดงข้อมูลประเภทรายการ เครื่องมือนี้ตรวจจับแท็กที่มีชื่อซ้ำกันภายใต้องค์ประกอบแม่เดียวกันโดยอัตโนมัติแล้วรวมเป็นอาร์เรย์ สอดคล้องกับความหมายของรายการใน JSON หลีกเลี่ยงการสูญเสียข้อมูลหรือการต้องรวมด้วยตนเอง

เอาต์พุตสองรูปแบบ (JSON + YAML) เป็นการออกแบบที่สร้างความแตกต่างของเครื่องมือนี้ YAML เป็นรูปแบบซีเรียไลซ์ข้อมูลยอดนิยมอีกรูปแบบหนึ่ง ใช้กันอย่างแพร่หลายในสถานการณ์กำหนดค่าเช่น Kubernetes, Docker Compose, Ansible, GitHub Actions เครื่องมือมีตัวแปลง YAML อย่างง่ายในตัว รองรับการย่อหน้า 2 ช่องว่างมาตรฐาน นำหน้ารายการด้วย - และคั่นคู่คีย์-ค่าด้วย : คลิกปุ่มสลับ JSON/YAML เพื่อสลับระหว่างสองรูปแบบแบบเรียลไทม์

การซ่อมแซมข้อผิดพลาด XML อัตโนมัติ (tryFixXML) ช่วยเพิ่มความทนทานต่อข้อผิดพลาดของเครื่องมือ ในความเป็นจริง XML ที่ผู้ใช้ป้อนมักขาด XML declaration (<?xml version="1.0"?>) หรือแท็กปิดในตัว (เช่น <br>, <img>) ใช้รูปแบบ HTML คือ <br> แทนที่จะเป็นรูปแบบ XML คือ <br /> เครื่องมือจะเพิ่ม XML declaration และเติม / ให้กับแท็กปิดในตัวโดยอัตโนมัติ ทำให้ XML ที่ไม่ถูกต้องจำนวนมากสามารถแยกวิเคราะห์ได้อย่างถูกต้องโดย DOMParser

การจัดรูปแบบและบีบอัด XML (formatXML/compressXML) ใช้ไลบรารี xml-formatter เป็นฐาน โหมด prettyPrint จะแสดงผล XML ที่อ่านได้ง่ายด้วยการย่อหน้า 2 ช่องว่างและขึ้นบรรทัดใหม่ ส่วนโหมดบีบอัดจะแสดงผล XML แบบกะทัดรัดบรรทัดเดียวไม่มีช่องว่าง เหมาะสำหรับการส่งผ่านเครือข่าย นักพัฒนาสามารถใช้เครื่องมือบีบอัด XML โดยตรงแล้วจัดเก็บในฐานข้อมูล ช่วยประหยัดพื้นที่จัดเก็บ 30-50%

การแปลงอัตโนมัติแบบเรียลไทม์เป็นฟีเจอร์ที่ใช้งานได้จริงของเครื่องมือ แปลงอัตโนมัติหลังป้อน XML 500 มิลลิวินาที (debounce) เมื่อใช้ร่วมกับ 6 แป้นลัดคีย์บอร์ด (macOS ⇧⌘+F/C/T/O/D/K) ผู้ใช้สามารถดำเนินการที่ใช้บ่อย เช่น จัดรูปแบบ บีบอัด แปลง อัปโหลด ดาวน์โหลด ล้างข้อมูลได้อย่างรวดเร็วโดยไม่ต้องใช้เมาส์

การประมวลผลในเบราว์เซอร์ล้วนเป็นสถาปัตยกรรมหลักของเครื่องมือนี้ การแยกวิเคราะห์ XML การท่อง DOM tree การซีเรียไลซ์ JSON การแปลง YAML ทั้งหมดทำใน JavaScript ของเบราว์เซอร์ DOMParser ให้บริการโดยเบราว์เซอร์แบบเนทีฟ (ไม่ต้องแพ็กไลบรารี XML parser) ส่วน xml-formatter เป็นแพ็กเกจ npm น้ำหนักเบา (ไม่ถึง 30KB) ข้อมูล XML ดิบจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ ข้อความ SOAP ที่ละเอียดอ่อน (เช่น ที่มีข้อมูลคำสั่งซื้อ ข้อมูลผู้ใช้) สามารถประมวลผลได้อย่างปลอดภัยบนเครื่อง

กรณีการใช้งาน

เมื่อต้องเชื่อมต่อกับ API องค์กรเดิมที่ส่งคืนเฉพาะการตอบกลับ XML เช่น เกตเวย์การชำระเงิน, ERP, CRM ให้แปลงข้อความ XML เป็น JSON อย่างรวดเร็วเพื่อใช้กับ frontend สมัยใหม่หรือ backend Node.js
แยกวิเคราะห์ฟีด RSS / Atom เป็น JSON เพื่อแสดงบน frontend เว็บ รวมเข้ากับโปรแกรมอ่านฟีดแบบรวมศูนย์ หรือนำเข้าฐานข้อมูล
อ่านไฟล์กำหนดค่า XML ของแอปพลิเคชัน Java เช่น Spring, Tomcat, Apache (web.xml, applicationContext.xml) แล้วแปลงเป็น JSON เพื่อคิวรีด้วย jq หรือนำเข้าเครื่องมืออื่น
แปลงการตอบกลับ XML ของโปรโตคอล SOAP 1.1/1.2 เป็น JSON แล้วใช้ร่วมกับไลบรารีของ Node.js เช่น jsonwebtoken, lodash สำหรับการประมวลผลต่อไป
แยกวิเคราะห์สคริปต์บิลด์เช่น pom.xml ของ Maven, build.xml ของ Ant เป็น JSON ใช้สำหรับแสดงภาพเมตาดาต้าโปรเจกต์ วิเคราะห์ดีเพนเดนซี ฯลฯ
แปลง RSS feed, Sitemap XML, ฟีด Atom เป็นรูปแบบ JSON แล้วจัดเก็บในฐานข้อมูลสมัยใหม่เช่น Elasticsearch, MongoDB
เมื่อต้องเชื่อมต่อกับรูปแบบข้อมูลมาตรฐานอุตสาหกรรมที่อิงกับ XML ในอุตสาหกรรมการแพทย์และการเงิน เช่น HL7, ISO 20022 ให้แปลงข้อความ XML เป็น JSON เพื่อให้ไมโครเซอร์วิสสมัยใหม่ประมวลผลได้
แปลงไฟล์ XML ที่เกี่ยวข้องกับ SEO เช่น Google Merchant Center, Sitemap.org (sitemap.xml, robots.xml) เป็น JSON เพื่อใช้กับโปรแกรมรวบรวมข้อมูลหรือเครื่องมือวิเคราะห์

วิธีการใช้งาน

วางเนื้อหา XML ลงในช่องป้อนข้อมูลด้านซ้าย หรือคลิกปุ่ม "อัปโหลด" เพื่อเลือกไฟล์ .xml/.txt หรือคลิก "ตัวอย่าง" เพื่อโหลดตัวอย่าง bookstore ที่มีในตัว
เครื่องมือจะแปลงโดยอัตโนมัติ (debounce 500 มิลลิวินาทีหลังป้อนข้อมูล) ตรวจสอบ JSON หรือ YAML ที่แปลงแล้วทางด้านขวา CodeMirror จะไฮไลต์ไวยากรณ์เพื่อให้อ่านง่าย
คลิกปุ่ม JSON / YAML บนแถบเครื่องมือด้านขวาเพื่อสลับรูปแบบเอาต์พุตแบบเรียลไทม์ นอกจากนี้ยังสามารถใช้ปุ่ม "จัดรูปแบบ" (⇧⌘+F) หรือ "บีบอัด" (⇧⌘+C) เพื่อปรับรูปแบบของ XML อินพุต
คลิก "คัดลอก" เพื่อคัดลอก JSON/YAML ไปยังคลิปบอร์ด หรือคลิก "ดาวน์โหลด" เพื่อบันทึกเป็นไฟล์นามสกุลที่เกี่ยวข้อง (output.json / output.yaml / output.xml)
หากต้องการซ่อมแซมข้อผิดพลาดไวยากรณ์ XML ให้คลิกปุ่ม "ซ่อมแซม" ที่อยู่ถัดจากข้อความแสดงข้อผิดพลาด (หรือในเมนูแบบเลื่อนลงข้าง "ตัวอย่าง" บนแถบเครื่องมือ) เครื่องมือจะเรียก tryFixXML เพื่อเพิ่ม XML declaration และเติมแท็กปิดในตัวโดยอัตโนมัติ
วาง JSON ลงในโค้ดเป้าหมาย (เช่น นิยาม TypeScript interface, ประเภทการตอบกลับ API ฯลฯ) หรือนำเข้าไปยังบริการ backend เพื่อประมวลผลต่อไป

คุณสมบัติ

การแยกวิเคราะห์ DOM tree อัจฉริยะ: ใช้ DOMParser เนทีฟของเบราว์เซอร์แยกวิเคราะห์ XML แล้วท่องโหนดทรีเพื่อสร้างออบเจกต์ JSON มาตรฐานโดยอัตโนมัติ ไม่ต้องพึ่งพาไลบรารีภายนอก
แมปแอตทริบิวต์โดยตรง: แอตทริบิวต์ของ XML (เช่น id="1", category="fiction") จะถูกแปลงเป็นฟิลด์ธรรมดาของออบเจกต์ JSON โดยตรง ไม่ต้องใช้คำนำหน้า @
รวมองค์ประกอบที่ซ้ำเป็นอาร์เรย์: องค์ประกอบ XML ที่มีชื่อซ้ำกันจะถูกรวมเป็นอาร์เรย์ JSON อัตโนมัติ ({book: [{...}, {...}]}) สอดคล้องกับข้อกำหนดโครงสร้างข้อมูลที่พบบ่อย
แยกโหนดข้อความ: เนื้อหาข้อความขององค์ประกอบจะถูกเก็บในฟิลด์ value โดยอัตโนมัติ เก็บไว้เคียงข้างกับแอตทริบิวต์และองค์ประกอบย่อย
เอาต์พุตสองรูปแบบ: สลับระหว่าง JSON (ย่อหน้า prettyPrint 2 ช่องว่าง) และ YAML (ย่อหน้า 2 ช่องว่าง นำหน้ารายการด้วย -) ได้ด้วยคลิกเดียว ปรับให้เข้ากับสถานการณ์การใช้งานต่างๆ
ซ่อมแซมข้อผิดพลาด XML อัตโนมัติ: มีฟังก์ชันซ่อมแซม tryFixXML ในตัว เพิ่ม XML declaration ที่ขาดหายไปอัตโนมัติ และเติม / ให้กับแท็กปิดในตัวเช่น br/hr/img
จัดรูปแบบและบีบอัด XML: ใช้ไลบรารี xml-formatter รองรับเอาต์พุตสวยงามด้วย prettyPrint และเอาต์พุตบีบอัดด้วย minify (ย่อหน้า 2 ช่องว่างหรือไม่มีช่องว่าง)
แปลงอัตโนมัติแบบเรียลไทม์: แปลงอัตโนมัติหลังป้อน XML 500 มิลลิวินาที (debounce) ไม่ต้องคลิกด้วยตนเอง เอาต์พุตอัปเดตแบบเรียลไทม์
ไฮไลต์ไวยากรณ์ทั้ง JSON/XML: ด้านซ้ายใช้ CodeMirror ไฮไลต์ไวยากรณ์ XML ด้านขวาสลับไฮไลต์ JSON หรือ YAML ตามรูปแบบ
ระบบแป้นลัดที่ครบถ้วน: 6 แป้นลัดที่ใช้บ่อย (จัดรูปแบบ/บีบอัด/แปลง/อัปโหลด/ดาวน์โหลด/ล้าง) รองรับทั้ง macOS และ Windows/Linux
คัดลอกและดาวน์โหลด: คัดลอกไปยังคลิปบอร์ดด้วยคลิกเดียว หรือดาวน์โหลดเป็นไฟล์ output.json/output.yaml/output.xml มาตรฐาน (เลือกนามสกุลอัตโนมัติตามรูปแบบปัจจุบัน)
ประมวลผลในเบราว์เซอร์ล้วน: การแยกวิเคราะห์ XML การท่อง DOM tree การซีเรียไลซ์ JSON ทั้งหมดทำใน JavaScript ของเบราว์เซอร์ ข้อมูลดิบไม่ได้อัปโหลดขึ้นไป DOMParser ให้บริการโดยเบราว์เซอร์แบบเนทีฟ

คำถามที่พบบ่อย

จะแปลง XML เป็นรูปแบบ JSON ได้อย่างไร?

วางเนื้อหา XML ลงในช่องป้อนข้อมูลด้านซ้าย เครื่องมือจะใช้ DOMParser เนทีฟของเบราว์เซอร์ในการแยกวิเคราะห์ XML แล้วแปลง DOM tree เป็นออบเจกต์ JSON มาตรฐานโดยอัตโนมัติ โหนดรากจะถูกห่อด้วย { [tagName]: {...} } แอตทริบิวต์จะถูกแมปเป็นฟิลด์ธรรมดา (ไม่มีคำนำหน้า @) เนื้อหาข้อความขององค์ประกอบจะถูกเก็บในฟิลด์ value องค์ประกอบที่มีชื่อซ้ำกันจะถูกรวมเป็นอาร์เรย์อัตโนมัติ แปลงอัตโนมัติหลังจาก 500 มิลลิวินาที ไม่ต้องคลิกด้วยตนเอง

แอตทริบิวต์และโหนดข้อความใน XML จะถูกแปลงอย่างไร?

เครื่องมือนี้ใช้รูปแบบการแมปที่เข้าใจง่าย: แอตทริบิวต์ของ XML จะถูกแมปเป็นฟิลด์ธรรมดาของออบเจกต์ JSON โดยตรง (เช่น <book id="1"> จะกลายเป็น {id: "1", ...}) โดยไม่ใช้คำนำหน้า @ เนื้อหาข้อความขององค์ประกอบจะถูกเก็บในฟิลด์ value (เช่น <title>Great Gatsby</title> กลายเป็น {value: "Great Gatsby"}) เมื่อมีทั้งแอตทริบิวต์และข้อความ ทั้งสองจะอยู่เคียงข้างกันในออบเจกต์เดียวกัน

องค์ประกอบ XML ที่มีชื่อซ้ำกันหลายรายการจะกลายเป็นอาร์เรย์ JSON อัตโนมัติหรือไม่?

ใช่ เครื่องมือจะตรวจจับแท็กองค์ประกอบที่ซ้ำกันภายใต้องค์ประกอบแม่เดียวกันโดยอัตโนมัติ (เช่น <book> 3 รายการภายใต้ <bookstore>) แล้วรวมเป็นอาร์เรย์ JSON ตัวอย่างเช่น <bookstore><book>...</book><book>...</book></bookstore> จะกลายเป็น {bookstore: {book: [{...}, {...}]}} ข้อกำหนดนี้สอดคล้องกับโครงสร้างข้อมูลที่พบบ่อยที่สุดในการประมวลผล XML

โหนดข้อความบริสุทธิ์จะถูกประมวลผลอย่างไร?

เมื่อองค์ประกอบ XML ไม่มีแอตทริบิวต์แต่มีเฉพาะเนื้อหาข้อความ เครื่องมือจะส่งคืนสตริงข้อความโดยตรง (เช่น <name>Alice</name> กลายเป็น "Alice") เมื่อองค์ประกอบมีทั้งแอตทริบิวต์และข้อความ แอตทริบิวต์และข้อความจะอยู่เคียงข้างกันในออบเจกต์เดียวกัน ({attr: "...", value: "..."}) เมื่อองค์ประกอบมีองค์ประกอบย่อย องค์ประกอบย่อยจะเป็นฟิลด์ของออบเจกต์ ส่วนเนื้อหาข้อความจะถูกรวมเป็นฟิลด์ value

สามารถแปลง XML ที่มีรูปแบบไม่ถูกต้อง (เช่น แท็กปิดไม่ครบ) ได้หรือไม่?

ได้ เครื่องมือมีฟังก์ชันซ่อมแซม tryFixXML ในตัว จะเพิ่ม XML declaration (<?xml version="1.0" encoding="UTF-8"?>) ที่ขาดหายไปโดยอัตโนมัติ และเติม / ให้กับแท็กปิดในตัวที่พบบ่อย เช่น br, hr, img เป็นต้น การออกแบบนี้ช่วยเพิ่มความเข้ากันได้กับระบบเดิมและอินเทอร์เฟซของบุคคลที่สามที่ไม่ได้มาตรฐานอย่างมาก

รองรับไฟล์ XML ประเภทใดบ้าง?

รองรับไฟล์ .xml และ .txt (เข้ารหัส UTF-8) คลิกปุ่ม "อัปโหลด" เพื่อเลือกไฟล์ในเครื่อง เครื่องมือจะอ่านผ่าน FileReader API เนทีฟของเบราว์เซอร์ โดยไม่อัปโหลดไปยังเซิร์ฟเวอร์ หลังจากอัปโหลดสำเร็จ เนื้อหาจะถูกเติมลงในช่องป้อนข้อมูลโดยอัตโนมัติและเริ่มการแปลงทันที

สามารถเอาต์พุตทั้ง JSON และ YAML พร้อมกันได้หรือไม่?

ได้ เครื่องมือรองรับเอาต์พุตสองรูปแบบคือ JSON และ YAML คลิกปุ่มสลับ JSON/YAML บนแถบเครื่องมือด้านขวาเพื่อสลับรูปแบบเอาต์พุตแบบเรียลไทม์ รูปแบบ JSON มาพร้อม prettyPrint 2 ช่องว่าง รูปแบบ YAML ใช้การย่อหน้า 2 ช่องว่างมาตรฐาน นำหน้ารายการด้วย - และคั่นคู่คีย์-ค่าด้วย : สามารถใช้ได้โดยตรงในสถานการณ์การกำหนดค่า เช่น Kubernetes, Docker Compose, Ansible เป็นต้น

ชื่อไฟล์ที่ดาวน์โหลดคืออะไร?

เลือกนามสกุลไฟล์โดยอัตโนมัติตามรูปแบบเอาต์พุตปัจจุบัน: เมื่อเลือกรูปแบบ JSON จะดาวน์โหลด output.json เมื่อเลือกรูปแบบ YAML จะดาวน์โหลด output.yaml เมื่อป้อนข้อมูลแต่ยังไม่ได้แปลงจะดาวน์โหลด output.xml (คงรูปแบบเดิม) ไฟล์ทั้งหมดเข้ารหัส UTF-8 สามารถอ่านได้โดย parser ของรูปแบบนั้นๆ โดยตรง

มีแป้นลัดคีย์บอร์ดอะไรบ้าง?

เครื่องมือรองรับแป้นลัดดังนี้: ผู้ใช้ macOS ใช้ ⇧⌘+F จัดรูปแบบ, ⇧⌘+C บีบอัด, ⇧⌘+T แปลง, ⇧⌘+O อัปโหลด, ⇧⌘+D ดาวน์โหลด, ⇧⌘+K ล้างข้อมูล ส่วนผู้ใช้ Windows/Linux ใช้ Ctrl แทน ⌘ มีทั้งหมด 6 แป้นลัดครอบคลุมเวิร์กโฟลว์ที่สมบูรณ์

รองรับ XML namespace (เนมสเปซ) หรือไม่?

เครื่องมือนี้แยกวิเคราะห์ XML ด้วย DOMParser ซึ่งรองรับ XML namespace (xmlns) แบบเนทีฟ คำนำหน้า namespace จะถูกเก็บไว้ใน JSON ในฐานะส่วนหนึ่งของชื่อองค์ประกอบ ตัวอย่างเช่น <svg:circle> จะกลายเป็น {svg:circle: {...}} หากต้องการเข้าถึงองค์ประกอบข้าม namespace จำเป็นต้องระบุผ่านคำนำหน้า namespace ในฝั่งการแยกวิเคราะห์ JSON

รองรับ CDATA section หรือไม่?

รองรับ เนื้อหาภายใน CDATA section (<![CDATA[...]]>) จะถูก DOMParser รวมเข้ากับ textContent ขององค์ประกอบโดยอัตโนมัติ เครื่องมือจะแยกเนื้อหานั้นไปไว้ในฟิลด์ value ของ JSON เช่นเดียวกับโหนดข้อความทั่วไป อย่างไรก็ตาม เนื่องจาก CDATA เป็นประเภทโหนด XML ไม่ใช่สตริง CDATA เดิมและข้อความทั่วไปจึงไม่สามารถแยกแยะได้ในเอาต์พุต JSON

รองรับขนาดไฟล์อินพุตเท่าใด?

โดยทฤษฎีไม่มีขีดจำกัดที่เข้มงวด จำกัดตามหน่วยความจำของเบราว์เซอร์ โดยทั่วไป XML ขนาด 1-2 MB สามารถประมวลผลได้อย่างลื่นไหล ไฟล์ที่ใหญ่กว่าอาจทำงานช้าลงเนื่องจาก DOMParser ใช้หน่วยความจำค่อนข้างมาก หากประมวลผลข้อความ SOAP ขนาดใหญ่หรือ RSS feed แล้วพบอาการหน่วง แนะนำให้ย่อหรือแยกไฟล์ในโปรแกรมแก้ไข XML บนเครื่องก่อน

การแก้ไขปัญหา

การแยกวิเคราะห์ JSON แจ้งข้อผิดพลาด 'unclosed token'?

สาเหตุมักเกิดจาก XML แท็กปิดไม่ครบ เครื่องหมายคำพูดของแอตทริบิวต์ไม่จับคู่ หรืออักขระพิเศษไม่ได้ถูก escape คลิกปุ่ม "ซ่อมแซม" ถัดจากข้อความแสดงข้อผิดพลาดเพื่อเรียก tryFixXML เพิ่ม XML declaration และเติมแท็กปิดในตัวโดยอัตโนมัติ หากยังไม่สามารถแยกวิเคราะห์ได้ ให้ตรวจสอบโครงสร้าง XML ด้วยตนเองหรือดูผลการแยกวิเคราะห์ด้วย document.documentElement.outerHTML ในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์

ลำดับของแอตทริบิวต์ใน JSON ไม่ตรงกับใน XML?

มาตรฐาน JSON ไม่รับประกันลำดับของแอตทริบิวต์ เครื่องมือจะแมปตามลำดับซอร์สโค้ดของแอตทริบิวต์องค์ประกอบ หากธุรกิจมีความอ่อนไหวต่อลำดับ แนะนำให้ใช้ toPairs ของ Lodash หรือเครื่องมือที่คล้ายกันสร้างใหม่เป็นอาร์เรย์แบบมีลำดับใน JSON ที่แยกวิเคราะห์แล้ว อย่างไรก็ตาม เอนจิน JavaScript ส่วนใหญ่ (V8, SpiderMonkey) จะเก็บคีย์สตริงตามลำดับการแทรก

องค์ประกอบชื่อเดียวกันเมื่อมีเพียงหนึ่งรายการจะไม่กลายเป็นอาร์เรย์ ต้องจัดการอย่างไร?

ปัจจุบันเครื่องมือจะแปลงเป็นอาร์เรย์เฉพาะเมื่อตรวจพบองค์ประกอบที่มีชื่อซ้ำกันเท่านั้น หากมีองค์ประกอบชื่อเดียวกันเพียงหนึ่งรายการ เครื่องมือจะเก็บไว้เป็นออบเจกต์เดี่ยว หากคุณต้องการบังคับให้เป็นอาร์เรย์ (แม้จะมีเพียง 1 องค์ประกอบ) สามารถแปลงก่อนแล้วใช้ castArray ของ lodash ห่อได้: [result].flat() หรือใช้ JSON Schema ตรวจสอบเพื่อบังคับอาร์เรย์

จะรักษาอักขระพิเศษ (เช่น <, &) ในแอตทริบิวต์ XML ได้อย่างไร?

DOMParser จะ unescape ค่าแอตทริบิวต์โดยอัตโนมัติ เครื่องมือจะเก็บเนื้อหาหลัง unescape ไว้ หากใน XML ดิบเขียนว่า < หลังแปลงค่าใน JSON จะเป็น < นี่เป็นพฤติกรรมมาตรฐานของ XML สอดคล้องกับความคาดหวังของผู้ใช้ หากต้องการเก็บรูปแบบ escape ดั้งเดิม สามารถใช้ไลบรารี xml-formatter หรือ XML tokenizer ที่พัฒนาเองแทน DOMParser

เหตุใดเอาต์พุต YAML จึงไม่มีข้อมูลชนิด?

รูปแบบ YAML รองรับชนิดข้อมูลได้เอง (เช่น 12 เป็น number, true เป็น boolean, null เป็น null) แต่ตัวแปลง YAML อย่างง่ายของเครื่องมือนี้จะซีเรียไลซ์ค่าทั้งหมดเป็นสตริง หากต้องการรักษาชนิดข้อมูล สามารถใช้ไลบรารี YAML ที่เต็มที่เช่น js-yaml หรือบังคับชนิดข้อมูลหลังจากตรวจสอบด้วย JSON Schema ในฝั่งการแยกวิเคราะห์

จะจัดการอินพุตที่มี XML processing instruction (PI) อย่างไร?

โดยค่าเริ่มต้น DOMParser จะเก็บ XML processing instruction (เช่น <?xml-stylesheet ...?>) เป็นโหนด ProcessingInstruction ของ document.firstChild เครื่องมือนี้ในปัจจุบันจะท่องเฉพาะโหนด Element เท่านั้น processing instruction จะถูกละเลย หากต้องการเก็บไว้ สามารถแยก document.firstChild.nodeValue ด้วยตนเองก่อนใช้งาน

ไฟล์ .json ที่ดาวน์โหลดควรเปิดด้วยอะไร?

ไฟล์ที่ดาวน์โหลด output.json เป็นไฟล์ JSON มาตรฐานเข้ารหัส UTF-8 สามารถเปิดได้ด้วยโปรแกรมแก้ไขข้อความใดๆ (VS Code, Sublime, Notepad++) หรือเครื่องมือ JSON เฉพาะทาง (jq, JSDoc) สามารถลากและวางลงในเบราว์เซอร์เพื่อดูโครงสร้างที่จัดรูปแบบแล้วได้ ภาษาโปรแกรมเกือบทั้งหมด เช่น JavaScript, Python, Node.js, Java, Go มี JSON parser ในตัว

อภิธานศัพท์

XML (eXtensible Markup Language): ภาษามาร์กอัปแบบขยายได้ กำหนดโดย W3C ในปี 1998 ใช้แท็กวงเล็บเหลี่ยมเพื่ออธิบายโครงสร้างและเนื้อหาข้อมูล รองรับเนมสเปซ การตรวจสอบ Schema การแปลง XSLT เป็นรูปแบบมาตรฐานของ SOAP Web Service, Office Open XML, RSS, Atom ฯลฯ
JSON (JavaScript Object Notation): รูปแบบแลกเปลี่ยนข้อมูลน้ำหนักเบา อิงตามไวยากรณ์ออบเจกต์ JavaScript แต่เป็นอิสระจากภาษาโปรแกรม รองรับ 6 ประเภทพื้นฐาน: ออบเจกต์ ({}), อาร์เรย์ ([]), สตริง, ตัวเลข, บูลีน, null เป็นมาตรฐานจริงของ Web API สมัยใหม่ ฐานข้อมูล NoSQL และระบบนิเวศ JavaScript
DOMParser: API เนทีฟของเบราว์เซอร์ (มาตรฐาน W3C DOM) ใช้แยกวิเคราะห์สตริง XML หรือ HTML เป็น DOM tree เบราว์เซอร์สมัยใหม่ทั้งหมด (Chrome, Firefox, Safari, Edge) มีในตัว ไม่ต้องนำเข้าไลบรารีของบุคคลที่สาม สามารถท่อง ค้นหา แก้ไขเนื้อหา XML ได้อย่างสะดวกผ่าน DOM tree
xml-formatter: ไลบรารี JavaScript น้ำหนักเบา (ไม่ถึง 30KB) ใช้สำหรับจัดรูปแบบ (prettyPrint) และบีบอัด (minify) เอกสาร XML รองรับตัวเลือกต่างๆ เช่น การย่อหน้าแบบกำหนดเอง อักขระขึ้นบรรทัดใหม่ collapseContent ฯลฯ เครื่องมือนี้ใช้มันเพื่อให้บริการฟีเจอร์จัดรูปแบบและบีบอัด XML
การแมปแอตทริบิวต์ (attribute mapping): วิธีการแมปที่แอตทริบิวต์ขององค์ประกอบ XML เป็นฟิลด์ของออบเจกต์ JSON เครื่องมือนี้ใช้รูปแบบแมปโดยตรง: <book id="1"> กลายเป็น {id: "1"} ไม่ใช้คำนำหน้า @ สร้างโครงสร้าง JSON ที่สะอาดขึ้น ทำให้นิยาม TypeScript interface ง่ายขึ้น
การรวมองค์ประกอบที่ซ้ำเป็นอาร์เรย์: องค์ประกอบ XML ที่มีชื่อซ้ำกัน (เช่น <item> หลายรายการ) จะถูกรวมเป็นอาร์เรย์ JSON โดยอัตโนมัติ นี่เป็นการตัดสินใจในการออกแบบที่สำคัญของการแปลง XML เป็น JSON สอดคล้องกับความหมายของรายการใน JSON หลีกเลี่ยงการสูญเสียข้อมูล
ฟิลด์ value: ชื่อฟิลด์ที่เครื่องมือนี้กำหนดสำหรับเนื้อหาข้อความขององค์ประกอบ XML องค์ประกอบ <title>Great Gatsby</title> จะกลายเป็น {value: "Great Gatsby"} หากองค์ประกอบมีทั้งแอตทริบิวต์และข้อความ แอตทริบิวต์และ value จะอยู่เคียงข้างกันในออบเจกต์เดียวกัน
YAML (YAML Ain't Markup Language): รูปแบบซีเรียไลซ์ข้อมูลที่เป็นมิตรกับมนุษย์ ใช้กันอย่างแพร่หลายในไฟล์กำหนดค่าเช่น Kubernetes, Docker Compose, Ansible, GitHub Actions เครื่องมือนี้รองรับเอาต์พุต YAML อย่างง่าย ย่อหน้า 2 ช่องว่าง นำหน้ารายการด้วย - คั่นคู่คีย์-ค่าด้วย :
SOAP (Simple Object Access Protocol): โปรโตคอลการสื่อสาร web service ที่อิงกับ XML ข้อความ SOAP จะถูกห่อด้วย SOAP envelope (XML namespace) ภายในประกอบด้วย header และ body (XML payload) เครื่องมือนี้สามารถแยกวิเคราะห์ข้อความ SOAP เป็น JSON เพื่อให้บริการ JavaScript สมัยใหม่ใช้งาน
RSS / Atom feed: รูปแบบการสมัครรับเนื้อหาที่อิงกับ XML รูปแบบ RSS 2.0 จัดระเบียบเนื้อหาด้วยโครงสร้าง <rss><channel><item> ส่วน Atom ใช้โครงสร้าง <feed><entry> เครื่องมือนี้แปลง RSS/Atom เป็นอาร์เรย์ JSON เพื่อความสะดวกในการแสดงผลบน frontend หรือรวมเข้าฐานข้อมูล
XML namespace (เนมสเปซ): กลไกที่ใช้แอตทริบิวต์ xmlns เพื่อหลีกเลี่ยงความขัดแย้งของชื่อองค์ประกอบ มีรูปแบบเช่น xmlns:prefix="uri" DOMParser รองรับเนมสเปซแบบเนทีฟ คำนำหน้า namespace จะถูกเก็บไว้ใน JSON ในฐานะส่วนหนึ่งของชื่อองค์ประกอบ
CDATA section: ไวยากรณ์พิเศษใน XML <![CDATA[...]]> ใช้สำหรับฝังข้อความที่มีอักขระพิเศษ (เช่น <, >, &) ภายในองค์ประกอบโดยไม่ต้อง escape DOMParser จะรวมเนื้อหา CDATA เข้ากับ textContent ขององค์ประกอบ เครื่องมือจะประมวลผลเป็นข้อความทั่วไป
tryFixXML: ฟังก์ชันซ่อมแซม XML ในตัวของเครื่องมือนี้ จะเพิ่ม XML declaration (<?xml version="1.0" encoding="UTF-8"?>) ที่ขาดหายไปโดยอัตโนมัติ และเติม / ให้กับแท็กปิดในตัวที่พบบ่อยเช่น br, hr, img ใช้จัดการข้อมูลสกปรกจากระบบเดิมหรืออินเทอร์เฟซบุคคลที่สามที่ไม่ได้มาตรฐาน
prettyPrint: โหมดเอาต์พุตของไลบรารี xml-formatter เมื่อเปิดใช้งาน XML ที่สร้างขึ้นจะมีการย่อหน้าและขึ้นบรรทัดใหม่อัตโนมัติ (เช่น ย่อหน้า 2 ช่องว่าง) อ่านง่าย เมื่อปิดใช้งานจะแสดงผลแบบกะทัดรัดไม่มีช่องว่าง (minify)

กฎการแมปองค์ประกอบ XML เป็นฟิลด์ JSON

กฎการแมปการแปลงของเครื่องมือนี้ซึ่งอาศัยการแยกวิเคราะห์ด้วย DOMParser:

โครงสร้าง XML	ตัวอย่าง XML	เอาต์พุต JSON	กฎการแมป
`element with attrs`	`<book id="1" category="fiction"/>`	`{"id": "1", "category": "fiction"}`	แอตทริบิวต์แมปเป็นฟิลด์ออบเจกต์โดยตรง (ไม่มีคำนำหน้า @)
`element with text`	`<title>Great Gatsby</title>`	`{"value": "Great Gatsby"}`	เนื้อหาข้อความขององค์ประกอบเก็บในฟิลด์ value
`attrs + text`	`<price currency="USD">12.99</price>`	`{"currency": "USD", "value": "12.99"}`	แอตทริบิวต์และข้อความอยู่เคียงข้างกันในออบเจกต์เดียวกัน
`no attrs, no text`	`<book id="1"/>`	`{"id": "1"}`	มีเฉพาะแอตทริบิวต์ ไม่มีฟิลด์ value
`nested elements`	`<book><title>Gatsby</title></book>`	`{"title": {"value": "Gatsby"}}`	องค์ประกอบย่อยแปลงเป็นฟิลด์ออบเจกต์
`repeated elements`	`<books><book/><book/></books>`	`{"book": [{}, {}]}`	องค์ประกอบที่ชื่อซ้ำกันรวมเป็นอาร์เรย์อัตโนมัติ
`root element`	`<bookstore>...</bookstore>`	`{"bookstore": {...}}`	โหนดรากห่อด้วย { [tagName]: ... }
`namespace prefix`	`<svg:circle/>`	`{"svg:circle": {...}}`	DOMParser รองรับเนมสเปซแบบเนทีฟ

เปรียบเทียบรูปแบบเอาต์พุต JSON กับ YAML

ลักษณะและสถานการณ์ที่เหมาะสมของสองรูปแบบเอาต์พุตที่เครื่องมือนี้รองรับ:

มิติ	JSON	YAML	คำอธิบาย
ไวยากรณ์	{ } : [ ] กระชับ	ย่อหน้า + - รายการ	JSON กระชับกว่า YAML อ่านง่ายกว่า
ชนิดข้อมูล	number/bool/null เนทีฟ	number/bool/null เนทีฟ	ทั้งสองรักษาชนิดข้อมูล
การย่อหน้า	ย่อหน้า 2 ช่องว่าง	ย่อหน้า 2 ช่องว่าง	เครื่องมือนี้ใช้ 2 ช่องว่างเป็นมาตรฐาน
อาร์เรย์	[1, 2, 3]	- 1\n- 2\n- 3	JSON ใช้วงเล็บเหลี่ยม YAML ใช้ขีดกลาง
คอมเมนต์	ไม่รองรับ (มาตรฐาน)	# คอมเมนต์	YAML รองรับคอมเมนต์
ความสามารถในการอ่าน	ปานกลาง (มีสัญลักษณ์วงเล็บรบกวน)	สูง (ใกล้เคียงภาษาธรรมชาติ)	YAML อ่านง่ายกว่า
สถานการณ์การใช้งาน	REST API, frontend-backend	K8s, Docker, CI/CD	เว็บใช้ JSON การกำหนดค่าใช้ YAML

เปรียบเทียบรูปแบบ XML กับ JSON

การเปรียบเทียบทั้งสองรูปแบบข้อมูลในมิติต่างๆ ช่วยให้เข้าใจว่าเมื่อใดควรเลือกใช้ XML หรือ JSON:

มิติ	XML	JSON	คำอธิบาย
ไวยากรณ์	< > </> ยืดยาว	{ } : [ ] กระชับ	ไวยากรณ์ JSON กระชับกว่า แท็ก XML ยาวกว่าแต่อ่านง่าย
ชนิดข้อมูล	เป็นสตริงทั้งหมด	number/bool/null เนทีฟ	JSON รักษาชนิดข้อมูล XML ต้องอาศัย schema ตรวจสอบชนิด
อาร์เรย์	องค์ประกอบซ้ำ <i>1</i><i>2</i>	[1,2,3] เนทีฟ	อาร์เรย์ JSON กระชับ อาร์เรย์ XML อาศัยข้อกำหนดการตั้งชื่อ
คอมเมนต์	<!-- คอมเมนต์ -->	ไม่รองรับ (มาตรฐาน)	XML รองรับคอมเมนต์ JSON มาตรฐานไม่รองรับ
เนมสเปซ	รองรับ xmlns	ไม่มี	XML ช่วยหลีกเลี่ยงความขัดแย้งของชื่อในเอกสารขนาดใหญ่
การตรวจสอบ Schema	XSD / DTD	JSON Schema	ทั้งสองมีกลไกการตรวจสอบ schema ที่เต็มที่
ประสิทธิภาพการแยกวิเคราะห์	ค่อนข้างช้า (มีค่าใช้จ่ายจากแท็ก)	เร็วกว่า (~3-5 เท่า)	การแยกวิเคราะห์ JSON ง่ายกว่า การแยกวิเคราะห์ XML ซับซ้อนกว่า
สถานการณ์การใช้งาน	SOAP, องค์กร, Office	REST API, frontend-backend	เว็บสมัยใหม่ใช้ JSON องค์กรดั้งเดิมใช้ XML

Privacy & Security

เครื่องมือแปลง XML เป็น JSON นี้ดำเนินการทั้งหมดภายในเบราว์เซอร์ของคุณโดยสมบูรณ์: การแยกวิเคราะห์ XML (อาศัย DOMParser เนทีฟของเบราว์เซอร์), การท่อง DOM tree, การซีเรียไลซ์ JSON, การแปลง YAML ทั้งหมดทำผ่าน JavaScript ของเบราว์เซอร์บนฝั่งไคลเอ็นต์ xml-formatter เป็นดีเพนเดนซีภายนอกเพียงอย่างเดียว (แพ็กเกจ npm ขนาดเล็กกว่า 30KB) ข้อมูล XML ดิบจะไม่ถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ การอัปโหลดไฟล์ใช้ FileReader API เนทีฟของเบราว์เซอร์อ่านโดยตรงลงในหน่วยความจำ โดยไม่ผ่านบริการกลางใดๆ ไม่ใช้ Cookie ติดตาม ไม่รวบรวมข้อมูลอินพุตหรือข้อมูลการใช้งานของผู้ใช้ หลังจากปิดหรือรีเฟรชหน้า เนื้อหาอินพุตและเอาต์พุตทั้งหมดจะถูกล้างออกจากหน่วยความจำโดยอัตโนมัติ เหมาะสำหรับประมวลผลข้อความ XML ที่มีข้อมูลธุรกิจละเอียดอ่อน (ข้อมูลคำสั่งซื้อ ข้อมูลรับรองผู้ใช้ การตอบกลับ API ขององค์กร)