เครื่องมือแปลง HTML เป็นข้อความ

การแปลง HTML เป็นข้อความทำอะไรกันแน่

หน้าเว็บ อีเมล และไฟล์ที่ส่งออกจาก CMS ไม่ใช่ข้อความธรรมดา แต่เป็น HTML นั่นคือโครงสร้างต้นไม้ของแท็กอย่าง p, div, span, a และ strong ที่ห่อหุ้มถ้อยคำที่คุณสนใจจริง ๆ เอาไว้ เมื่อคุณคัดลอกซอร์สนั้นหรือวางเนื้อหาแบบมีรูปแบบลงไป คุณจะลากเอาอินไลน์สไตล์ แอตทริบิวต์สำหรับการติดตาม และมาร์กอัปเชิงโครงสร้างติดมาด้วย ซึ่งเข้ามาขวางทางทันทีที่คุณต้องการเฉพาะเนื้อหาที่อ่านได้ล้วน ๆ การแปลง HTML เป็นข้อความจะเดินไปตามต้นไม้นั้นและเก็บไว้เฉพาะถ้อยคำที่มองเห็นได้ พร้อมทิ้งทุกแท็กและทุกแอตทริบิวต์ออกไป

เป้าหมายไม่ได้มีแค่การลบเครื่องหมายวงเล็บมุมทิ้ง การค้นหาแล้วแทนที่แท็กแบบไร้เดียงสาจะอัดย่อหน้าทุกย่อหน้าให้ติดกันเป็นพืดและเปลี่ยนบทความที่เป็นระเบียบให้กลายเป็นกำแพงข้อความก้อนเดียวที่ไม่มีรอยต่อ การแปลงที่ถูกต้องจะปฏิบัติต่อองค์ประกอบระดับบล็อก เช่น ย่อหน้า หัวเรื่อง และรายการลิสต์ ในฐานะขอบเขต โดยแทรกการขึ้นบรรทัดใหม่เข้าไปเพื่อให้ผลลัพธ์อ่านได้ตามลำดับเชิงตรรกะแบบเดียวกับที่มนุษย์จะเรียงลำดับ ขณะที่องค์ประกอบแบบอินไลน์อย่างตัวหนาและตัวเอียงจะหายไปเฉย ๆ และทิ้งไว้เพียงข้อความข้างใน

สิ่งที่คุณเก็บไว้ได้และสิ่งที่คุณต้องสูญเสีย

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

ลิงก์และรูปภาพคือพื้นที่กึ่งกลางที่น่าสนใจ เปิด Preserve Links เพื่อแสดงแองเคอร์ในรูปแบบ [text](url) เพื่อให้ปลายทางยังคงอยู่ในรูปแบบที่อ่านได้ และเปิด Include Image Alt Text เพื่อเก็บแอตทริบิวต์ alt ที่บรรยายภาพเอาไว้แทนที่จะทิ้งรูปภาพไปเงียบ ๆ หากคุณอยากได้การอ่านที่สะอาดตากว่านี้ ก็ปล่อยตัวเลือกเหล่านั้นไว้ที่ปิด หรือใช้ Ignore Images และ Ignore HR Tags เพื่อกำจัดตัวยึดตำแหน่งและเส้นคั่นแนวนอนออกไปทั้งหมด

ตัวอย่างที่ลองทำจริง

สมมติว่าคุณวางชิ้นส่วนนี้ลงไป: ย่อหน้าหนึ่งที่อ่านว่า Visit our shop โดยที่ shop เป็นลิงก์ไปยัง example.com ตามด้วยย่อหน้าที่สองซึ่งมีเอนทิตี Tom & Jerry อยู่ เมื่อเปิด Preserve Links และ Decode HTML Entities ผลลัพธ์จะกลายเป็นสองบรรทัดที่สะอาด: Visit our [shop](https://example.com) บนบรรทัดแรก และ Tom & Jerry บนบรรทัดที่สอง แท็ก p กลายเป็นการขึ้นบรรทัดใหม่ แองเคอร์ถูกเขียนใหม่ในรูปแบบวงเล็บเหลี่ยมและวงเล็บกลม และ & ถูกถอดรหัสกลับมาเป็นเครื่องหมายแอมเปอร์แซนด์จริง ๆ

ทำไม HTML entity จึงสำคัญ

HTML จะหลีกอักขระบางตัวเพื่อไม่ให้เบราว์เซอร์เข้าใจผิดว่าเป็นมาร์กอัป เครื่องหมายแอมเปอร์แซนด์เขียนเป็น &amp; เครื่องหมายน้อยกว่าเขียนเป็น &lt; ช่องว่างแบบไม่ตัดบรรทัดเขียนเป็น &nbsp; และอัญประกาศโค้งมักปรากฏเป็น &#8220; และ &#8221; หากคุณข้ามการถอดรหัสไป ลำดับอักขระดิบเหล่านั้นจะรั่วเข้าไปในข้อความของคุณและดูเหมือนเสีย เปิด Decode HTML Entities แล้วมันจะถูกแปลงกลับมาเป็นอักขระจริงที่มันแทนค่าอยู่: &, < ช่องว่างปกติ และเครื่องหมายอัญประกาศที่ถูกต้อง การตั้งค่าเพียงตัวเดียวนี้คือวิธีแก้ที่พบบ่อยที่สุดสำหรับผลลัพธ์ที่ดูเกือบจะถูกต้องแล้วแต่กลับมีโค้ดแอมเปอร์แซนด์โผล่กระจัดกระจายไปทั่ว

การควบคุมการขึ้นบรรทัดใหม่และการตัดบรรทัด

การตั้งค่าสองอย่างกำหนดรูปร่างของผลลัพธ์ที่จัดวาง Preserve Line Breaks จะรักษาการขึ้นบรรทัดที่องค์ประกอบระดับบล็อกบ่งบอกไว้ เพื่อให้ย่อหน้าต่าง ๆ ยังคงแยกจากกัน ส่วน Preserve Whitespace จะเก็บช่องว่างที่ต่อเนื่องกันและการเยื้องที่ปกติแล้ว HTML จะยุบรวมเข้าด้วยกัน ซึ่งมีประโยชน์เมื่อระยะห่างในต้นฉบับมีความหมาย เช่น ในโค้ดหรือในเลย์เอาต์แบบ ASCII

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

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

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

มันยังเป็นการตรวจสอบความถูกต้องอย่างรวดเร็วระหว่างการพัฒนาด้วย การแปลงเทมเพลตที่เรนเดอร์แล้วให้เป็นข้อความจะเผยให้เห็นลำดับการอ่านที่แท้จริง และเปิดเผยเนื้อหาที่ถูกซ่อนจากสายตาด้วย CSS แต่ยังคงมีอยู่ในมาร์กอัป ซึ่งอาจสำคัญต่อการตรวจสอบการเข้าถึง (accessibility) และการตรวจสอบ SEO

ข้อผิดพลาดที่พบบ่อยและควรเลี่ยง

กับดักที่ใหญ่ที่สุดคือการคาดหวังให้เลย์เอาต์อยู่รอด หากคุณต้องการรักษาโครงสร้างตาราง ลำดับชั้นของหัวข้อย่อย หรือการจัดสไตล์เอาไว้ ข้อความธรรมดาคือเป้าหมายที่ผิด ให้แปลงเป็น Markdown หรือเก็บ HTML เอาไว้แทน หลุมพรางที่สองคือการลืมถอดรหัสเอนทิตีแล้วก็มางงว่าทำไมผลลัพธ์ถึงมี &amp; อยู่เต็มไปหมด สุดท้าย จงจำไว้ว่าการแปลงสะท้อนเฉพาะสิ่งที่อยู่ในมาร์กอัปที่คุณวางลงไปเท่านั้น: หากหน้าเว็บสร้างเนื้อหาด้วย JavaScript หลังจากโหลดแล้ว HTML ดิบที่คุณคัดลอกมาจาก View Source อาจแทบจะว่างเปล่า ดังนั้นให้คัดลอก DOM ที่เรนเดอร์แล้วแทน