Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Những Công Cụ Dành Cho Regex

Những Công Cụ Dành Cho Regex


Ngày 8 Tháng 11 Năm 2020

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é:

Ví Dụ Về Regex

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 thẻ hình ảnh bằng regex

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 comment html bằng regex

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 url trong trang web

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 hex color trong trang web

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 thuộc tính CSS trong trang web

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 IPv4

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 IPv6

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 Date Dạng DD/MM/YYYY

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é:

Kiểm Tra Loại Hình Ảnh

Một Số Bảng Regex Cheatsheet

Regular Expressions Cheat Sheet by DaveChild

Regular Expressions Cheat Sheet by DaveChild

Nguồn

JavaScript Regex Cheatsheet Debuggex

JavaScript Regex Cheatsheet Debuggex

Nguồn

Regexp Cheatsheet devhints

Regexp Cheatsheet devhints

Nguồn

Regular expression syntax cheatsheet MDN

Regular expression syntax cheatsheet MDN

Nguồn

Regex Cheatsheet OverAPI

Regex Cheatsheet OverAPI

Nguồn

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

Công Cụ RegExr

Công Cụ RegExr

Nguồn

Công Cụ Regex101

Công Cụ Regex101

Nguồn

Công Cụ Debuggex

Công Cụ Debuggex

Nguồn

Công Cụ Regulex

Công Cụ Regulex

Nguồn

Công Cụ Regextester

Công Cụ Regextester

Nguồn

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

Regexone

Regexone

Nguồn

Regular Expression W3resource

Regular Expression W3resource

Nguồn

Regex HackerRank

Regex HackerRank

Nguồn

The regular expression game

The regular expression game

Nguồn

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

Thư Viện Tra Cứu Regexlib

Regexlib

Nguồn

Rexegg Tutorial

Rexegg Tutorial

Nguồn

Regular-expressions info

Regular-expressions info

Nguồn

Regular expressions Javascript info

Regular expressions Javascript info

Nguồn

Regex Hub

Regex Hub

Nguồn

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ẻ!