อ็อบเจ็กต์ `RegExp`

บทความนี้อธิบายเกี่ยวกับอ็อบเจ็กต์ RegExp

เราจะอธิบายอ็อบเจ็กต์ RegExp พร้อมตัวอย่างที่ใช้จริง

YouTube Video

อ็อบเจ็กต์ RegExp

RegExp คืออะไร?

RegExp (Regular Expression) เป็น อ็อบเจ็กต์ที่ใช้แสดงรูปแบบของสตริง แตกต่างจากการเปรียบเทียบตัวอักษรง่ายๆ คุณสามารถกำหนด 'สตริงที่ตรงตามเงื่อนไขที่กำหนด' ได้อย่างยืดหยุ่น

โดยการใช้วัตถุ RegExp คุณสามารถดำเนินการ เช่น ค้นหา, ตรวจสอบ, แยกข้อมูล และแทนที่สตริง ได้อย่างกระชับและชัดเจน สิ่งนี้มีประสิทธิภาพมากสำหรับงานประจำวัน เช่น การตรวจสอบความถูกต้องของข้อมูลฟอร์ม, การวิเคราะห์ log และการจัดรูปแบบข้อความ ด้านล่างนี้คือตัวอย่างที่ง่ายของ Regular Expressions

1const pattern = /abc/;

• นิพจน์ปกตินี้จะตรวจสอบว่ามีลำดับ 'abc' อยู่หรือไม่

วิธีการสร้างนิพจน์ปกติ (สองวิธี)

รูปแบบไวยากรณ์ของ RegExp มีอยู่ 2 แบบคือ literal notation และ constructor notation

1// Literal notation: pattern and flags are written together
2const literal         = /hello/;
3const literalWithFlag = /hello/i;
4const literalDigits   = /\d+/;
5
6// Constructor notation: pattern and flags are passed separately
7const constructor         = new RegExp("hello");
8const constructorWithFlag = new RegExp("hello", "i");
9const constructorDigits   = new RegExp("\\d+");

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

test(): การตรวจสอบขั้นพื้นฐานที่สุด

วัตถุ RegExp มีเมธอดสำหรับใช้ประเมินผลและดำเนินการต่าง ๆ ด้วย regular expressions test() เป็นเมธอดที่ ส่งค่าบูลีนว่าแพทเทิร์นตรงกันหรือไม่

1const regex = /JavaScript/;
2
3console.log(regex.test("I love JavaScript")); // true
4console.log(regex.test("I love TypeScript")); // false

• นี่คือเมธอดแรกที่คุณควรเรียนรู้ และเหมาะสำหรับการแยกเงื่อนไขหรือการตรวจสอบข้อมูลที่ป้อนเข้า

match(): รับผลลัพธ์ที่ตรงกัน

match() ส่งคืนอาร์เรย์ที่มีสตริงที่ตรงกันและข้อมูลรายละเอียด

1const text = "Version 1.2.3";
2const result = text.match(/\d+\.\d+\.\d+/);
3
4console.log(result[0]); // "1.2.3"

• match() สะดวกกว่าการใช้ test() สำหรับการแยกข้อมูลและการแปลงข้อมูล

replace(): การแทนที่ด้วยนิพจน์ปกติ

replace() แปลงส่วนที่ตรงกันเป็นสตริงใหม่

1const text = "Hello   World";
2const result = text.replace(/\s+/g, " ");
3
4console.log(result); // "Hello World"

• คุณสามารถใช้มันเพื่อจัดรูปแบบ log หรือปรับช่องว่างที่ไม่จำเป็นในข้อความให้เหมาะสม

พื้นฐานของธง (g, i, m)

คุณสามารถกำหนด 'flags' ใน regular expressions ได้ Flags เป็น ตัวเลือกที่ควบคุมวิธีการที่ regular expression ประมวลผลสตริงตามกฎเกณฑ์ที่กำหนด แม้ใช้รูปแบบเดียวกัน ผลลัพธ์ก็อาจแตกต่างกันตาม flags ที่กำหนดไว้

1const text = "apple Apple APPLE";
2const regex = /apple/gi;        // or new RegExp("apple", "gi");
3
4console.log(text.match(regex)); // ["apple", "Apple", "APPLE"]

• flag g (global) จะค้นหาตลอดสตริงทั้งหมด
• flag i (ignore case) จะไม่สนใจความแตกต่างของตัวพิมพ์เล็ก-ใหญ่ในการจับคู่

1const multilineText = `apple
2banana
3apple`;
4
5const regexM = /^apple/gm;
6
7console.log(multilineText.match(regexM)); // ["apple", "apple"]

• flag m (multiline) จะ ใช้เพื่อจัดการสตริงที่มีหลายบรรทัดแบบแยกแต่ละบรรทัด เมื่อตั้งค่านี้ เครื่องหมาย ^ และ $ จะทำงานที่จุดเริ่มต้นและสิ้นสุดของแต่ละบรรทัด แทนที่จะเป็นทั้งสตริง

คลาสตัวอักษร: รวมตัวเลือกหลายๆ ตัว

โดยการใช้วงเล็บเหลี่ยม [] คุณสามารถ กำหนดชุดของตัวอักษรที่เป็นไปได้สำหรับตำแหน่งเดียว

1const regex = /gr[ae]y/;
2
3console.log(regex.test("gray")); // true
4console.log(regex.test("grey")); // true

• สิ่งนี้มีประโยชน์สำหรับการรองรับคำที่สะกดต่างกันหรือรูปแบบทางเลือกแบบง่าย

เมต้าแคแรคเตอร์: ทางลัดที่ใช้บ่อย

เมต้าแคแรคเตอร์คือตัวสัญลักษณ์ที่ช่วยให้คุณเขียนแพทเทิร์นที่ใช้บ่อยได้ในรูปแบบที่สั้นลง

1const regex = /\d{4}-\d{2}-\d{2}/;  // or new RegExp("\\d{4}-\\d{2}-\\d{2}");
2
3console.log(regex.test("2025-12-29")); // true

• \d หมายถึงตัวเลข และ {n} ระบุจำนวนครั้งที่ต้องการทำซ้ำ

^ และ $: ตรวจสอบความถูกต้องของทั้งสตริง

^ และ $ แทนจุดเริ่มต้นและจุดสิ้นสุดของสตริง

1const regex = /^\d+$/;
2
3console.log(regex.test("123"));   // true
4console.log(regex.test("123a"));  // false

• สิ่งเหล่านี้สำคัญมากในกรณีที่ต้องการตรงกันแบบสมบูรณ์ เช่น ข้อมูลที่ป้อนในฟอร์ม

การจัดกลุ่มและจับข้อมูล

โดยใช้วงเล็บ () คุณสามารถ แยกค่าส่วนหนึ่งของข้อความ ออกมาได้

1const text = "2025/12/29";
2const regex = /(\d{4})\/(\d{2})\/(\d{2})/;
3const [, year, month, day] = text.match(regex);
4
5console.log(year, month, day); // 2025 12 29

• วิธีนี้มักใช้สำหรับแยกวันที่และสตริงที่มีโครงสร้าง

ข้อผิดพลาดที่พบบ่อยและสิ่งที่ควรระวัง

นิพจน์ปกติมีความสามารถสูง แต่ก็มัก อ่านยาก

1// Hard to read
2const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+$/;

• หากมันซับซ้อนเกินไป คุณอาจพิจารณาเพิ่มคอมเมนต์ แยก Expression หรือปรับปรุงขั้นตอนของกระบวนการนั้นใหม่

สรุป

RegExp เป็น ฟีเจอร์พื้นฐานที่สำคัญใน JavaScript สำหรับการอธิบายการประมวลผลสตริงอย่างง่ายและแม่นยำ คุณไม่จำเป็นต้องเรียนรู้รูปแบบนิพจน์ปกติที่ซับซ้อนตั้งแต่แรก สิ่งสำคัญคือการใช้เมธอดและไวยากรณ์พื้นฐานเช่น test, match และ replace ตามความต้องการที่แท้จริง หากคุณสามารถมองนิพจน์ปกติว่าไม่ใช่ 'ความรู้เฉพาะทาง' แต่เป็น 'เครื่องมือสำหรับแสดงรูปแบบข้อมูลอย่างมีระบบ' คุณจะเพิ่มคุณภาพและความอ่านง่ายของการตรวจสอบข้อมูลและการประมวลผลข้อความได้อย่างมาก

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video