According to The Coding Train, a regular expression (regex) is defined as "a sequence of expressions that define a search pattern". What I hope to demonstrate in this exercise is how to use a given regex to seek out and recover a desired set of results and also to decipher for the user the meaning behind all the cryptic alphanumeric characters that comprise regular expressions.
This article will focus on hex values and how to use regex definitions to obtain desired search results.
In this tutorial, we are going to focus on using regular expressions to match hexadecimal values. Hexadecimal codes, often referred to simply as “hex codes”, are codes written in base-16 format. One application for these codes are in web design, where the Unpacking the values contained within the regex coding will explain various facets of the search, sectioned within the Table of Contents.
For this tutorial, we will examine the code /^#?([A-F0-9]{6}|[A-F0-9]{3})$/.
The anchors, otherwise known as assertions, form the begininning and end of the regex line of code cited in Summary. The code once again is as follows:
/^#?([a-f0-9]{6}|[a-f0-9]{3})$/
The / bookends each regex expression; however, there are key differences in characters: ^ and $. The ^ looks for the beginning of a string, and the ? looks for how a string ends. For instance, /^amp could be used to return "ampere" or "ampersand". The anchor are?/ can return "stare" or "Delaware".
These assertions can be very helpful for returning specific words without having to hunt and peck letter by letter.
You can think of the ? as a binary. It describes something as existing or not (0 or 1). The hex code is /^#?([a-f0-9]{6}|[a-f0-9]{3})$/, and you'll notice that the fourth character is preceded by the #, which tells you that the regex is searching for a string that does or does not begin with a number.
Other quantifiers include the numbers in the braces: {6} and {3}. These numbers describe the alphanumeric parameters respectively preceding them. One quantifier requests for a string of 6 occurrences of these alphanumeric characters and the other 3. I will go into the parameters further.
Everything located in the regex between the parentheses is composed of a grouping construct of two separate expressions, which entail the character classes and numeric quantifiers joined by or operators:
([a-f0-9]{6}|[a-f0-9]{3})
This part of the regex lies within the braces, and both are the [a-f0-9]. To fully express this range, you describe it as "a or b or c or d or e or f or 0 or 1 or 2 or 3 or 4 or 5 or 6 or 7 or 8 or 9". Note: the letters are lowercase so uppercase will not satisfy the parameters. The {6} following the first character class asks for an instance of strings satisfying alphanumeric characters in this range. The {3} asks for a string compiling three occurrences in this range.
Within the group construct mentioned previously ([a-f0-9]{6}|[a-f0-9]{3}), you will notice an interesting character nestled between the twin character classes and their respective quantifiers |. This symbol denotes the logical value of "or" meaning that if either of
the two expressions located is satisfied: [a-f0-9]{6} or [a-f0-9]{3}, the regex will match it and return the search value.
Finally, to wrap this tutorial up in a neat little bow, we once again have to look at the whole expression:
/^#?([A-F0-9]{6}|[A-F0-9]{3})$/
To translate the entire value of the regex, we can say: "For a string that may or may not begin with a number, we look for either 6 characters in a row from lowercase a-f and 0-9 or 3 characters in a row from lowercase a-f and 0-9."
Request-Response: The Full-Stack Blog
This tutorial was created and deployed by Sherwin Abraham, an aspiring full stack web developer. To further access an archive of his work, feel free to peruse his coursework with the following link:
GitHub: https://github.com/AbeThomas82/