Regex (Regular Expressions) are a series of special characters used to define a search pattern. Hex values are typically used to identify colors, though they have other uses as well. This Gist was created to serve as a tutorial for understanding the components of regular expressions!
Hex values are typically used to identify elements such as color. You may have seen them in CSS files or even in the paint section at home improvement stores!
These values begin with a # followed by a mix of six numbers or letters.
An example of a HEX value can be seen below:
#ffff00 > This would be the Hex value for the color yellow.
The regex search pattern for these values would include all possible values of these Hex values.
An example of a regex search pattern for Hex values can be seen below:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
regex are considered literals therefore they must be wrapped in slash characters / !
- Anchors
- Quantifiers
- OR Operator
- Character Classes
- Flags
- Grouping and Capturing
- Bracket Expressions
- Greedy and Lazy Match
- Author
Though these search values may seem like a mess of characters, they are easily understood when broken down by their components. Below we will explore each of these components for the regex above!
Anchors are used to state where the string begins and ends in a search pattern.
^ is used to determine where a string begins. The character following this will be the beginning of our search target.
$ is used to determine the end of our string. The character before this will be the end of our search target.
Lets examine the regex from earlier:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
In this regex, the search target will begin with # and end with ([a-f0-9]{6}|[a-f0-9]{3}).
Now that we have an understanding of our beginning and end, lets dive deeper into the regex by understanding quantifiers.
Quantifiers are used to determine the search limit of your regex. They are used to determine if the target matches the pattern a certain amount of times. Often times, quantifiers are used to determine the minimum or maximum number of characters your regex is trying to find.
examples of quantifiers are:
*(used to determine if the pattern matches zero or more times).+(used to determine if the pattern matches one or more times).?(used to determine if the pattern matches zero or one time).{}(curly brackets used to determine a certain number of times).{ n }determines if a pattern matches exactlynnumber of times.{ n, }determines if a pattern matches AT LEASTnnumber of times.{ n, x }determines if the pattern matches a minimum ofnand maximum ofxnumber of times.
In our regex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/, we have a few quantifiers.
- we begin with
?to determine if the following search pattern will match zero or one time. - next, the
{6}determines if we will match the preceding pattern[a-f0-9]exactly6times. - after that, the
{3}determines if we will match the preceding pattern[a-f0-9]exactly3times.
This may seem confusing as we are searching the same pattern different amount of times. This is where the OR operator comes in.
The OR operator (represented by the character |) is used to give the regex the option to look for either one of the search values.
With our regex example, we are asking the search pattern to look for EITHER a 6 character HEX value or a 3 character Hex value.
Character classes are used to define a set of characters that will fulfill a match to our regex search pattern.
In our regex example, /^#?([a-f0-9]{6}|[a-f0-9]{3})$/, the [] square brackets determine our character class, sometimes also called a character set.
Lets break down our current character set:
[a-f0-9]is used to determine if our search pattern matches the charactersa-fand numbers0-9.- Remember that Hex values are typically a mix of characters a-f and numbers 0-9.
- Our Hex value example of yellow being
#ffff00. Another Hex value example is teal being#43a5be.
Flags are typically used as an additional search parameter which is placed after the / literal. Examples of flags can be seen below:
grepresents the Global search. This means the regex will be tested against all possible matches in a string.irepresents the Case-Insensitive search. This means the regex will ignore case-sensitive matching in a string.mrepresents the Multi-Line search. This means multiple line strings will be treated as multiple searches instead of one long search.
Grouping and capturing is used to group together search patterns to help the regex determine a match. The groups are declared by the () parentheses characters.
- In our regex,
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/, we group the pattern[a-f0-9]{6}|[a-f0-9]{3}. - In simple terms, our grouping will look for a-f/0-9 six times OR a-f/0-9 three times.
Bracket expressions are used to determine matches that match a specific pattern of characters stated within the brackets [].
- As mentioned in the above character class component,
[a-f0-9]will search for matches that fulfill characters a-f and/or numbers 0-9.
Greedy and lazy matches determine if the regex will search for longest or shortest possible string matches.
- In regular expressions, quantifiers are inherently greedy meaning they will match as many possible pattern as they can.
- Quantifiers can be made lazy by adding the
?question mark symbol after them to change the search to look for as few possible pattern matches as they can.
This regex tutorial was created by Ian Vignolles-Jeong.
The goal of this tutorial was to allow other developers further their understanding in HEX value regular expressions as well as well as personally develop a better understanding on the topic through research.
I am a full-stack developer with experience in front-end (JavaScript, CSS, HTML) as well as back-end(Node.js, MySQL/NoSQL, Sequelize, Mongoose) technologies.
For examples on past, current, and future projects, please visit my GitHub profile to view my work!
What a great tutorial. 100%!