Bộ kiểm tra Regex — Bộ kiểm tra biểu thức chính quy JavaScript trực tuyến _

Regex hoạt động như thế nào trong trình duyệt của bạn?

Mọi môi trường thực thi JavaScript đều đi kèm động cơ biểu thức chính quy gốc — new RegExp(pattern, flags) biên dịch mẫu của bạn, sau đó các phương thức như String.prototype.match, String.prototype.replace, và RegExp.prototype.exec chạy nó trên bất kỳ chuỗi đầu vào nào. Bộ kiểm tra này bao bọc động cơ đó trong giao diện để bạn có thể chỉnh sửa, chạy và kiểm tra mẫu mà không rời khỏi trình duyệt. Không có gì bạn nhập — mẫu, cờ, chuỗi kiểm tra hoặc thay thế — được gửi qua mạng.

Bộ kiểm tra regex hoạt động như thế nào?

Pipeline gồm vài bước ngắn, tất cả đều chạy ở phía máy khách trên mỗi lần nhấn phím (với debouncing 150 ms để gõ vẫn mượt):

1. Thân mẫu của bạn được đọc từ trường ở trên (không có dấu phân tách / ở đầu hoặc cuối — chúng chỉ là trang trí). Các thuốc nhuộm cờ đã chọn được nối thành chuỗi cờ như gi hoặc gimsuy.
2. new RegExp(patternBody, flags) biên dịch mẫu. Nếu động cơ ném ra SyntaxError (ví dụ ngoặc không ghép cặp hoặc thoát không hợp lệ), thông điệp được hiển thị phía trên chuỗi kiểm tra và danh sách khớp được làm trống. Lỗi biên dịch là err.message thực sự từ V8 / SpiderMonkey / JavaScriptCore, vì vậy nó khớp với những gì bạn sẽ thấy trong DevTools.
3. Đối với danh sách khớp, bộ kiểm tra luôn liệt kê với cờ global tổng hợp — vì vậy ngay cả khi bạn tắt g, danh sách vẫn hiển thị mọi khớp. Bộ bảo vệ tiêu chuẩn chống khớp độ rộng không (if (m.index === rx.lastIndex) rx.lastIndex++) giữ vòng lặp khỏi quay tròn trên các mẫu khớp với chuỗi rỗng. Chế độ Thay thế tôn trọng bộ cờ thực của bạn để $& hoạt động giống như String.prototype.replace.
4. Giữa mỗi lần lặp, bộ kiểm tra kiểm tra performance.now() - start và hủy khi 50 ms đã trôi qua. Điều này bảo vệ chống lại quay lui thảm khốc trên đầu vào như (a+)+$ với một chuỗi dài a — nếu không tab sẽ treo. Bộ bảo vệ là nỗ lực tối đa: một mẫu khớp đơn bệnh lý vẫn có thể tiêu thụ thời gian bên trong một cuộc gọi exec. Nếu điều đó xảy ra, làm mới tab và viết lại mẫu với bộ định lượng không tham lam hoặc kiểu chiếm hữu nguyên tử (ví dụ [^x]*x).
5. Chuỗi kiểm tra được chia thành các đoạn tại phạm vi của mỗi khớp và các đoạn khớp được bọc trong các phần tử <mark class="rx-match rx-cap-N">, trong đó N luân chuyển qua sáu màu palette để các khớp liền kề dễ phân biệt trong nháy mắt. Các nhóm có số (m[1], m[2], …) và nhóm có tên (m.groups) của mỗi khớp được hiển thị dưới dạng các hàng có nhãn bên dưới; nếu cờ d được đặt, chỉ số [start, end] cho mỗi nhóm cũng được hiển thị.

Tại sao sử dụng bộ kiểm tra regex này?

• Riêng tư: mọi mẫu, chuỗi kiểm tra và thay thế chạy trong trình duyệt của bạn sử dụng động cơ JavaScript RegExp tích hợp sẵn. Không gì rời khỏi tab — quan trọng khi đầu vào là log khách hàng, mẫu thông tin xác thực bị rò rỉ hoặc bất kỳ thứ gì khác bạn không dán vào sân chơi regex SaaS được lưu trữ.
• Hương vị trung thực: bộ kiểm tra phơi bày chính xác động cơ regex mà Node.js, Chrome, Safari, Firefox và mọi trình xác thực biểu mẫu dựa trên trình duyệt chạy. Không có lớp dịch hương vị Perl để che giấu sự khác biệt tinh tế — những gì hoạt động ở đây hoạt động trong mã của bạn.
• Gỡ lỗi bắt và nhóm có tên: mỗi nhóm có số ($1, $2, …) và nhóm có tên ($<year>) được hiển thị mỗi khớp để bạn có thể xây dựng một parser và đọc các slot mà không phải đoán. Chế độ Thay thế cho phép bạn pha trộn các nhóm tự do — $2-$1 tráo đổi hai slot đầu tiên, $<name> chèn một slot có tên và $& lặp lại toàn bộ khớp.
• Rào chắn quay lui thảm khốc: trần 50 ms trên việc liệt kê hủy bỏ các mẫu bệnh lý như (a+)+$ trước khi chúng đóng băng tab. Bạn thấy một lỗi giải thích thay vì trình duyệt bị treo, và trang khôi phục ngay lập tức.

Các ứng dụng phổ biến của bộ kiểm tra regex là gì?

Biểu thức chính quy xuất hiện trong phát triển web, bảo mật và công việc dữ liệu — bộ kiểm tra này nhắm đến các trường hợp sử dụng phổ biến nhất:

• Xác thực biểu mẫu: tạo nguyên mẫu một mẫu email, điện thoại hoặc mã bưu chính, dán đầu vào mẫu vào chuỗi kiểm tra và xác nhận rằng mọi trường hợp tích cực đều khớp và mọi trường hợp tiêu cực đều không khớp trước khi bạn đưa mẫu vào mã sản xuất.
• Quét log: dán một đoạn đầu ra log NGINX, ứng dụng hoặc kiểm toán, viết một mẫu với các nhóm có tên cho các phần bạn quan tâm ((?<ip>…) (?<path>…)) và đọc các slot đã bắt cho mỗi khớp để xác nhận parser của bạn là đúng.
• Tìm-và-thay-thế để refactor: sử dụng chế độ Thay thế để viết lại các định danh trong một đoạn — (\w+)\.set(\w+)\( → $1.$2 = biến các cuộc gọi setter thành các phép gán thuộc tính, và bản xem trước trực tiếp hiển thị kết quả trước khi bạn cam kết nó vào một codemod.

Một ví dụ regex trông như thế nào?

Lấy mẫu (\d{4})-(\d{2})-(\d{2}) với cờ g, chạy trên chuỗi kiểm tra release 2025-11-15, prerelease 2026-05-25. Động cơ tìm thấy hai khớp. Khớp đầu tiên là 2025-11-15 với nhóm 1 = 2025, nhóm 2 = 11, nhóm 3 = 15. Khớp thứ hai là 2026-05-25 với cùng hình dạng nhóm. Trong chế độ Thay thế, mẫu thay thế $3/$2/$1 viết lại cả hai ngày thành 15/11/2025 và 25/05/2026 — một chuyển đổi ISO sang DMY chỉ với một mẫu mà bạn có thể xác nhận trực quan trước khi cắm mẫu vào một script.

Sử dụng bộ kiểm tra này như con đường nhanh cho bất kỳ công việc regex nào — xây dựng, gỡ lỗi hoặc viết lại các mẫu. Tất cả chạy cục bộ; không có gì được ghi nhật ký; động cơ regex là động cơ mà trình duyệt của bạn cung cấp, vì vậy hành vi khớp với những gì mã sản xuất sẽ thấy lúc chạy.