Regular Expressions เบื้องต้น

Regular Expressions เบื้องต้นใน JavaScript

ในบทนี้ เราจะมาเรียนรู้เกี่ยวกับ Regular Expressions (RegEx) ซึ่งเป็นเครื่องมือที่ทรงพลังสำหรับการค้นหา, จับคู่ (matching), และจัดการข้อความ (string) ใน JavaScript การเข้าใจ RegEx จะช่วยให้คุณสามารถจัดการกับข้อมูลที่เป็นข้อความได้อย่างมีประสิทธิภาพมากขึ้น เช่น การตรวจสอบรูปแบบอีเมล, การค้นหาคำเฉพาะในเอกสาร, หรือการแทนที่ข้อความที่ตรงตามเงื่อนไขที่กำหนด

Regular Expression คืออะไร?

Regular Expression คือรูปแบบ (pattern) ที่ใช้ในการจับคู่ชุดของอักขระ (characters) ภายใน string รูปแบบนี้สามารถใช้เพื่อค้นหา, แก้ไข, หรือตรวจสอบข้อความได้ RegEx มีไวยากรณ์เฉพาะที่ช่วยให้คุณสามารถกำหนดรูปแบบที่ซับซ้อนได้อย่างยืดหยุ่น

Regular Expression Syntax

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

Literal Notation: ใช้เครื่องหมาย slash (/) ครอบรูปแบบ RegEx: /pattern/flags
Constructor Function: ใช้ RegExp object: new RegExp('pattern', 'flags')

ตัวอย่าง:

// Literal notation
const regex1 = /hello/;

// Constructor function
const regex2 = new RegExp('world');

องค์ประกอบพื้นฐานของ Regular Expression:

Literal Characters: ตัวอักษรหรือสัญลักษณ์ปกติ เช่น a, b, 1, 2
Metacharacters: ตัวอักษรพิเศษที่มีความหมายเฉพาะ เช่น ., *, +, ?, ^, $, [], {}, (), \, |

Metacharacters ที่ควรรู้:

. (dot): จับคู่อักขระใดๆ ก็ได้ ยกเว้น newline
* (asterisk): จับคู่ตัวอักษรที่อยู่ข้างหน้า 0 ครั้งขึ้นไป
+ (plus): จับคู่ตัวอักษรที่อยู่ข้างหน้า 1 ครั้งขึ้นไป
? (question mark): จับคู่ตัวอักษรที่อยู่ข้างหน้า 0 หรือ 1 ครั้ง
^ (caret): จับคู่จุดเริ่มต้นของ string
$ (dollar): จับคู่จุดสิ้นสุดของ string
[] (square brackets): กำหนด character class (ชุดของตัวอักษรที่ต้องการจับคู่)
{} (curly braces): กำหนดจำนวนครั้งที่ต้องการจับคู่
() (parentheses): สร้าง capturing group (กลุ่มของตัวอักษรที่ถูกจับคู่)
\ (backslash): ใช้ escape metacharacters หรือสร้าง special sequences
| (pipe): ใช้เป็น OR operator (จับคู่อันใดอันหนึ่ง)

Character Classes:

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

การใช้งาน Regular Expression Methods

JavaScript มี methods ที่เกี่ยวข้องกับ RegEx ที่สำคัญอยู่ 3 ตัว:

test(): ตรวจสอบว่ามี string ที่ตรงกับ RegEx หรือไม่ คืนค่า true หรือ false
match(): ค้นหา string ที่ตรงกับ RegEx และคืนค่าเป็น array ของ matches หรือ null ถ้าไม่พบ
replace(): แทนที่ string ที่ตรงกับ RegEx ด้วย string ใหม่

`test()` Method

test() method ใช้เพื่อตรวจสอบว่า string ที่กำหนดมีส่วนที่ตรงกับ RegEx หรือไม่

const regex = /hello/;
const str = "hello world";
const result = regex.test(str);

console.log(result); // true

`match()` Method

match() method ใช้เพื่อค้นหา string ที่ตรงกับ RegEx และคืนค่าเป็น array ของ matches

const regex = /world/;
const str = "hello world";
const result = str.match(regex);

console.log(result); // ["world", index: 6, input: "hello world", groups: undefined]

ถ้าไม่พบ match, match() จะคืนค่า null

const regex = /universe/;
const str = "hello world";
const result = str.match(regex);

console.log(result); // null

`replace()` Method

replace() method ใช้เพื่อแทนที่ string ที่ตรงกับ RegEx ด้วย string ใหม่

const regex = /world/;
const str = "hello world";
const newStr = str.replace(regex, "JavaScript");

console.log(newStr); // "hello JavaScript"

Regular Expression Flags

Flags คือตัวอักษรที่ใช้ปรับเปลี่ยนพฤติกรรมของ RegEx Flags จะถูกใส่ไว้หลังเครื่องหมาย slash ตัวสุดท้ายใน literal notation หรือเป็น argument ที่สองใน constructor function

Flags ที่พบบ่อย:

i (case-insensitive): ไม่สนใจตัวพิมพ์เล็ก-ใหญ่
g (global): ค้นหาทุก match ใน string ไม่ใช่แค่ match แรก
m (multiline): อนุญาตให้ ^ และ $ จับคู่จุดเริ่มต้นและจุดสิ้นสุดของแต่ละบรรทัด (ถ้า string มีหลายบรรทัด)

ตัวอย่างการใช้ flags:

const regex = /hello/i; // case-insensitive
const str = "Hello world";
const result = regex.test(str);

console.log(result); // true

const regex = /o/g; // global
const str = "hello world";
const result = str.match(regex);

console.log(result); // ["o", "o"]

const regex = /^world/m; // multiline
const str = "hello\nworld";
const result = regex.test(str);

console.log(result); // true

ตัวอย่างการใช้งาน Regular Expressions

การตรวจสอบรูปแบบอีเมล:

const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
const email1 = "test@example.com";
const email2 = "invalid-email";

console.log(emailRegex.test(email1)); // true
console.log(emailRegex.test(email2)); // false

การค้นหาคำที่ขึ้นต้นด้วยตัวอักษร 'a':

const regex = /\ba\w+/g; // \b คือ word boundary
const str = "apple banana avocado apricot";
const result = str.match(regex);

console.log(result); // ["apple", "avocado", "apricot"]

การแทนที่ whitespace ด้วยขีดล่าง:

const regex = /\s+/g; // \s คือ whitespace, + คือ 1 ครั้งขึ้นไป
const str = "hello   world";
const newStr = str.replace(regex, "_");

console.log(newStr); // "hello_world"

สรุป

Regular Expressions เป็นเครื่องมือที่สำคัญสำหรับการจัดการข้อความใน JavaScript การเข้าใจ syntax และวิธีการใช้งาน test(), match(), และ replace() จะช่วยให้คุณสามารถเขียนโปรแกรมที่จัดการกับข้อมูลที่เป็นข้อความได้อย่างมีประสิทธิภาพมากขึ้น ในบทต่อไป เราจะเรียนรู้เกี่ยวกับการใช้งาน Date Object ใน JavaScript

Regular Expressions เบื้องต้น