ปลั๊กอิน BBCode สำหรับ jQuery

วันนี้ผมลองเขียน plugin แก้ขัดที่หายหน้าหายตาไปนานมาให้ลองกันครับ นั่นก็คือปลั๊กอินที่ใช้ render BBCode ครับ ใครที่เป็นนักโพสเว็บบอร์ดคงจะรู้จักกันดีว่า BBCode คืออะไร สำหรับใครที่ยังไม่รู้จักก็อ่านย่อหน้าถัดไปได้เลยครับ

BBCode เราเรียกได้ว่าเป็น lightweighted markup language ใช้สำหรับจัดรูปแบบข้อความตามเว็บบอร์ดต่าง ๆ ครับ มีลักษณะของแท็กอยู่ในเครื่องหมายก้ามปู เช่น [b]ตัวหนา[/b] ครับ เจ้าตัว BBCode นี่เว็บบราวเซอร์มันไม่รู้จักครับ ต้องทำการแปลไปเป็น markup language ที่ใช้ทั่ว ๆ ไปก่อนครับ นั่นก็คือ HTML หรือ XHTML ครับ เช่น จาก [b]ตัวหนา[/b] จะถูกแปลงไปเป็น <b>ตัวหนา</b> แล้วค่อยนำไปแสดงผลครับ

จุดประสงค์หลัก ๆ ของ BBCode คือ เพื่อให้ผู้ใช้สามารถจัดรูปแบบข้อความได้ง่ายขึ้น รวมไปถึงเพื่อความปลอดภัยของการแสดงผลข้อความที่โพสโดยผู้ใช้ด้วยครับ เช่น การควบคุมการใช้งาน javascript การควบคุมให้ใช้ tag ภายในข้อกำหนด เป็นต้น

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

ทีนี้มาดูกันว่าปลั๊กอินตัวนี้จะทำงานยังไงครับ

ง่าย ๆ ครับ แค่เรียก $(<selector>).bbcode(); เท่านั้นครับ เช่น

$("div").bbcode();

ไอเดียของปลั๊กอินตัวนี้ผมได้มาจากตอนเขียนแก้บักการแสดงผล BBCode ให้เก็บเว็บไซต์หนึ่งครับ ปกติแล้วการ render จาก BBCode ไปเป็น HTML นั้น มักจะทำที่ Server และส่ง HTML ที่ได้มาให้บราวเซอร์แสดงผล แต่ผมต้องการที่จะลดโหลดฝั่ง Server ลง โดยจะย้ายการทำงานจากฝั่ง Server มาทำที่บราวเซอร์แทน

หลักการทำงานก็ไม่มีอะไรมากครับ ผมใช้วิธีการกำหนดค่า Pattern ในรูปแบบ Regular Expression และใช้ Regular Expression Engine ของ JavaScript ในการแสดงผลให้ถูกต้องเท่านั้นครับ

ลองไปดูที่ LIVE DEMO กันเลยครับ

อ้างอิง

• http://en.wikipedia.org/wiki/BBCode