explanation of a regex for hex codes

hexThis.md

What the Hex

A gist for explaining the regex used specifically for hex codes.

Summary

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 examining regexes and specifically 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).

Table of Contents

• Anchors
• Quantifiers
• OR Operator
• Character Classes
• Flags
• Grouping and Capturing
• Bracket Expressions
• Greedy and Lazy Match
• Boundaries
• Back-references
• Look-ahead and Look-behind
• Conclusion and Examples

Regex Components

Regexes are composed of several different components that work together to define a search pattern.

Anchors

Anchors match the starting and ending points of a string or line.
^ tells us that this is the start of the pattern. This is an anchor.
$ tells us that this is the end of the pattern. This is also an anchor.

Quantifiers

Quantifiers allow you to specify how many of a character or character class should be matched.
? tells us that the preceding item will be present one or zero times. So our hex code cannot have more than one #.

OR Operator

| represents an or operator.

Character Classes

Character classes allow you to define specific sets of characters that can be used in a search pattern. For our regex, these are:

• a-f includes lowercase letters a through f in the alphabet (a, b, c, d, e, f).
• A-F likewise, the same but for Uppercase charaters.
• 0-9 includes whole numbers 0 through 9 (0, 1, 2, 3, 4, 5, 6, 7, 8, 9).

Flags

Flags are a set of instructions that modify the behavior of a regex, denoted by using a single lowercase alphabet character. There are 6 flags in JavaScript regex. We do not have any flags in our regex.

Grouping and Capturing

Capturing groups are a way to treat multiple characters as a single unit. They are created by placing the characters to be grouped inside a set of parentheses. ( and ) notate the beginning and end of a group. In our case, we have one group.

Bracket Expressions

Brackets indicate a set of characters to match. [ and ] notate that we are representing a range of characters. In our case, we have two ranges (one before the or operator, one after), although technically the ranges are identical.

Greedy and Lazy Match

'Greedy' means match longest possible string. 'Lazy' means match shortest possible string. Our regex has greedy quantifiers:
? tells us that the preceding item will be present one or zero times.
{ 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 |

Boundaries

Boundary markers such as ^ and $ allow you to anchor the regex pattern to the beginning and end of the line. This means that when you want to match a literal ^ or $ , you need to escape these special characters with a backslash, as seen adjacent to our anchors in our regexp sample.

Back-references

back-references are regular expression commands which refer to a previous part of the matched regular expression. Back-references are specified with backslash and a single digit (e.g. ' \1 '). We do not have any backreferences in our sample.

Look-ahead and Look-behind

When we need to find matches for a pattern that are followed or preceded by another pattern, we use this syntax. Also known collectively as 'look-around'. We do not have any of these in our sample.

Conclusion and Examples

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) {
var 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.

Author

A simple gist, by js-Quest