Regex cơ bản + test nhanh trên trình duyệt | Flag, neo, nhóm bắt

Sinh viên năm 2 paste /^[a-z]+@[a-z]+\.[a-z]{2,3}$/ vào bài tập form. QA gửi [email protected] — fail. Lead hỏi “em đã test chưa?” — “Em xem Stack Overflow thấy đúng”. Vấn đề không phải thiếu pattern phức tạp; là chưa có vòng test nhanh.

Bài này dạy regex đủ dùng và cách debug trên tester — không phải cheat sheet 10 pattern (đã có bài riêng).

Ai nên đọc

• Fresher / sinh viên mới gặp RegExp trong JS hoặc Python
• Dev hay copy pattern nhưng không giải thích được từng ký tự
• Ai cần quy trình “3 good / 3 bad” trước khi mở PR

Regex là gì (một câu đủ dùng)

Biểu thức chính quy mô tả hình dạng chuỗi: “có đúng 4 chữ số”, “bắt đầu bằng ERROR”, “nằm giữa dấu ngoặc”. Engine duyệt text và báo khớp / không khớp / các vị trí khớp.

Nó không chứng minh email tồn tại, SĐT đang hoạt động, hay HTML hợp lệ — chỉ trả lời câu hỏi hình dạng.

8 khối xây dựng (học theo thứ tự)

1. Ký tự thường

abc khớp đúng ba ký tự a rồi b rồi c liên tiếp.

2. Dấu chấm .

Khớp một ký tự bất kỳ — trừ xuống dòng (JS mặc định).
a.c khớp abc, a-c, không khớp ac (thiếu ký tự giữa).

3. Lớp ký tự và shorthand

[abc]     một trong a, b, c
[a-z]     một chữ thường ASCII
[^0-9]    một ký tự không phải chữ số
\d        chữ số — tương đương [0-9] (ASCII; Unicode cần \p{Nd} + flag u)
\w        [A-Za-z0-9_]
\s        khoảng trắng (space, tab, xuống dòng…)

Tiếng Việt: [a-z] không khớp ă, ê, ộ. Username có dấu → đừng dùng [a-z]+; cân nhắc Unicode (u + \p{L}) hoặc bỏ validate bằng regex.

4. Quantifier

Tham lam mặc định: \d+ lấy nhiều số nhất có thể. Hiếm khi cần lazy (+?) ở mức cơ bản — biết tồn tại là đủ.

5. Neo ^ và $

^\d{4}$     cả chuỗi đúng 4 chữ số
\d{4}       4 chữ số đâu đó trong chuỗi (khớp trong x2026y)

Quên neo khi validate form → "xx12yy" vẫn “pass” nếu chỉ tìm \d+.

6. Nhóm () và thay thế

const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec("2026-07-19");
// m[1]=2026, m[2]=07, m[3]=19

Chỉ cần nhóm logic, không cần bắt: (?:ab)+.

7. Alternation |

cat|dog khớp cat hoặc dog. Trong nhóm: (err|warn|info).

8. Flag

Demo 5 phút: từ ý tưởng → fixture → tool

Mục tiêu: mã ticket dạng PROJ-123 (chữ hoa + số).

Pattern: \b[A-Z]{2,10}-\d+\b
Flag: g

Good: Fix PROJ-42 tonight, OPS-1001
Bad: proj-42 (thường), P-1 (quá ngắn prefix nếu policy ≥2), PROJ_

Thử trên tool — bật highlight và xem danh sách khớp:

Quy trình cố định:

1. Viết một câu mục tiêu
2. 3 chuỗi good / 3 bad (gồm edge tiếng Việt nếu liên quan)
3. Test trên /vi/tools/regex/ với đúng flag
4. Copy /pattern/flags vào code — không gõ lại từ bộ nhớ
5. Unit test cùng fixture (client + server nếu validate hai lớp)

Escape trong JavaScript — bẫy số 1 của fresher

// Literal — một lần \
const re = /\d+/;

// String constructor — phải nhân đôi
const re2 = new RegExp("\\d+");

Dán \d+ vào ô pattern của tester thì đúng. Paste vào "\d+" trong JS mà quên \\ → pattern thành d+ (chữ d). Luôn đối chiếu bằng cách console.log(re.source).

Case: “Tool báo khớp nhưng form vẫn đỏ”

Quy tắc debug: nếu tester và code lệch nhau — in pattern, flags, và input.length hai bên. 90% là flag hoặc escape.

Khi nào dừng lại (đừng over-regex)

• Validate email “RFC đủ” → không; dùng filter lỏng + gửi mail xác nhận
• Parse HTML / CSV phức tạp → parser
• Quantifier lồng (a+)+$ trên input user → rủi ro ReDoS; giữ pattern đơn giản

Chi tiết pattern sẵn và cảnh báo backtracking: Regex pattern hay dùng + ReDoS.

Checklist bỏ túi

• Giải thích được từng ký tự trong pattern (không “copy thấy chạy”)
• Có neo nếu cần khớp cả chuỗi
• Flag giống production
• Fixture good/bad đã chạy trên Regex tester
• Không dán PII khách vào tool không tin cậy
• Unit test giữ cùng fixture

Liên kết liên quan

• Regex tester Kawa — pattern, text, flag g/i/m, highlight + danh sách khớp
• Regex pattern hay dùng
• Danh sách công cụ