JSFiddle - React, Tailwind, and code Playground

by greggpollack

HTML

<!DOCTYPE html>
<body>

<h1>Understanding Regular Expressions</h1>
<h2>Level 2 :: Section 1</h2>
<h3>Character Sets</h3>

<p id="1"></p>
<p id="2"></p>
<p id="3"></p>
<p id="4"></p>
<p id="5"></p>
<p id="6"></p>
<p id="7"></p>
<p id="8"></p>
<p id="9"></p>
<p id="10"></p>
<p id="11"></p>
<p id="12"></p>
</body>

JavaScript

//Level 2
//Section 1
//Flexibility with Character Sets

//Problem 1: We want to be able to check how many titles that we have in stock which have authors who have last names that fall under a specific set of letters.


var inventory = "Great Expectations\t\tCharles Dickens\t\t{D29}\n"+
                "The Joy Luck Club\t\tAmy Tan\t\t{T40}\n" +
                "The Joy Luck Club\t\tAmy Tan\t\t{T40}\n" +
                "Starship Troopers\t\tRobert Heinlein\t\t{H72}\n" +
                "Crime and Punishment\t\tFyodor Dostoyevsky\t\t{D43}" +
                "On Beauty\t\tZadie Smith\t\t{S43}" +
                "Midnight's Children\t\tSalman Rushdie\t\t{R35}" +
                "The Hobbit\t\tJ.R.R.Tolkien\t\t{T12}";
 
//We know that we'll need our bracket check to make sure it's an ID we're looking at, but then we have a few letters for which to allow a match. How do we do it?
//Concept 1 - Brackets indicate a choice between a set of options for that particular position.
var regEx = /\{[RST]/g;
document.getElementById("1").innerHTML = "Concept 1: \n" + inventory.match(regEx) + " (" + inventory.match(regEx).length + ")";

//What if we wanted specific ID numbers within those letter ranges? Need another bracket set.
//Concept 2 - Numbers in a bracket are treated as single digits that are independent from each other, rather than as the number you would read altogether. In other words, no tens places, no hundreds places, etc.
var regEx = /\{[RST][43]/g;
document.getElementById("2").innerHTML = "Concept 2: \n" + inventory.match(regEx)+ " (" + inventory.match(regEx).length + ")";

//Of course, if we wanted to find an exact value for a letter range and it was bigger than a single digit, we just back the numbers up to the brackets. The engine now understands you want those numbers in order after a position that has options.
//Concept 3 - Literals in combination with options
var regEx = /\{[RST]43/g;
document.getElementById("3").innerHTML = "Concept 3: \n" +...