Regular expressions (regex) allow us to search more dynamically through documents. They are a sequence of characters that define a search pattern. While the search patterns can seem intimidating when you look at them as a whole, they are simple to understand when breaking them into manageable parts. This tutorial will describe each literal and meta character in a code snippet example and how regex functions when matching a Hex Value.
The regex this tutorial will explore is when you want to match a Hex Value. To understand how the code snippet works, we will break down each component both literal and meta characters, to help us understand how the regex works. The code snippet we will work through in this tutorial is: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
What are Hex Values? Hexadecimal values (Hex Values) are ways in which colors can be represented in computing and digital systems. They are often represented by a combination of letters [a-f] and numbers [0-9]. However, hex values are also not limited to just colors; they can be used to represent other data types such as binary values, ASCII characters, and memory addresses. This allows us to manipulate large binary values.
- Regex Components
- Regex Code Snippet: Breakdown Table
- Author
- Sources
First, we want to look at slash characters / and recognize their importance. When working with regex, it is important to know that it is literal. Because of this, the regex needs to be wrapped using /. This will indicate the beginning and end of the regex.
- Note that our regex uses these characters at the beginning and end of the expression:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
Anchors are ways we can specify what the regex will look for. We have both uses of anchors in our example; the carat ^ is located at the beginning and the dollar sign $ is located at the end of our regex code snippet. Both have specific jobs when being used:
- The carat
^anchor at the beginning of our expression indicates the pattern must appear at the start of the string. - The dollar sign
$anchor at the end of our expression indicates that the pattern must appear at the end of the string.
Quantifiers indicate the element before it is either optional or occurs at least once. Within our code snippet, we use the ? and {n} quantifiers to show that we want to specify the number or range of occurrences of the preceding element that should match. We have two uses of quantifiers in our code snippet: ? and {n}.
?: Matches an optional '#' character at the beginning of the line.{6}{3}: Indicate the exact length of the preceding group; either six (6) or three (3) characters.
Grouping constructs ( ) within regex are used when we want to group parts of a pattern. When we do, they are defined as a group and are as a single unit. If there are characters within the parentheses they should be treated as one.
([a-f0-9]{6}|[a-f0-9]{3}): We are capturing the group so we can reference the matched text within the parentheses.
Bracket expressions [ ] indicate a set of characters we want to match. In our code snippet example, their purpose allows us to search for a range of hexadecimal characters. Whatever is within the [ ]'s will be matched; we can say we want an individual character, or we can have a range of characters.
[ ]specifies we want to search for something specific or within a range.
Character classes allow us to indicate which characters we want to include within our expression. While there are several different types, our code snippet works with ranges. With ranges, you can define a range of characters you want using a hyphen (-) within the class of characters you'd like to use. The characters are placed within our bracket expressions mentioned above.
a-f: We want to search for lowercase letters between a-f.0-9: We want to search for digits between 0-9.
The OR operator | is represented by a pipe symbol. This will allow us to specify multiple alternatives for searching and matching. When working with this, we want to make sure that we understand how it functions within our expression. We see the OR operator | appear within our grouping construct of the code snippet: ([a-f0-9]{6}|[a-f0-9]{3})
- The first option
[a-f0-9]{6}is a group of six (6) characters that can be any letter or number a-f or 0-9. - The second option
[a-f0-9]{3}is a group of three (3) characters that can be any letter or number a-f or 0-9. - The OR operator is being used to allow us to match with either a
{6}character group OR a{3}character group.
Now that we understand how our code snippet works while it is all broken down, let's look at how it works when the literal and meta characters are together.
Whole Code Snippet: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/
| Literal/Meta Characters | Section of Snippet | Explanation |
|---|---|---|
| Slash Characters | / |
This is the beginning and end of the regex. |
| Anchor | ^ |
How the pattern should appear at the beginning of the string. |
| Anchor | $ |
How the pattern should appear at the end $ of our string. |
| Literal Chartacter | '#' | This is a literal character, we want to have '#' used in our matching. |
| Quantifier | ? |
Matches an optional '#' character at the beginning of the line. |
| Quantifier | {6} |
The exact length of the preceding group is to be six (6) characters. |
| Quantifier | {3} |
The exact length of the preceding group to be three (3) characters. |
| Grouping Constructs | ( ) |
The information within the parenthesis is to be treated as a single unit. |
| Bracket Expressions | [ ] |
Specifies we want to search for something either specific or within a range. |
| Character Classes (alpha) | a-f |
We want to search for lowercase letters between a-f. |
| Character Classes (numerical) | 0-9 |
We want to search for digits between 0-9. |
| The OR Operator | Vertical pipe | Allows us to have either six (6) characters OR three (3) within our match. |
TLDR; The regex example provided will match strings that represent hex values that allow for an optional '#' literal character followed by a group of six (6) or three (3) hexadecimal characters.
My name is Stephanie, and I am a student through UNC-Chapel Hill Full-Stack bootcamp. I am always eager to learn and help others learn as well! Feel free to reach out if you have any questions!
Github
LinkedIn
Many sources were referenced during the research of this particular expression. These sources included accessing articles provided through the bootcamp itself in the homework explaination; The Full-Stack Blog and a YouTube video from The Coding Train. Additional articles I read through were sourced by Medium, IBM, and Hscripts. Guidance resources came from my student advisor, Lisa, and via class sessions with my instructor, Josh.