The purpose of this regex tutorial is to gain a deeper understanding about regular expressions and explain how the regex to match a hex value is created and used.
The constraints for the following regex include starting wih the # symbol, followed by letters from a-f, A-F and/or digits from 0-9. The length of the hex code can be 3 or 6 characters, excluding the # symbol.
Matching a Hex Value Regex: /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
Both anchors ^ and $ appear in the regex to match a hex value.
The ^ symbol signifies that the string begins with the character that follows it. In this case the string will begin with #
The $ symbol signifies that the string will end with the characters that precede it. In this case the matching string pattern will end after #, followed by a combination of letters and numbers.
? {6} {3}
The first quantifier denoted as ? matches the pattern once or not at all. The final hex value can optionally include # or not followed by characters.
Two quantifiers appear in the regex that dictate the length of characters after the # symbol. The first iteration is six ({6}) characters. The second iteration is three ({3}) characters.
No other possible combinations of character lengths between three and six exist. The character length is either 6 or 3
([a-fA-F0-9]{6}|[a-fA-F0-9]{3})
The majority of the regex is a grouped construct. Multiple parts of the string can be checked to determine if each or none of the parts match.
The first part of the sub expression ([a-fA-F0-9]{6}) expects six characters chosen from letters a-f, A-F and numbers 0-9.
The second part of the sub expression ([a-fA-F0-9]{3}) expects three characters chosen from letters a-f, A-F and numbers 0-9.
[a-fA-F0-9]
The range of characters is displayed inside the square brackets []. In this case, characters included in the hex value can be letters a, b, c, d, e, f, A, B, C, D, E, F and numbers 0, 1, 2, 3, 4, 5, 6, 7, 8, 9
This range of characters is included in both iterations of the hex value (three or six characters in length).
There are currently no character classes in the regex but it can be rewritten to include character classes.
[a-fA-F0-9] can be rewritten as [a-fA-F\d]
([a-fA-F0-9]{6}|[a-fA-F0-9]{3})
The OR operator, denoted with | allows the regex to check if the hex value has six or three characters. The OR operator allows to test both sub expressions.
Sara Baqla is currently a web development bootcamp student at UT Austin. Her background includes music, ecology and public education.
Github username: missatrox44
Email: missatrox44@gmail.com