A Regex (regular Expression) is a snippet of code that is used to extract bits of information from any field of text. It accomplishes this by setting up key parameters to search for within a body of text. A regex is a very powerful tool and can be used in almost all programable languages like JavaScript, Java, VB, Python, and many more!
The regex that we will be looking at in this gist is for hex colors. A hex color is a representation of various colors that follows a specific hexadecimal integer count so it is fairly easy to keep track of. The regex to search for a hex color code will be: ^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$. Bellow we will break apart the different parts of this regex so that we can better understand what is being shown.
- Anchors
- Character Classes
- Grouping and Capturing
- Bracket Expressions
- Quantifiers
- OR Operator
- Character Classes
^#([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$
Anchors can be thought of as a type of book end. They are symbols that display the beginning and end of a search criteria for any particular regex. In the hex color regex we use the symbol '^' to show the beginning of thie string and '$' to show the end of the string.
Characters describe each individual symbol within the string. Sometimes, there is a set character which is expected to be set in place. In the case of the hex color regex the '#' symbol at the beginning is indicative of the pound symbol that is always located at the beginning of the hex color string. On the other hand most of the characters will appear within the capturing group and will be presented as a range of characters that can be search for such as 'a-f' or '0-9' in the hex color regex.
Grouping allows us to specify what we are trying to extract when searching with our regex. Like in the hex color regex parentheses () are used most commonly to group the characters together. All of the data within the parantheses will be lumped together in the search.
Bracket expressions [] are used to select a specific string of data that will be searched for together. As you can see in the hex color regex example there are two different bracket expressions showing us two different sets of strings being searched for.
Quantifiers are exactly what they sound like, it quantifies the exact number of characters being searched for within a string using curly brackets {}. In the case of the hex color regex we have two separate quantifiers one is {6} which searches for a string that is six characters long, while the other {3} searches for a string three characters long.
The OR operator '|' is used to define that there are more than one string option to search for. In the case of the hex color regex it shows us that there are actually two different type of hex color strings to look out for, and allows for either style to appear as a match.
Kyle Kilmartin is an up and coming full stack developer that is working on his skills every day! He's glad youve taken the time to read this gist on the hex color regex. If you feel like seeing more of his work check out his GitHub page!