BBCode to HTML Converter: แปลง Forum Markup ให้เป็น HTML สะอาดในไม่กี่วินาที

ใครเคยดูแล forum phpBB, เป็น moderator ของ vBulletin หรือ export กระทู้จาก Discourse มาก่อน ต้องเคยเจอ BBCode แน่นอน — แท็กหน้าตาเป็นวงเล็บเหลี่ยมอย่าง [b], [url=...] หรือ [quote] ที่ครองโลกฟอรัมมาสองทศวรรษ ปัญหาคือมันใช้ได้เฉพาะในซอฟต์แวร์ฟอรัมเท่านั้น พอจะเอาเนื้อหาพวกนี้ไปใช้บนเว็บสมัยใหม่ CMS หรือ email template สิ่งที่คุณต้องมีคือ HTML ตัวจริง

นั่นคือหน้าที่ของ BBCode to HTML Converter — วางข้อความ BBCode ลงไป รับ HTML ที่สะอาดตามมาตรฐานกลับมาทันที พร้อม live preview ข้างกัน ไม่ต้องสมัครสมาชิก ไม่ต้องติดตั้งอะไร และไม่มีการส่งข้อมูลขึ้น server เลย เพราะทุกอย่างประมวลผลใน browser ของคุณเอง

ในบทความนี้เราจะพาไปดูว่า converter ทำงานอย่างไร รองรับแท็กอะไรบ้าง และมีสถานการณ์ไหนที่มันช่วยประหยัดเวลาให้คุณได้เป็นชั่วโมง

ทำไมต้องใช้ BBCode to HTML Converter?

• Migrate คอนเทนต์เก่าได้ทันที — archive ฟอรัมตั้งแต่ต้นยุค 2000 เต็มไปด้วย BBCode การมานั่งแก้ [url] ให้เป็น <a> เองทีละพันกระทู้ไม่มีทางไหว แค่วางแปลงรอบเดียวจบ
• Live preview ขณะทำงาน — เห็นผลลัพธ์ที่ render แล้วคู่กับ HTML ที่ได้ ยืนยันได้เลยว่า formatting, quote และ list ออกมาถูกต้องก่อน copy
• Output ปลอดภัย ผ่านการ sanitize — input ถูก HTML-escape ระหว่างแปลง script tag หรือ HTML ที่แอบฝังมาจะถูกทำให้เป็นข้อความธรรมดา ส่วน link ทั้งหมดผ่านการตรวจสอบ URL scheme และได้ rel="noopener noreferrer" กับ target="_blank" อัตโนมัติ
• รองรับแท็กครบเครื่อง — ตั้งแต่พื้นฐานอย่าง [b], [i] ไปจนถึง [quote=name], nested list, [code] block, สีตัวอักษร, ขนาดฟอนต์ และขนาดรูปภาพ ครอบคลุมแท็กที่ฟอรัมจริงใช้กัน
• ไร้ friction — ไม่ต้อง sign-up ไม่ต้อง upload ไม่ต้องมี API key เป็นเครื่องมือฟรีที่ใช้ได้ทั้ง desktop และ mobile
• Copy และ Download ในตัว — คลิกเดียว copy HTML ขึ้น clipboard หรือกด download เป็นไฟล์พร้อมโยนเข้า project

ฟีเจอร์เด่น

ตารางแปลงแท็ก BBCode คลาสสิกให้เป็น HTML เชิงความหมาย (semantic HTML):

จุดที่ควรรู้เพิ่ม:

• Code block ถูกป้องกัน — เนื้อหาใน [code]...[/code] จะถูกดึงออกก่อนการ parse แล้วคืนกลับตอนจบ ทำให้ตัวอย่าง BBCode ที่อยู่ "ใน" code sample แสดงผลตรงตามต้นฉบับ ไม่ถูกแปลงไปด้วย — ตรงกับพฤติกรรมของ forum parser ตัวจริง
• URL safety ถูกบังคับใช้ — รับเฉพาะ scheme http://, https://, mailto: และ ftp: เท่านั้น ตัวอื่นเช่น javascript: จะถูกทำให้ harmless ปิดช่องโหว่ XSS ยอดฮิตของ user-submitted markup ได้
• ทำงาน client-side ทั้งหมด — logic การแปลงรันอยู่ใน browser ของคุณล้วน ๆ ไม่มีการ upload เก็บ log หรือบันทึกข้อมูลใด ๆ

วิธีใช้งาน

1. เปิด BBCode to HTML Converter ใน browser
2. วางข้อความ BBCode ลงในช่อง input — จะเป็นโพสต์เดียว ทั้ง thread ที่ export มา หรือทั้งชุดข้อความก็ได้
3. ดู live preview ที่ render ทันที แสดงให้เห็นเลยว่า HTML ที่แปลงแล้วหน้าตาเป็นอย่างไร
4. ตรวจสอบ HTML ในช่อง output ถ้ามีจุดไหนต้องแก้ก็ปรับข้อความต้นทางได้เลย
5. กด Copy เพื่อ copy HTML ขึ้น clipboard หรือกด Download บันทึกเป็นไฟล์

ทำความเข้าใจ BBCode

BBCode หรือ Bulletin Board Code เกิดขึ้นปลายยุค 90 เพื่อเป็นทางเลือกที่ปลอดภัยและเบากว่า HTML ดิบ ๆ ในโลกของ user-generated content สมัยนั้น admin ฟอรัมเจอปัญหาคลาสสิก: ถ้าปล่อยให้ user เขียน HTML ได้เท่ากับปล่อยให้เขียน script tag ซึ่งนำไปสู่การขโมย session และ deface เว็บ แต่ถ้า strip HTML ทิ้งหมด user ก็จัดรูปแบบอะไรไม่ได้เลย

BBCode แก้ทั้งสองปัญหาในคราวเดียว — user เขียนแท็กวงเล็บเหลี่ยมอย่าง [b]ตัวหนา[/b] แล้วซอฟต์แวร์ฟอรัมจะแปลง "เฉพาะ" แท็กที่อยู่ใน whitelist ให้เป็น HTML ส่วนที่เหลือถูก escape หรือทิ้งไป เพราะ parser เป็นคนควบคุมการแปลงทั้งหมด จึงการันตีได้ว่า markup อันตรายจะไม่มีทางไปถึงหน้าเว็บ phpBB, vBulletin, IP.Board, SMF และอีกนับไม่ถ้วน platform ต่างใช้แนวทางนี้ แม้แต่ engine สมัยใหม่อย่าง Discourse ก็ยังรับ BBCode เพื่อความเข้ากันได้

กระบวนการแปลงในเครื่องมือนี้ใช้ pipeline เดียวกับ forum parser ระดับ production:

1. ป้องกัน code block — ดึงเนื้อหา [code] ออกไปก่อน ไม่แตะต้อง
2. Escape HTML — ทุก <, > และ & ในต้นฉบับกลายเป็น entity ทำให้ markup ที่แอบฝังมาหมดฤทธิ์
3. Parse แท็กตามลำดับ — container ก่อน ([quote], [list]) ตามด้วย inline formatting แล้วจึง link, image, หัวข้อ ลำดับสำคัญเพราะ quote อาจมี list ข้างใน และ list อาจมี formatting ซ้อนอยู่
4. ตรวจสอบ URL — ทุก [url] ถูกเช็คกับ whitelist ของ scheme ก่อนปล่อย <a> ออกไป
5. คืน code block — เนื้อหาที่ป้องกันไว้ถูกใส่กลับ (แบบ escaped) เป็นขั้นสุดท้าย

เข้าใจลำดับนี้แล้วจะอธิบายผลลัพธ์ที่เห็นได้ — script tag ที่วางเข้ามาใน input จะไปโผล่ใน output เป็นข้อความ escaped ที่มองเห็นด้วยตา ไม่ใช่ HTML ที่รันได้ ซึ่งเป็นพฤติกรรมที่คุณต้องการเวลา migrate forum archive ที่ไม่น่าเชื่อถือ

ตัวอย่างการใช้งานจริง

ย้าย legacy forum archive

คุณกำลังย้ายกระทู้ phpBB 10 ปีเข้าสู่ platform สมัยใหม่ที่ต้องการ HTML — export โพสต์ออกมา (ได้เป็น BBCode ดิบ) ส่งผ่าน converter เป็นชุด ๆ แล้วเอา HTML สะอาดไปเข้า import script ทั้ง quote, list, link และ code sample รอดมาพร้อมโครงสร้างครบ

ฝังเนื้อหาฟอรัมลงเว็บไซต์หรือ CMS

คำตอบเด็ด บทความสร้างเครื่องบิน หรือประกาศจากทีมงาน มักสมควรได้บ้านถาวรบนเว็บหลัก — แปลง thread จาก BBCode เป็น HTML แล้ววางลง WordPress, Ghost หรือ static site ได้เลย formatting ตามมาครบโดยไม่ต้องมานั่งสร้าง link และ list ใหม่ทีละอัน

ทำ HTML email template จาก draft ในฟอรัม

ทีม support มักร่างประกาศใน forum ก่อน — แปลง draft BBCode เป็น HTML แล้วดัดแปลง <strong>, <a> และ list markup เข้าสู่ email template ได้เลย เพราะ output เป็น standard semantic tags จึง map เข้า email-safe HTML ได้ราบรื่น

ทดสอบ forum import pipeline

ถ้าคุณกำลังเขียน importer ที่แปลง BBCode เป็น HTML เอง เครื่องมือนี้ใช้เป็น oracle สำหรับเทียบผลลัพธ์ได้ — วาง edge case ที่มันยุ่งยาก เช่น quote ซ้อน list, [code] block ที่ข้างในมีตัวอย่าง [b], หรือ [url] ที่ใช้ scheme javascript: แล้วเทียบ output ของ importer กับวิธีจัดการอย่างปลอดภัยของเครื่องมือ

แนวทางปฏิบัติที่ดี

• แปลงเป็นชุดเล็ก ๆ แล้ว spot-check — migration หลายร้อยโพสต์ควรเช็คทีละ 20–50 ชุด เจอ quirk เร็ว แก้ก่อน ประหยัดงานรื้อ
• ทดสอบโครงสร้างซ้อนก่อนเป็นอย่างแรก — quote ที่มี list ที่มี link ข้างในคือจุดที่ converter หลายตัวพัง เก็บตัวอย่างเป็นตัวแทนมา verify ก่อนเชื่อผล bulk
• เก็บ BBCode ต้นฉบับไว้เสมอ — เก็บ export ดิบไว้คู่กับ HTML ที่แปลงแล้ว เผื่อวันหน้าต้องแปลงใหม่ด้วย rule ที่ต่างออกไป
• อย่าเชื่อ raw forum HTML เด็ดขาด — แม้แปลงแล้ว ถ้าหน้าปลายทาง render เนื้อหาของ user ก็ต้องคงการ escaping ที่ converter ทำไว้ นั่นคือเกราะกัน XSS ของคุณ
• ตรวจ image tag ทุกครั้ง — URL จาก [img] อาจชี้ไปที่ host ที่ตายแล้วหรือกัน hotlink เช็คว่ารูปโหลดได้จริงก่อน publish
• ใช้ live preview ช่วยตัดสินใจเรื่อง layout — preview แสดงให้เห็นว่า [align] กับ [size] render ออกมาหน้าตาเป็นอย่างไร ช่วยตัดสินใจว่าจะเก็บ inline style ไว้หรือเปลี่ยนเป็น CSS class ดีกว่า

เริ่มแปลงได้เลยตอนนี้

ความรู้มากมายหลายสิบปีของอีกนับไม่ถ้วน community ถูกล็อกอยู่ใน BBCode — ปลดล็อกมันไม่ควรต้องเริ่มโปรเจกต์ขุดค้น regex วาง forum markup ของคุณลง BBCode to HTML Converter เช็ค live preview แล้ว copy HTML สะอาดออกมาในไม่กี่วินาที — ปลอดภัย เป็นส่วนตัว และฟรี

เครื่องมือที่เกี่ยวข้อง:

• Markdown to HTML Converter — render เอกสาร Markdown เป็น HTML สะอาดพร้อม publish
• Jira to Markdown Converter — แปลง Jira markup เป็น Markdown สำหรับเอกสารและ README
• HTML to Markdown Converter — ย้อนทางกลับ แปลงหน้า HTML เป็น Markdown พกพาได้

ขอให้แปลงข้อความอย่างมีความสุข!