กลุ่ม การจับคู่ และการแทนที่
จับส่วนต่าง ๆ ของข้อความด้วยกลุ่ม ใช้กลุ่มที่มีชื่อ วนดูการจับคู่ทั้งหมด และแทนที่อย่างปลอดภัยด้วยการอ้างอิงย้อนกลับหรือฟังก์ชัน
กลุ่ม การจับคู่ และการแทนที่ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
กลุ่มมีไว้ทำไม
เป้าหมาย: แยกและปรับรูปแบบข้อความ
- กลุ่มจับภาพ: (...)
- กลุ่มที่มีชื่อ: (?<name>...)
- ใช้ matchAll เพื่อวนลูปดูผลลัพธ์ทั้งหมด
- ใช้ replace ร่วมกับ $1 หรือฟังก์ชัน

กลุ่มแบบมีหมายเลข
ใช้ (...) เพื่อจับส่วนต่าง ๆ ของข้อความ แล้วเข้าถึงกลุ่มเหล่านั้นด้วยดัชนี: m[1], m[2], ...
// Capture YYYY-MM-DD into groups
const r = /(\\d{4})-(\\d{2})-(\\d{2})/;
const m = r.exec("Today: 2025-09-26");
if (m) {
console.log("year:", m[1], "month:", m[2], "day:", m[3]);
} else {
console.log("no match");
}

กลุ่มที่มีชื่อ
กลุ่มที่มีชื่อ เพิ่มคีย์ที่อ่านง่ายผ่าน m.groups.name
// Named groups make code clearer
const rx = /(?<y>\\d{4})-(?<m>\\d{2})-(?<d>\\d{2})/;
const hit = rx.exec("Release 2024-01-05");
if (hit) {
console.log("y:", hit.groups.y, "m:", hit.groups.m, "d:", hit.groups.d);
}

วนซ้ำผลการจับคู่
matchAll ส่งคืนตัววนซ้ำ ควรใช้ร่วมกับ g เพื่อวนดูผลการจับคู่ทุกรายการและอ่านกลุ่มต่าง ๆ
// matchAll with the g flag to get every match and groups
const text = "IDs: A-12, B-7, C-300";
const pattern = /([A-Z])-(\\d+)/g;
for (const match of text.matchAll(pattern)) {
console.log("letter:", match[1], "num:", match[2]);
}

แทนที่ด้วยกลุ่ม
replace สามารถใช้ $1, $2 หรือ ฟังก์ชันเรียกกลับ เพื่อสร้างข้อความใหม่ได้
// Replace order: "2025-09-26" -> "26/09/2025"
const date = "2025-09-26";
// With backreferences
const swapped1 = date.replace(/(\\d{4})-(\\d{2})-(\\d{2})/, "$3/$2/$1");
console.log("swap1:", swapped1);
// With a function for more control
const swapped2 = date.replace(/(?<y>\\d{4})-(?<m>\\d{2})-(?<d>\\d{2})/, function (_all, _y, _m, _d, groups) {
return groups.d + "/" + groups.m + "/" + groups.y;
});
console.log("swap2:", swapped2);

เคล็ดลับและข้อควรระวัง
เคล็ดลับ:
- เพิ่ม g เมื่อต้องการผลการจับคู่ทั้งหมด (ใช้ matchAll)
- ควรใช้ กลุ่มที่มีชื่อ เพื่อให้เข้าใจได้ง่าย
- ใช้รูปแบบที่สั้น และทดสอบกับสตริงตัวอย่างสั้น ๆ

แบบทดสอบพื้นฐาน matchAll
ตรวจสอบอย่างรวดเร็ว: วนดูผลการจับคู่ทั้งหมดพร้อมกลุ่มต่าง ๆ

สรุป
สรุป: จับภาพด้วย (...) ใช้ กลุ่มที่มีชื่อ เพื่อความชัดเจน วนดูผลการจับคู่ทั้งหมดผ่าน matchAll และปรับรูปแบบข้อความด้วย replace โดยใช้การอ้างอิงย้อนกลับหรือฟังก์ชันเรียกกลับ

คำถามที่พบบ่อย
บทเรียน “กลุ่ม การจับคู่ และการแทนที่” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “กลุ่ม การจับคู่ และการแทนที่” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “กลุ่ม การจับคู่ และการแทนที่”
จับส่วนต่าง ๆ ของข้อความด้วยกลุ่ม ใช้กลุ่มที่มีชื่อ วนดูการจับคู่ทั้งหมด และแทนที่อย่างปลอดภัยด้วยการอ้างอิงย้อนกลับหรือฟังก์ชัน คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “กลุ่ม การจับคู่ และการแทนที่” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐาน Regex — ลิเทอรัล test จุดยึด และแฟล็ก
- กลุ่ม การจับคู่ และการแทนที่
- การตรวจสอบความถูกต้องและจุดผิดพลาดเล็ก ๆ