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]:%_+.~#?&//=]*)?/giKế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})?$/gmKế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}/gmKế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/gmKế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})$/gmKế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)$/gimKế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ẻ!