ชาวโปรแกรมเมอร์อย่างเรา ๆ เคยเจอปัญหาเกี่ยวกับการจัดการกับข้อมูลยาว ๆ
หรือไม่ ถ้าอยากได้ข้อมูลมาแค่บางอย่างจากข้อมูลยาว ๆ เราจะทำอย่างไร ?
ต้องมานั่ง loop, เขียน if else เช็คค่าหรอ
ไม่ที่นี่เราไม่ทำกันแบบนั้น มันมีวิธีที่ง่ายกว่านั้นที่จะมาช่วยเราจัดการกับปัญหานี้
นั่นก็คือ Regex !!
Regex (Regular Expressions) คืออะไร ?
แบบง่าย ๆ ⇒ เป็นเหมือนกับ google ใช้ค้นหาสิ่งต่าง ๆ ที่เราใช้กันในชีวิตประจำวัน ซึ่งสิ่งที่เราพิมพ์ในช่องค้นหา เปรียบเสมือนกับคำสั่ง Regex ที่เรากำหนดขึ้นมาเพื่อให้ได้ผลลัพท์ที่ต้องการ
แบบละเอียดขึ้นมาหน่อย ⇒ การเขียนกฎที่ใช้สำหรับกำหนดรูปแบบของข้อมูลให้เป็นไปตามที่เราต้องการ ซึ่งสามารถใช้ได้ตั้งแต่รับค่าเลย หรือใช้ในการตรวจสอบข้อมูลหลังจากได้รับค่ามาแล้ว (Validate ใน Test case หรือใน Form ต่าง ๆ)
Concept ของ Regex
- การค้นหาสิ่งที่ต้องการผ่านคำสั่งที่เราพิมพ์ (เหมือนกับการใช้งาน google)
ซึ่งยิ่งคำสั่งเราละเอียดมาก ผลลัพธ์ที่ได้ก็จะแม่นยำ
และมีความถูกต้องตามที่เราต้องการ
สัญลักษณ์ต่าง ๆ ของ Regex เบื้องต้น
- \d ⇒ ตัวเลข 0–9 ([0–9] เขียนแบบนี้ได้เหมือนกัน)
- \D ⇒ อะไรก็ได้ที่ไม่ใช่ตัวเลข
- \s ⇒ whitespace, tab (กด Spacebar กด Tab นั่นแหละ)
- \S ⇒ อะไรก็ได้ที่ไม่ใช่ whitespace, tab
- \w ⇒ ตัวอักษรภาษาอังกฤษ, ตัวเลข 0–9 และ underscore
- \W ⇒ อะไรก็ได้ที่ไม่ใช่ตัวอักษรภาษาอังกฤษ, ตัวเลข 0–9 และ underscore
- \l ⇒ ตัวอักษรภาษาอังกฤษแบบ lowercase ([a-z] เขียนแบบนี้ได้เหมือนกัน)
- \u ⇒ ตัวอักษรภาษาอังกฤษแบบ uppercase ([A-Z] เขียนแบบนี้ได้เหมือนกัน)
- \x ⇒ เลขฐาน 16 ([A-Fa-f0–9] เขียนแบบนี้ได้เหมือนกัน)
- ^ ⇒ ถ้าเขียนตัวแรกสุดของ Regex จะหมายถึง เริ่มต้น แต่ถ้าหากเขียนใน [ ] จะมีความหมายเป็นไม่ แทน ([^0-9] ⇒ มีความหมายว่าไม่เอา 0–9)
- [ ] ⇒ เป็นเหมือนกรอบของเงื่อนไขที่เราต้องการเขียน เช่น เราอยากได้ตัวเลข 1–5 ตัวอักษรตัว T ตัวใหญ่เท่านั้น ⇒ ^[1–5T]+$
- ( ) ⇒ เอาไว้จัดเป็นกลุ่ม ๆ ให้มองภาพเป็นวงเล็บในโจทย์คณิต
- | ⇒ หรือ
- $ ⇒ การปิด Regex
สัญลักษณ์ที่ไว้ใช้กำหนดจำนวนครั้งของเงื่อนไขที่เราเขียน
- * ⇒ เริ่มต้นที่ 0 ไปจนถึงไม่มีที่สิ้นสุด (จะมีหรือไม่มีก็ได้ แต่ถ้ามีก็มีกี่ตัวก็ได้ไม่มีกำหนด)
- + ⇒ เริ่มต้นที่ 1 ไปจนถึงไม่มีที่สิ้นสุด
- ? ⇒ ไม่มีหรือมีเพียงแค่ 1 ตัวเท่านั้น
- {x} ⇒ x แทนตัวเลข length ตามที่เราต้องการ ซึ่งสามารถใส่เป็นช่วงได้ {1,3} เป็นต้น
ตัวอย่าง Regex ที่ใช้บ่อย
/^[\w\.]+@([\w]+\.)+[a-z]{2,4}$/
^ ⇒ เริ่มต้นเงื่อนไข
[\w\.] ⇒ ตัวอักษรภาษาอังกฤษ ตัวเลข underscore และจุด
+ ⇒ ต้องตรงกับชุดคำสั่งที่พิมพ์ก่อนหน้านี้ 1 ครั้งขึ้นไป
จนกว่าจะพิมพ์ตรงกับเงื่อนไขถัดไป@ ⇒ สัญลักษณ์ @ 1 ตัว
([\w]+\.) ⇒ ตัวอักษรภาษาอังกฤษ ตัวเลข underscore 1 ตัวขึ้นไปจนกว่าจะพิมพ์จุด
+ ⇒ ต้องตรงกับชุดคำสั่งที่พิมพ์ก่อนหน้านี้ 1 ครั้งไป
จนกว่าจะพิมพ์ตรงกับเงื่อนไขถัดไป[a-z]{2,4} ⇒ ตัวอักษรภาษาอังกฤษจำนวน 2–4 ตัว
$ ⇒ จบเงื่อนไข
- Only number
/^[\d]+$/
^ ⇒ เริ่มต้นเงื่อนไข
[\d] ⇒ ตัวเลข 0–9
+ ⇒ ต้องตรงกับชุดคำสั่งที่พิมพ์ก่อนหน้านี้ 1 ครั้งขึ้นไป
จนกว่าจะพิมพ์ตรงกับเงื่อนไขถัดไป$ ⇒ จบเงื่อนไข
- Username
/^[a-z0-9_-]{3,16}$/
^ ⇒ เริ่มต้นเงื่อนไข
[a-z0–9_-]{3,16} ⇒ ตัวอักษรภาษาอังกฤษแบบ lowercase, 0-9,
underscore และ - จำนวน 3-16 ตัวอักษร$ ⇒ จบเงื่อนไข
การใช้งาน Regex จะใช้งานตอนไหนได้บ้าง ?
- ส่วนใหญ่เลยจะใช้เกี่ยวกับ Form ใช้เพื่อ Validate Field ต่าง ๆ
- ใช้เพื่อบังคับให้ผู้ใช้งานพิมพ์ไปตามรูปแบบที่เรากำหนดไว้
(ตัวอย่างเช่น หากพิมพ์ไม่ตรงตามเงื่อนไข จะไม่สามารถพิมพ์ได้ เป็นต้น) - ใช้สำหรับการค้นหาข้อมูลจำนวนมากที่มีรูปแบบตรงตามเงื่อนไขที่เราเขียนเอาไว้
- นำไปใช้เขียนทดสอบได้ ซึ่งก็จะคล้าย ๆ กับการ Validate ค่าใน Form
ตัวอย่างการใช้งาน
- ใช้เป็น If-else condition
const regexEmail = /^[\w\.]+@([\w]+\.)+[a-z]{2,4}$/
const testEmail = '@abc.com">abc-@abc.com'
if(regexEmail.test(testEmail)) {
console.log('Valid Email')
}else {
console.log('Invalid Email')
}- ใช้เป็นเงื่อนไขเมื่อทำการพิมพ์ในช่อง Input
<input type="text"
id="username"
name="username"
pattern="[a-zA-Z0-9]+"
minlength="4"
maxlength="10"/>
// abc123 valid username
// abc-123 invalid usernameแนะนำเว็บที่ใช้สำหรับทดสอบ Regex ว่าเป็นไปตามที่เราคิดมั้ย
regex101: build, test, and debug regex
สรุปเกี่ยวกับ Regex
การเขียน Regex ให้เป็นจะช่วยให้การเขียนโปรแกรมของเรามีประสิทธิภาพ และมีความถูกต้องมากขึ้น เนื่องจากจะคอยตรวจสอบข้อมูลต่าง ๆ ตามเงื่อนไขที่ถูกกำหนดขึ้น โดยผลลัพท์ที่ได้จะขึ้นอยู่กับ Regex ที่เราเขียนขึ้นมาว่าครอบคลุมสิ่งที่เราต้องการหรือไม่ ยิ่งเรารู้คำสั่งหรือสัญลักษณ์มาก จะยิ่งทำให้เราเขียน Regex ได้มีประสิทธิภาพและมีความถูกต้องมากขึ้น
