แปลงข้อความธรรมดาเป็น HTML: อะไรเปลี่ยนไป ทำไมสำคัญ และวิธีทำให้ถูกต้อง

อะไรเปลี่ยนไปจริงๆ เมื่อแปลงข้อความเป็น HTML

ข้อความธรรมดาและ HTML ดูคล้ายกัน แต่เบราว์เซอร์ตีความต่างกันมาก การแปลงที่ถูกต้องมีการเปลี่ยนแปลง 5 อย่าง:

• & กลายเป็น & — แอมเปอร์แซนด์เริ่มต้น HTML entity ทุกตัว ต้องเอสเคปก่อน
• < กลายเป็น < — ถ้าไม่มีสิ่งนี้ วงเล็บมุมใดๆ ในข้อความจะเริ่มแท็ก HTML
• > กลายเป็น > — เหตุผลเดียวกัน ปิดการตีความแท็ก
• บรรทัดใหม่กลายเป็นแท็ก <br> หรือครอบด้วยองค์ประกอบ <p> — บรรทัดใหม่ดิบมองไม่เห็นใน HTML
• URL ธรรมดากลายเป็นลิงก์ <a href="..."> — ทางเลือกแต่มักเป็นประโยชน์เสมอ

การเข้ารหัส HTML Entity: ทำไมมันสำคัญ

นี่ไม่ใช่แค่เรื่องของผลลัพธ์ที่สะอาด แต่เป็นปัญหาด้านความปลอดภัย

สมมติว่าผู้ใช้ส่งความคิดเห็นที่มี <script>alert(1)</script> ถ้าคุณวางสตริงนั้นลงในหน้า HTML โดยตรงโดยไม่เข้ารหัส เบราว์เซอร์จะรันมันเป็น JavaScript นั่นคือการโจมตี XSS (Cross-Site Scripting)

วิธีแก้ง่ายๆ: เข้ารหัสก่อนแสดงผล ใน PHP htmlspecialchars() จัดการอักขระสำคัญ 4 ตัว ใน Python html.escape() ครอบคลุม

ย่อหน้า vs ขึ้นบรรทัดใหม่: เลือกโครงสร้างที่ถูกต้อง

ใช้แท็ก <p> สำหรับเนื้อหาแบบบล็อก แท็กย่อหน้ามีความหมายเชิงความหมาย บอกเบราว์เซอร์ โปรแกรมอ่านหน้าจอ และเครื่องมือค้นหาว่านี่คือหน่วยย่อหน้าที่แยกจากกัน

ใช้ <br> สำหรับการขึ้นบรรทัดใหม่โดยตั้งใจภายในบล็อก กวีนิพนธ์ ที่อยู่ไปรษณีย์ เนื้อเพลง ต้องการการแบ่งบรรทัดแบบภาพ แต่ยังคงเป็นหน่วยตรรกะเดียว

การจัดการอักขระพิเศษนอกเหนือจากพื้นฐาน

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

การวางเนื้อหาลงใน CMS เป็นกรณีที่พบบ่อยที่สุด WordPress และระบบที่คล้ายกันมักมี sanitizer ของตัวเอง แต่ถ้าทำงานในบล็อก HTML ดิบหรือ Headless CMS ที่รับ HTML โดยตรง ข้อความที่ไม่ได้เข้ารหัสจะทำให้เกิดปัญหา

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

การย้ายโพสต์บล็อกจาก Word หรือ Google Docs เป็นสถานการณ์ที่ยุ่งยากที่สุด แอปพลิเคชันเหล่านี้แทรกเครื่องหมายคำพูดแบบพิเศษ เครื่องหมายอัญประกาศโค้ง และเส้นประที่ไม่ใช่มาตรฐาน เครื่องมือแปลงที่ดีจะลบอักขระที่ไม่ใช่มาตรฐานและแทนที่ด้วย HTML entity ที่ถูกต้อง

สิ่งที่เครื่องมือแปลงข้อความเป็น HTML มักเสนอ

• ครอบด้วย <p> — บรรทัดใหม่คู่กลายเป็นการแบ่งย่อหน้า
• แปลง URL เป็นลิงก์ — ตรวจจับ http:// และ https:// และครอบด้วยแท็กลิงก์
• รักษาช่องว่าง — มีประโยชน์สำหรับเนื้อหาที่จัดรูปแบบแล้ว ครอบผลลัพธ์ใน <pre>
• เพิ่ม nl2br — แปลงบรรทัดใหม่ทุกบรรทัดเป็น <br>
• ลบ HTML ที่มีอยู่ — ลบแท็กออกจากข้อความก่อนแปลง