JavaScript:
การวิเคราะห์ HTML

วิธีการ:

ลองแยกคำสั่ง HTML โดยใช้ API DOMParser ใน JavaScript

const parser = new DOMParser();
const htmlString = `<p>Hello, world!</p>`;
const doc = parser.parseFromString(htmlString, 'text/html');
console.log(doc.body.textContent); // ผลลัพธ์: Hello, world!

ตอนนี้, มาจับอะไรที่เฉพาะเจาะจงกว่านั้น, เช่น องค์ประกอบที่มีคลาส:

const htmlString = `<div><p class="greeting">Hello, again!</p></div>`;
const doc = parser.parseFromString(htmlString, 'text/html');
const greeting = doc.querySelector('.greeting').textContent;
console.log(greeting); // ผลลัพธ์: Hello, again!

ลงลึก

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

มีทางเลือกอื่นหรือไม่? แน่นอน เรามีไลบรารีเช่น jQuery และเครื่องมืออย่าง BeautifulSoup สำหรับ Python แต่ DOMParser ของ JavaScript เป็นตัวเดียวที่เร็วและในตัว, ไม่ต้องการไลบรารีเพิ่มเติม

ในด้านการประยุกต์ใช้งาน, เมื่อคุณแยกคำสั่ง HTML ด้วย DOMParser, มันสร้างวัตถุ Document นึกถึงมันเหมือนกับแบบจำลองเชิงลำดับของ HTML ของคุณ เมื่อคุณได้รับมัน, คุณสามารถนำทางและจัดการมันได้เหมือนกับ DOM ของหน้าเว็บปกติ

นี่คือสิ่งที่—การแยกคำสั่งสามารถพบกับ HTML ที่ไม่ถูกต้องได้ เบราว์เซอร์เป็นอะไรที่ใจกว้าง, แต่ DOMParser อาจไม่ใช่ เพราะฉะนั้น, สำหรับงานที่ซับซ้อนหรือ HTML ที่ไม่เรียบร้อย, ไลบรารีของบุคคลที่สามอาจทำงานทำความสะอาดได้ดียิ่งขึ้น

ดูเพิ่มเติม

• คู่มือ MDN Web Docs สำหรับ API DOMParser: MDN DOMParser
• ความสามารถในการแยกคำสั่งของ jQuery: jQuery.parseHTML()
• Cheerio, การประยุกต์ใช้ jQuery หลักที่รวดเร็ว, ยืดหยุ่น & กระชับสำหรับเซิร์ฟเวอร์: Cheerio.js
• สำหรับการแยกคำสั่งที่ไม่ใช่ JS: ไลบรารี BeautifulSoup ของ Python: Beautiful Soup