正则表达式匹配 3 或 6 类型

Question

I'm writing an application that requires color manipulation, and I want to know when the user has entered a valid hex value. This includes both '#ffffff' and '#fff', but not the ones in between, like 4 or 5 Fs. My question is, can I write a regex that determines if a character is present a set amount of times or another exact amount of times?

What I tried was mutating the:

/#(\d|\w){3}{6}/

Regular expression to this:

/#(\d|\w){3|6}/

Obviously this didn't work. I realize I could write:

/(#(\d|\w){3})|(#(\d|\w){6})/

However I'm hoping for something that looks better.

Answer 1

You can use this regex:

/#[a-f\d]{3}(?:[a-f\d]{3})?\b/i

This will allow #<3 hex-digits> or #<6 hex-digits> inputs. \\b in the end is for word boundary.

RegEx Demo

Answer 2

The shortest I could come up with:

/#([\da-f]{3}){1,2}/i

Ie # followed by one or two groups of three hexadecimal digits.

Answer 3

I had to find a pattern for this myself today but I also needed to include the extra flag for transparency (ie #FFF5 / #FFFFFF55). Which made things a little more complicated as the valid combinations goes up a little.

In case it's of any use, here's what I came up with:

var inputs = [
  "#12", // Invalid
  "#123", // Valid
  "#1234", // Valid
  "#12345", // Invalid
  "#123456", // Valid
  "#1234567", // Invalid
  "#12345678", // Valid
  "#123456789" // Invalid
];

var regex = /(^\#(([\da-f]){3}){1,2}$)|(^\#(([\da-f]){4}){1,2}$)/i;

inputs.forEach((itm, ind, arr) => console.log(itm, (regex.test(itm) ? "valid" : "-")));

Which should return:

#123 valid
#1234 valid
#12345 -
#123456 valid
#1234567 -
#12345678 valid
#123456789 -