Xác thực mã màu RGB và mã màu HEX sử dụng Regex trong Javascript

Gần đây, tôi có làm một ứng dụng đơn giản về màu sắc. Trong đó, tôi có thể nhập mã màu RGB, mã màu HEX để hiển thị màu. Hay tôi có thể lấy được mã màu của một điểm trên một bức ảnh được upload. Các bạn có thể tham khảo ứng dụng đó ở đây.

Khi phát triển ứng dụng, tôi gặp phải một bài toán đó là: khi người dùng nhập một mã màu RGB hay mã màu HEX thì tôi phải kiểm tra tính chính xác của mã màu đó.

Có hai cách để xác thực mã màu RGB và mã màu HEX:

  1. Xây dựng thuật toán xử lý chuỗi string thoả mãn điều kiện bài toán
  2. Sử dụng Regular Expression (Regex) trong Javascript.

Cách thứ nhất có thể làm được, nhưng chắc chắn sẽ rất phức tạp. Bạn sẽ phải xử lý rất nhiều trường hợp. Do đó, tôi lựa chọn cách thứ hai. Trước khi bắt đầu, ta sẽ tìm hiểu xem Regex là gì?

1. Tổng quan về Regex

Regex là viết tắt của Regular Expression (một số tài liệu viết tắt là RegExp). Regex là đối tượng dùng để miêu tả khuôn mẫu (pattern) của một chuỗi kí tự. Do đó, Regex dùng để tìm kiếm theo khuôn mẫu (pattern-matching) hay tìm kiếm và thay thế (search-replace) trong dữ liệu text.

Cú pháp

Ví dụ:

  • /www/i: là một Regex
  • www: là một pattern (khuôn mẫu) để tìm kiếm
  • i: là modifier (thành phần bổ sung), giúp tìm kiếm mà không phân biệt chữ hoa và chữ thường.

Chi tiết về Regex, bạn có thể tham khảo tại đây. Còn bây giờ tôi sẽ giải thích cách kiểm tra tính xác thực mã màu RGB và xác thực mã màu HEX sử dụng Regex trong Javascript.

2. Xác thực mã màu RGB sử dụng Regex trong Javascript

Mã màu RGB chính xác là: rgb(a, b, c) với 0 <= a, b, c <= 255. Do đó, hàm kiểm tra xác thực của mã màu RGB như sau:

Trong đó:

  • ^: bắt đầu chuỗi Regex
  • $: kết thúc chuỗi Regex
  • (\d{1,3}): là một cụm kí tự gồm các chữ số hệ thập phân, có độ dài từ 1 đến 3 kí tự
  • matchColors.exec(rgbText): bắt đầu thực hiện kiểm tra khuôn mẫu với chuỗi đầu vào
  • Kết quả: matchRGB là một object với matchRGB[1], matchRGB[2], matchRGB[3] lần lượt là giá trị của 3 cụm – tức là giá trị R, G, B. Vì giá trị R, G, B là <= 255 nên nếu giá trị thu được mà > 255 thì coi như không hợp lệ.

Ví dụ:

  • rgbText = “rgb(23, 132, 1)”: khi đó matchRGB[1] = 23, matchRGB[2] = 132 và matchRGB[3] = 1. Kết quả là hợp lệ.
  • rgbText = “rgb(83, 143, 280”); khi đó matchRGB[1] = 83, matchRGB[2] = 143 và matchRGB[3] = 280. Lúc này tồn tại một giá trị > 255 nên kết quả là không hợp lệ
  • Các trường hợp không hợp lệ: rgbText = “rgb(8 143, 32)” , rgbText = “rg(43, 23, 11)”, rgbText = “rg(43, 23, 11”,…đều sai định dạng nên kết quả trả về là NULL.

3. Xác thực mã màu HEX sử dụng Regex trong Javascript

Mã màu HEX chính xác là: #xxxxxx hay #xxx với x thuộc từ [0, 9], [a-f] hoặc [A-F]. Tương tự như việc xác thực mã màu RGB, hàm kiểm tra tính xác thực của mã màu HEX là:

Trong đó:

  • ^: bắt đầu chuỗi Regex
  • $: kết thúc chuỗi Regex
  • ([0-9a-fA-F]{1,2}): là một cụm kí tự từ 0 đến 9, hoặc từ a đến z hay từ A-Z, có độ dài từ 1 đến 2 kí tự.
  • matchColors.exec(hexText): bắt đầu thực hiện kiểm tra khuôn mẫu với chuỗi đầu vào
  • Kết quả: matchHEX là một object với matchHEX[1], matchHEX[2], matchHEX[3] lần lượt là giá trị của 3 cụm – tức là giá trị R, G, B ở cơ số 16.

Ví dụ:

  • hexText=”#ff00ff”: khi đó matchHEX[1] = 0xff, matchHEX[2] = 0x00, matchHEX[3] = 0xff. Và kết quả là hợp lệ
  • hexText=”#xyzabc”, hexText=”3432″,…đều không hợp lệ và giá trị trả về là Null.

Tổng kết

Trên đây là những tóm tắt về việc sử dụng Regex trong Javascript. Trong đó, chuỗi Regex để xác thực:

  • RGB: /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/
  • HEX: /^#([0-9a-fA-F]{1,2})([0-9a-fA-F]{1,2})([0-9a-fA-F]{1,2})$/

Thực tế, Regex được áp dụng trong rất nhiều trường hợp khác nữa và cú pháp cũng khá phức tạp. Hy vọng, bài viết này có thể giúp bạn biết phần nào về Regex.

LP Devs.

1 bình luận

  1. LP Devs Post authorReply

    Trên đây là giới thiệu cơ bản về Regex, cùng với hai đoạn code Regex dùng để xác thực mã RGB và HEX.

    Hy vọng bạn thấy bài viết này hữu ích. Nếu có, vui lòng để lại bình luận phía dưới nhé.
    LP Devs.

Leave a Reply

Your email address will not be published. Required fields are marked *