This tutorial will explain the various Regular Expressions/RegEx using HEX values. Regular Expressions are sequences of characters that are used to find certain patterns of characters within a string, or to find and replace a character or sequence of characters within a string. Uses of RegEX include validating user input in HTML fields, finding keywords in webpages, and verifying and parsing text in files, code and applications.
This tutorial will use the following regular expression used to match HEX values as an example:
`/^#?([a-f0-9]{6}|[a-f0-9]{3})$/`
(Code snippets reference the above expression.)
"Hex colors are a way of representing colors from various color models through hexadecimal values. A hexadecimal color follows the format #RRGGBB, where RR is red, GG is green, and BB is blue. These hexadecimal integers can be in a range of 00 to FF to specify the intensity of the color." - Shutterstock
designated character(s): ^ $
used to match text at the start (^) of a string and the end of a string ($).
code snippet: /^...$/
Example: ^First and last$ => string must exactly match | ^first => finds string begin with 'first' | last$ => finds string that ends with 'last'
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - string must begin with # since it is preceded by ^ and should contain at least 3 characters where {3} is followed by $. See Quantifiers for further explanation of {}.
designated character(s): {}
used to match exact quantity or a quantity range.
code snippet: {6} {3}
Example: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - the first quantifier {6} indicates that there should be exactly 6 characters ranging from a-f and 0-9. The second quantifier {3} in our HEX example indicates that OR 3 characters ranging from a-f and 0-9 since it is separated by the pipe(bar) symbol |.
designated character(s): ?
used to indicate that the preceding character(s) is optional in the match.
code snippet: /#?
Example: This could be used to find instances of both the British and American spelling in a string - humour or humor would be homou?r.
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - matching the # is an option.
designated character(s): |
used to allow the option of matching character before OR after the | symbol.
code snippet: ...{6}|[a-f0-9]...
Example: cat|dog|mouse would match cat, dog, or mouse.
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - matching 6 characters in the range of [a-f0-9] is one option OR matching 3 characters in the range of [a-f0-9] is the other possible match.
designated character(s): []
used to match any of the enclosed characters from a range or a series within []
code snippet: [a-f0-9]
we can also negate a character set by using the anchor symbol ^ before a set of characters, ie. [^0h2] would match any character that is NOT 0, h, or 2.
Example: [abc] would match a - in cat, b - in bubbles, or c - in cactus.
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - looks for a range of letters [a-f] and numbers [0-9] in a HEX value.
designated character(s): ()
grouping of characters is accomplished using open and closed parentheses and allows for limitations in Alternation.
code snippet: ([a-f0-9])
Example: 'Do you prefer (beaches|mountains)?' => will first match 'Do you prefer' then match either 'beaches' or 'mountains'.
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/ - using grouping to enclose the range of characters in our HEX value searches for 6 OR 3 sets of charactes provided in our range.
Jennifer Lindsey
If you have any questions, reach out to me on Git Hub https://github.com/JJLindsey, or send me a message jlindsey010@gmail.com.
©Jennifer Lindsey 2021