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.

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.

• javascript
• regex
• hex

• 1 (\d|\w) will match a lot of characters that aren't valid hex digits. Try [\da-f] (or [\dA-Fa-f]). – Biffen Commented Feb 10, 2016 at 14:22
• Note that what anubhava and biffen suggest is not expandable. The alternation you use /(#(\d|\w){3})|(#(\d|\w){6})/ (the regex is bad, but the idea is correct) is. – Wiktor Stribiżew Commented Feb 10, 2016 at 14:44
• @WiktorStribiżew Could you expand on that? – Biffen Commented Feb 10, 2016 at 14:51
• @Biffen: You cannot use your approach to match exactly 2 digits or exactly 5 digits or exactly 14 digits. – Wiktor Stribiżew Commented Feb 10, 2016 at 14:58
• @WiktorStribiżew Ah, I see what you mean. – Biffen Commented Feb 10, 2016 at 14:59

3 Answers 3

The shortest I could e up with:

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

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

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

I had to find a pattern for this myself today but I also needed to include the extra flag for transparency (i.e. #FFF5 / #FFFFFF55). Which made things a little more plicated as the valid binations 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 -