A Regex, also known as a Regular Expression, is a sequence of characters that specifies a matching pattern in text. It is considered a literal, so the pattern will always be wrapped in slash characters (/). In this gist we will be examing the regex that matches hex values:
/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
A hex value, or hex code, is a six-character code preceded by a #. Sometimes a shorthand comprised of three charactes is used to represent the traditional six characters. In HTML it is used to represent colors. Using hex values is a written way of representing the amount of red, green, and blue in any particular shade of color, and it also visually represents the binary code of that specific color (since we aren't computers).
Let's look at our regex and break it down into components:
/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
^ tells us that this is the start of the pattern. This is also known as an anchor.
# tells us that the expression starts with a #.
? tells us that the preceding item will be present one or zero times. So our hex code cannot have more than one #.
( and ) notate the beginning and end of a group. In our case, we have one group.
[ and ] notate that we are representing a range of characters. In our case, we have two ranges.
a-fincludes lowercase letters a through f in the alphabet (a, b, c, d, e, f).A-Flikewise, the same but for Uppercase charaters.0-9includes whole numbers 0 through 9 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).
| represents an or operator.
{ and } provide a way to set limits to the match we are looking for. In our case, we are limiting the match to exactly 6 or exactly 3 characters, according to the split from the |
$ tells us that this is the end of the pattern. It is also an anchor.
So, we have one Regex that is made for matching a string that starts with a #. That string following the # contains at least one of three character ranges, and it is either 6 or 3 characters long.
The point of using a Regex is mainly to define filters, or validations, related to an input. For instance, if you asked a user to input a hex color code, you would use this regex we just discussed to validate their input as a hex code.
This is a function to validate if a string input is a hex code value, or if it is just gibberish.
function isHexadecimal(string) {
regexp = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/
if (regexp.test(string)) {
return true
} else {
return false
};
console.log(isHexadecimal("#FF0000")) // true. This is the hex code for 'red'.
console.log(isHexadecimal("#f00")) // true. This is also 'red' but using the shorthand 3-character string.
console.log(isHexadecimal("#fb31")) // false, #fb31 is not a hex color code. #fb31 is gibberish.