การจับคู่รูปแบบใน JavaScript ด้วย Regular Expressions: คู่มือฉบับสมบูรณ์

Regular expressions (regex) เป็นเครื่องมือที่ทรงพลังสำหรับการจับคู่รูปแบบและการจัดการข้อความใน JavaScript ช่วยให้นักพัฒนาสามารถค้นหา ตรวจสอบความถูกต้อง และแปลงสตริงตามรูปแบบที่กำหนดไว้ คู่มือนี้จะให้ภาพรวมที่ครอบคลุมเกี่ยวกับ regular expressions ใน JavaScript ซึ่งครอบคลุมถึงไวยากรณ์ การใช้งาน และเทคนิคขั้นสูง

Regular Expressions คืออะไร?

Regular expression คือลำดับของอักขระที่กำหนดรูปแบบการค้นหา รูปแบบเหล่านี้ใช้เพื่อจับคู่และจัดการสตริง Regular expressions ถูกใช้อย่างแพร่หลายในการเขียนโปรแกรมสำหรับงานต่างๆ เช่น:

• การตรวจสอบข้อมูล (Data Validation): เพื่อให้แน่ใจว่าข้อมูลที่ผู้ใช้ป้อนเป็นไปตามรูปแบบที่กำหนด (เช่น ที่อยู่อีเมล, หมายเลขโทรศัพท์)
• การดึงข้อมูล (Data Extraction): การดึงข้อมูลเฉพาะจากข้อความ (เช่น การดึงวันที่, URL, หรือราคา)
• การค้นหาและแทนที่ (Search and Replace): การค้นหาและแทนที่ข้อความตามรูปแบบที่ซับซ้อน
• การประมวลผลข้อความ (Text Processing): การแยก, รวม, หรือแปลงสตริงตามกฎที่กำหนด

การสร้าง Regular Expressions ใน JavaScript

ใน JavaScript, regular expressions สามารถสร้างได้สองวิธี:

1. การใช้ Regular Expression Literal: ใส่รูปแบบไว้ในเครื่องหมายทับ (/)
2. การใช้ RegExp Constructor: สร้างอ็อบเจกต์ RegExp โดยมีรูปแบบเป็นสตริง

ตัวอย่าง:

// การใช้ regular expression literal
const regexLiteral = /hello/;

// การใช้ RegExp constructor
const regexConstructor = new RegExp("hello");

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

ไวยากรณ์พื้นฐานของ Regex

Regular expressions ประกอบด้วยอักขระที่แสดงถึงรูปแบบที่จะจับคู่ นี่คือส่วนประกอบพื้นฐานบางอย่างของ regex:

• อักขระตามตัวอักษร (Literal Characters): จับคู่กับอักขระนั้นๆ (เช่น /a/ จะจับคู่กับอักขระ 'a')
• อักขระพิเศษ (Metacharacters): มีความหมายพิเศษ (เช่น ., ^, $, *, +, ?, [], {}, (), \, |)
• คลาสของอักขระ (Character Classes): แทนเซตของอักขระ (เช่น [abc] จะจับคู่ 'a', 'b', หรือ 'c')
• ตัวระบุจำนวน (Quantifiers): ระบุจำนวนครั้งที่อักขระหรือกลุ่มควรปรากฏ (เช่น *, +, ?, {n}, {n,}, {n,m})
• ตัวยึดตำแหน่ง (Anchors): จับคู่ตำแหน่งในสตริง (เช่น ^ จับคู่จุดเริ่มต้น, $ จับคู่จุดสิ้นสุด)

อักขระพิเศษที่พบบ่อย (Common Metacharacters):

• . (dot): จับคู่อักขระใดๆ หนึ่งตัวยกเว้นขึ้นบรรทัดใหม่
• ^ (caret): จับคู่จุดเริ่มต้นของสตริง
• $ (dollar): จับคู่จุดสิ้นสุดของสตริง
• * (asterisk): จับคู่ตัวอักขระหรือกลุ่มก่อนหน้าศูนย์ครั้งหรือมากกว่า
• + (plus): จับคู่ตัวอักขระหรือกลุ่มก่อนหน้าหนึ่งครั้งหรือมากกว่า
• ? (question mark): จับคู่ตัวอักขระหรือกลุ่มก่อนหน้าศูนย์หรือหนึ่งครั้ง ใช้สำหรับอักขระที่ไม่บังคับ
• [] (square brackets): กำหนดคลาสของอักขระ จับคู่อักขระใดๆ เพียงตัวเดียวที่อยู่ในวงเล็บ
• {} (curly braces): ระบุจำนวนครั้งที่จะจับคู่ {n} จับคู่ n ครั้งพอดี, {n,} จับคู่ n ครั้งขึ้นไป, {n,m} จับคู่ระหว่าง n ถึง m ครั้ง
• () (parentheses): จัดกลุ่มอักขระเข้าด้วยกันและจับคู่สตริงย่อยที่ตรงกัน
• \ (backslash): ใช้ escape อักขระพิเศษเพื่อให้สามารถจับคู่กับอักขระเหล่านั้นตามตัวอักษรได้
• | (pipe): ทำหน้าที่เป็นตัวดำเนินการ "หรือ" (or) จับคู่นิพจน์ที่อยู่ข้างหน้าหรือข้างหลังมัน

คลาสของอักขระ (Character Classes):

• [abc]: จับคู่อักขระใดๆ ตัวหนึ่งใน a, b, หรือ c
• [^abc]: จับคู่อักขระใดๆ ที่ *ไม่ใช่* a, b, หรือ c
• [a-z]: จับคู่ตัวอักษรภาษาอังกฤษตัวพิมพ์เล็กใดๆ จาก a ถึง z
• [A-Z]: จับคู่ตัวอักษรภาษาอังกฤษตัวพิมพ์ใหญ่ใดๆ จาก A ถึง Z
• [0-9]: จับคู่ตัวเลขใดๆ จาก 0 ถึง 9
• [a-zA-Z0-9]: จับคู่อักขระที่เป็นตัวอักษรและตัวเลข (alphanumeric)
• \d: จับคู่ตัวเลขใดๆ (เทียบเท่ากับ [0-9])
• \D: จับคู่อักขระที่ไม่ใช่ตัวเลข (เทียบเท่ากับ [^0-9])
• \w: จับคู่อักขระที่เป็นคำ (word character) (ตัวอักษร ตัวเลข และเครื่องหมายขีดล่าง; เทียบเท่ากับ [a-zA-Z0-9_])
• \W: จับคู่อักขระที่ไม่ใช่คำ (non-word character) (เทียบเท่ากับ [^a-zA-Z0-9_])
• \s: จับคู่อักขระที่เป็นช่องว่าง (whitespace) ใดๆ (เว้นวรรค, แท็บ, ขึ้นบรรทัดใหม่, ฯลฯ)
• \S: จับคู่อักขระที่ไม่ใช่ช่องว่าง

ตัวระบุจำนวน (Quantifiers):

• *: จับคู่องค์ประกอบก่อนหน้าศูนย์ครั้งหรือมากกว่า ตัวอย่างเช่น a* จะจับคู่ "", "a", "aa", "aaa", และอื่นๆ
• +: จับคู่องค์ประกอบก่อนหน้าหนึ่งครั้งหรือมากกว่า ตัวอย่างเช่น a+ จะจับคู่ "a", "aa", "aaa", แต่ไม่จับคู่ ""
• ?: จับคู่องค์ประกอบก่อนหน้าศูนย์หรือหนึ่งครั้ง ตัวอย่างเช่น a? จะจับคู่ "" หรือ "a"
• {n}: จับคู่องค์ประกอบก่อนหน้า *n* ครั้งพอดี ตัวอย่างเช่น a{3} จะจับคู่ "aaa"
• {n,}: จับคู่องค์ประกอบก่อนหน้า *n* ครั้งหรือมากกว่า ตัวอย่างเช่น a{2,} จะจับคู่ "aa", "aaa", "aaaa", และอื่นๆ
• {n,m}: จับคู่องค์ประกอบก่อนหน้าระหว่าง *n* และ *m* ครั้ง (รวม n และ m) ตัวอย่างเช่น a{2,4} จะจับคู่ "aa", "aaa", หรือ "aaaa"

ตัวยึดตำแหน่ง (Anchors):

• ^: จับคู่จุดเริ่มต้นของสตริง ตัวอย่างเช่น ^Hello จะจับคู่สตริงที่ *เริ่มต้น* ด้วย "Hello"
• $: จับคู่จุดสิ้นสุดของสตริง ตัวอย่างเช่น World$ จะจับคู่สตริงที่ *สิ้นสุด* ด้วย "World"
• \b: จับคู่ขอบเขตของคำ (word boundary) ซึ่งเป็นตำแหน่งระหว่างอักขระที่เป็นคำ (\w) และอักขระที่ไม่ใช่คำ (\W) หรือจุดเริ่มต้นหรือสิ้นสุดของสตริง ตัวอย่างเช่น \bword\b จะจับคู่คำว่า "word" ทั้งคำ

แฟล็ก (Flags):

แฟล็กของ Regex ใช้ปรับเปลี่ยนพฤติกรรมของ regular expressions โดยจะถูกต่อท้าย regex literal หรือส่งเป็นอาร์กิวเมนต์ตัวที่สองให้กับ RegExp constructor

• g (global): จับคู่ทุกรายการที่ตรงกับรูปแบบ ไม่ใช่แค่รายการแรก
• i (ignore case): ทำการจับคู่โดยไม่สนใจขนาดตัวพิมพ์ (case-insensitive)
• m (multiline): เปิดใช้งานโหมดหลายบรรทัด ซึ่ง ^ และ $ จะจับคู่จุดเริ่มต้นและสิ้นสุดของแต่ละบรรทัด (ที่คั่นด้วย \n)
• s (dotAll): อนุญาตให้จุด (.) จับคู่อักขระขึ้นบรรทัดใหม่ด้วย
• u (unicode): เปิดใช้งานการรองรับ Unicode เต็มรูปแบบ
• y (sticky): จับคู่เฉพาะจากดัชนีที่ระบุโดยคุณสมบัติ lastIndex ของ regex

เมธอด Regex ใน JavaScript

JavaScript มีเมธอดหลายตัวสำหรับทำงานกับ regular expressions:

• test(): ทดสอบว่าสตริงตรงกับรูปแบบหรือไม่ ส่งคืนค่า true หรือ false
• exec(): ค้นหาสตริงที่ตรงกัน ส่งคืนอาร์เรย์ที่ประกอบด้วยข้อความที่ตรงกันและกลุ่มที่จับได้ หรือ null หากไม่พบการจับคู่
• match(): ส่งคืนอาร์เรย์ที่ประกอบด้วยผลลัพธ์ของการจับคู่สตริงกับ regular expression พฤติกรรมจะแตกต่างกันเมื่อมีและไม่มีแฟล็ก g
• search(): ทดสอบการจับคู่ในสตริง ส่งคืนดัชนีของการจับคู่ครั้งแรก หรือ -1 หากไม่พบ
• replace(): แทนที่การปรากฏของรูปแบบด้วยสตริงสำหรับแทนที่ หรือฟังก์ชันที่ส่งคืนสตริงสำหรับแทนที่
• split(): แบ่งสตริงออกเป็นอาร์เรย์ของสตริงย่อยตาม regular expression

ตัวอย่างการใช้เมธอด Regex:

// test()
const regex = /hello/;
const str = "hello world";
console.log(regex.test(str)); // ผลลัพธ์: true

// exec()
const regex2 = /hello (\w+)/;
const str2 = "hello world";
const result = regex2.exec(str2);
console.log(result); // ผลลัพธ์: ["hello world", "world", index: 0, input: "hello world", groups: undefined]

// match() พร้อมแฟล็ก 'g'
const regex3 = /\d+/g; // ค้นหาตัวเลขหนึ่งตัวขึ้นไปทั้งหมด
const str3 = "There are 123 apples and 456 oranges.";
const matches = str3.match(regex3);
console.log(matches); // ผลลัพธ์: ["123", "456"]

// match() ไม่มีแฟล็ก 'g'
const regex4 = /\d+/;
const str4 = "There are 123 apples and 456 oranges.";
const match = str4.match(regex4);
console.log(match); // ผลลัพธ์: ["123", index: 11, input: "There are 123 apples and 456 oranges.", groups: undefined]

// search()
const regex5 = /world/;
const str5 = "hello world";
console.log(str5.search(regex5)); // ผลลัพธ์: 6

// replace()
const regex6 = /world/;
const str6 = "hello world";
const newStr = str6.replace(regex6, "JavaScript");
console.log(newStr); // ผลลัพธ์: hello JavaScript

// replace() ด้วยฟังก์ชัน
const regex7 = /(\d+)-(\d+)-(\d+)/;
const str7 = "Today's date is 2023-10-27";
const newStr2 = str7.replace(regex7, (match, year, month, day) => {
  return `${day}/${month}/${year}`;
});
console.log(newStr2); // ผลลัพธ์: Today's date is 27/10/2023

// split()
const regex8 = /, /;
const str8 = "apple, banana, cherry";
const arr = str8.split(regex8);
console.log(arr); // ผลลัพธ์: ["apple", "banana", "cherry"]

เทคนิค Regex ขั้นสูง

กลุ่มการจับ (Capturing Groups):

วงเล็บ () ใช้เพื่อสร้างกลุ่มการจับใน regular expressions กลุ่มการจับช่วยให้คุณสามารถดึงส่วนเฉพาะของข้อความที่ตรงกันได้ เมธอด exec() และ match() จะส่งคืนอาร์เรย์ที่องค์ประกอบแรกคือการจับคู่ทั้งหมด และองค์ประกอบถัดไปคือกลุ่มที่จับได้

const regex = /(\d{4})-(\d{2})-(\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match[0]); // ผลลัพธ์: 2023-10-27 (การจับคู่ทั้งหมด)
console.log(match[1]); // ผลลัพธ์: 2023 (กลุ่มที่จับได้กลุ่มแรก - ปี)
console.log(match[2]); // ผลลัพธ์: 10 (กลุ่มที่จับได้กลุ่มที่สอง - เดือน)
console.log(match[3]); // ผลลัพธ์: 27 (กลุ่มที่จับได้กลุ่มที่สาม - วัน)

กลุ่มการจับแบบมีชื่อ (Named Capturing Groups):

ES2018 ได้เปิดตัวกลุ่มการจับแบบมีชื่อ ซึ่งช่วยให้คุณสามารถกำหนดชื่อให้กับกลุ่มการจับได้โดยใช้ไวยากรณ์ (?...) ซึ่งทำให้โค้ดอ่านง่ายและบำรุงรักษาได้ดีขึ้น

const regex = /(?\d{4})-(?\d{2})-(?\d{2})/;
const dateString = "2023-10-27";
const match = regex.exec(dateString);

console.log(match.groups.year);  // ผลลัพธ์: 2023
console.log(match.groups.month); // ผลลัพธ์: 10
console.log(match.groups.day);   // ผลลัพธ์: 27

กลุ่มที่ไม่จับ (Non-Capturing Groups):

หากคุณต้องการจัดกลุ่มส่วนต่างๆ ของ regex โดยไม่จับคู่มัน (เช่น เพื่อใช้ตัวระบุจำนวนกับกลุ่ม) คุณสามารถใช้กลุ่มที่ไม่จับด้วยไวยากรณ์ (?:...) ซึ่งจะหลีกเลี่ยงการจัดสรรหน่วยความจำที่ไม่จำเป็นสำหรับกลุ่มที่จับ

const regex = /(?:https?:\/\/)?([\w\.]+)/; // จับคู่ URL แต่จะจับเฉพาะชื่อโดเมน
const url = "https://www.example.com/path";
const match = regex.exec(url);

console.log(match[1]); // ผลลัพธ์: www.example.com

Lookarounds:

Lookarounds เป็นการยืนยันที่ไม่มีความกว้าง (zero-width assertions) ซึ่งจะจับคู่ตำแหน่งในสตริงตามรูปแบบที่อยู่ก่อนหน้า (lookbehind) หรือตามหลัง (lookahead) ตำแหน่งนั้น โดยไม่รวมรูปแบบ lookaround ไว้ในการจับคู่เอง

• Positive Lookahead: (?=...) จับคู่หากรูปแบบภายใน lookahead *ตามหลัง* ตำแหน่งปัจจุบัน
• Negative Lookahead: (?!...) จับคู่หากรูปแบบภายใน lookahead *ไม่ตามหลัง* ตำแหน่งปัจจุบัน
• Positive Lookbehind: (?<=...) จับคู่หากรูปแบบภายใน lookbehind *อยู่ก่อนหน้า* ตำแหน่งปัจจุบัน
• Negative Lookbehind: (? จับคู่หากรูปแบบภายใน lookbehind *ไม่อยู่ก่อนหน้า* ตำแหน่งปัจจุบัน

// Positive Lookahead: ดึงราคาเฉพาะเมื่อตามด้วย USD
const regex = /\d+(?= USD)/;
const text = "The price is 100 USD";
const match = text.match(regex);
console.log(match); // ผลลัพธ์: ["100"]

// Negative Lookahead: ดึงคำเฉพาะเมื่อไม่ตามด้วยตัวเลข
const regex2 = /\b\w+\b(?! \d)/;
const text2 = "apple 123 banana orange 456";
const matches = text2.match(regex2);
console.log(matches); // ผลลัพธ์: null เนื่องจาก match() จะคืนค่าเฉพาะการจับคู่ครั้งแรกหากไม่มีแฟล็ก 'g' ซึ่งไม่ใช่สิ่งที่เราต้องการ
// วิธีแก้ไข:
const regex3 = /\b\w+\b(?! \d)/g;
const text3 = "apple 123 banana orange 456";
const matches3 = text3.match(regex3);
console.log(matches3); // ผลลัพธ์: [ 'banana' ]

// Positive Lookbehind: ดึงค่าเฉพาะเมื่อนำหน้าด้วย $
const regex4 = /(?<=\$)\d+/;
const text4 = "The price is $200";
const match4 = text4.match(regex4);
console.log(match4); // ผลลัพธ์: ["200"]

// Negative Lookbehind: ดึงคำเฉพาะเมื่อไม่นำหน้าด้วยคำว่า 'not'
const regex5 = /(?

const regex = /([a-z]+) \1/;
const text = "hello hello world";
const match = regex.exec(text);
console.log(match); // ผลลัพธ์: ["hello hello", "hello", index: 0, input: "hello hello world", groups: undefined]

const emailRegex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/;

console.log(emailRegex.test("test@example.com"));    // ผลลัพธ์: true
console.log(emailRegex.test("invalid-email"));       // ผลลัพธ์: false
console.log(emailRegex.test("test@sub.example.co.uk")); // ผลลัพธ์: true

const urlRegex = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g;
const text = "Visit our website at https://www.example.com or check out http://blog.example.org.";
const urls = text.match(urlRegex);
console.log(urls); // ผลลัพธ์: ["https://www.example.com", "http://blog.example.org"]

const csvString = 'John,Doe,"123, Main St",New York';
const csvRegex = /(?:"([^"]*(?:""[^"]*)*)")|([^,]+)/g; //แก้ไข regex สำหรับ CSV ให้ถูกต้อง
let values = [];
let match;  

while (match = csvRegex.exec(csvString)) {
  values.push(match[1] ? match[1].replace(/""/g, '"') : match[2]);
}


console.log(values); // ผลลัพธ์: ["John", "Doe", "123, Main St", "New York"]

const phoneRegex = /^\+(?:[0-9] ?){6,14}[0-9]$/;
console.log(phoneRegex.test("+1 555 123 4567")); // ผลลัพธ์: true (ตัวอย่างของสหรัฐฯ)
console.log(phoneRegex.test("+44 20 7946 0500")); // ผลลัพธ์: true (ตัวอย่างของสหราชอาณาจักร)
console.log(phoneRegex.test("+81 3 3224 5000"));  // ผลลัพธ์: true (ตัวอย่างของญี่ปุ่น)
console.log(phoneRegex.test("123-456-7890"));   // ผลลัพธ์: false

const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;

console.log(passwordRegex.test("P@ssword123")); // ผลลัพธ์: true
console.log(passwordRegex.test("password"));       // ผลลัพธ์: false (ไม่มีตัวพิมพ์ใหญ่หรือตัวเลข)
console.log(passwordRegex.test("Password"));       // ผลลัพธ์: false (ไม่มีตัวเลข)
console.log(passwordRegex.test("Pass123"));        // ผลลัพธ์: false (ไม่มีตัวพิมพ์เล็ก)
console.log(passwordRegex.test("P@ss1"));          // ผลลัพธ์: false (น้อยกว่า 8 ตัวอักษร)