Unlock สกิลการเขียน “RegEx” หรือ Regular Expression ด้วยภาพ

โพสนี้อยากมาแชร์เรื่องที่ทำให้เรา unlock skills การเขียน regex (regular expression) ทำให้เขียนเป็นตั้งแต่ตอนนั้นเป็นต้นมา

พอดีวันนี้ได้มีโอกาสกลับมาอ่าน finite automata เลยนึกขึ้นได้ว่าสมัยเริ่มเขียนโปรแกรม regex นี่ไม่ต่างกับภาษาเอลี่ยนเลย ดูกี่ทีก็งง และเป็นสิ่งที่เราพยายาม avoid มาตลอด

จำได้เลยว่าตอนนั้นเขียน php แล้วอยากได้ url path เท่ ๆ (เขียน .htaccess file) แต่เขียน regex ไม่เป็น เลยต้องไปหาโค้ดตามเน็ตแล้วมั่วทรงเอาจนได้

ความเข้าใจเรื่อง regex ของเรามา unlock ตอนเรียนเรื่อง finite state machine ที่มหาลัยเลย

ถ้าเล่าง่าย ๆ ลองจินตนาการภาพของ graph; ลองนึกภาพว่ามีเกาะ (เกาะที่มีวงกลมสองวงคือเกาะปลายทางที่เราอยากจะเดินไปถึง) และมีสะพานที่มี symbol อย่างเช่นตัวอักษรภาษาอังกฤษแปะอยู่

ในตอนแรกสุดเราจะอยู่ที่เกาะเริ่มต้น หน้าที่ของเราก็คือ “อ่านตัวอักษรใน string ไปทีละตัวและเดินไปตามสะพานที่มีตัวอักษรนั้นแปะอยู่”

สมมุติว่า string ของเราคือคำว่า “cat” ถ้าเราเดินไปเรื่อย ๆ ตามทีละอักษรเราก็จะไปอยู่เกาะที่ 4 พอดี ซึ่งเป็นเกาะปลายทาง …ดังนั้นเราจึงสรุปได้ว่า “accept” (หรือประโยคที่เราอ่านพาเราไปเกาะปลายทางได้)

แต่ถ้า string ของเราคือ “catca” จะเห็นว่าถ้าเราเดินไปเรื่อย ๆ จะไปหยุดอยู่ที่เกาะ 3 ซึ่งไม่ใช่เกาะที่เราอยากจะไป เราจึงสรุปว่า “reject”

จะเห็นว่า graph ที่วาดขึ้นในรูปมันจะ accept string อย่าง “cat”, “catcat”, “catcatcat”, … แต่จะ reject string อย่าง “ca”, “caaaaat”, “dog”

จริง ๆ แล้วมันก็เหมือนที่เราเขียน regex ว่า “(cat)+” นั่นเอง

ทุก regex มันสามารถแปลงเป็นภาพแบบตัวอย่างได้ และภาพแบบตัวอย่างก็สามารถเขียนให้เป็น regex ได้เช่นกัน

และถ้าเราเห็นภาพว่า basic regex syntax สามารถแปลงไปเป็นภาพได้อย่างไร เราก็แค่เอาภาพต่าง ๆ ที่เรามี มาออกแบบ ประกอบจนได้ model ที่จะ accept string ในแบบที่เราต้องการ และ reject ในแบบที่เราไม่ต้องการได้นั่นเอง

แน่นอนว่าอ่านโพสนี้คงจะไม่ได้ทำให้เขียน regex ได้เป็นทันที

…แต่สำหรับใครที่สนใจอยากอ่านต่อแนะนำให้หา keyword “regex as finite state machine” แล้วก็ลองใช้ tool อย่าง Regex Vis กับ regex101 ฝึกเขียน regex เช็ค email หรือ match อะไรง่าย ๆ จาก string ดู

ไว้วันหลังจะเขียน simply explained มาอธิบายแต่ละ term ในโพสนี้แบบละเอียดอีกทีครับ; สุดท้ายนี้ใครเรียน regex ให้เข้าใจได้ยังไง เจออะไรที่ทำให้ unlock มาแชร์กัน~