Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu những đoạn mã snippet và công cụ dành cho RegEx(Regular Expression) trong lập trình và phát triển web nhé!
Regular Expression Là Gì?
Regular Expression (biểu thức chính quy) là một công cụ mạnh mẽ trong việc tìm kiếm và thay thế nội dung, tìm các ký tự mong muốn trong chữ hay để xác nhận dữ liệu (data validation) như là email, số điện thoại, IP... Và nó có điểm đặc biệt mà mình cảm thấy rất thích là có thể sử dụng cho nhiều ngôn ngữ lập trình khác nhau như là Javascript với tên gọi là Regular Expression object , Java (java.util.regex.Pattern), PHP (preg_match), Python(re)...
Nếu bạn muốn tìm hiểu các ngôn ngữ khác có thể sử dụng regular expression thì có thể truy cập ở đây nha.
Để nắm rõ hơn thì bạn hãy xem cách mình tìm email thông qua việc sử dụng regex nhé:

Nhưng thật sự phải nói là học để hiểu hết các quy tắc và cách viết mã của regex đối với người mới bắt đầu như mình thì sẽ rất khó. Nó đòi hỏi cần phải có thời gian được thực hành cũng như hình thành cách suy luận với các quy tắc regex để giải quyết vấn đề. Do đó trong bài viết hôm nay mình sẽ giới thiệu đến bạn những đoạn mã hữu ích(code snippet) cho regex hay được sử dụng, các cheatsheet, các công cụ và khóa học miễn phí dành cho regex nhé!
Các Đoạn Mã Regex Hay Sử Dụng Trong Lập Trình
Kiểm Tra Thẻ Hình Ảnh Trong Trang web
Đoạn mã Regex:
<img[^>]*src="?([^"]*)"?([^>]*alt="?([^"]*)"?)?[^>]*>
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra HTML Comment
Đoạn mã Regex:
<!--(.*?)-->
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra Đường Dẫn Trong Trang Web
Đoạn mã Regex:
/[[email protected]:%_+.~#?&//=]{2,256}.[a-z]{2,4}b(/[[email protected]:%_+.~#?&//=]*)?/gi
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra Hex Color
Đoạn mã Regex:
/^#?([a-f]|[A-F]|[0-9]){3}(([a-f]|[A-F]|[0-9]){3})?$/gm
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra Thuộc Tính CSS
Đoạn mã Regex:
/s*[a-zA-Z-]+s*[:]{1}s[a-zA-Z0-9s.#]+[;]{1}/gm
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra IPv4
Đoạn mã Regex:
/b(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?).){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)b/gm
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra IPv6
Đoạn mã Regex:
/(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))/
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra Date Dạng DD/MM/YYYY (Ngày/Tháng/Năm)
Đoạn mã Regex:
/^(?:(?:31(/|-|.)(?:0?[13578]|1[02]))1|(?:(?:29|30)(/|-|.)(?:0?[1,3-9]|1[0-2])2))(?:(?:1[6-9]|[2-9]d)?d{2})$|^(?:29(/|-|.)0?23(?:(?:(?:1[6-9]|[2-9]d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1d|2[0-8])(/|-|.)(?:(?:0?[1-9])|(?:1[0-2]))4(?:(?:1[6-9]|[2-9]d)?d{2})$/gm
Kết quả bạn xem hình ảnh bên dưới nhé:

Kiểm Tra Loại Hình Ảnh
Đoạn mã Regex:
/^.+.(jpg|jpeg|png|gif|bmp|svg|webp)$/gim
Kết quả bạn xem hình ảnh bên dưới nhé:

Một Số Bảng Regex Cheatsheet
Regular Expressions Cheat Sheet by DaveChild

JavaScript Regex Cheatsheet Debuggex

Regexp Cheatsheet devhints

Regular expression syntax cheatsheet MDN

Regex Cheatsheet OverAPI

Một Số Công Cụ Kiểm Tra Regex
Công Cụ RegExr

Công Cụ Regex101

Công Cụ Debuggex

Công Cụ Regulex

Công Cụ Regextester

Một Số Bài Tập Về Regex
Regexone

Regular Expression W3resource

Regex HackerRank

The regular expression game

Một Số Bài Viết Và Thư Viện Hữu Ích cho Regex
Thư Viện Tra Cứu Regexlib

Rexegg Tutorial

Regular-expressions info

Regular expressions Javascript info

Regex Hub

Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những thông tin, công cụ, trang web về regex hữu íchdành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!