REAL-WORLD CHALLENGES
Hex colors
Match CSS hex colors with sets, counts, alternation and a boundary.
Match CSS hex colors: a # followed by exactly three or exactly six hex digits. "#fff" and "#1a2b3c" are colors. "#12345" is not, and neither is "#xyz".
Think in pieces: a hex digit is [0-9a-fA-F]. Exactly six or exactly three needs alternation - and try six FIRST, because the engine takes the first branch that fits and {3} would happily match the first three of six digits. Close with \b so five digits cannot pass as three-plus-garbage.
PRACTICE - 2 DRILLS 0/2 DONE
Match valid 3- or 6-digit hex colors, # included.
/ /
color: #fff;
must match: "#fff"
background: #1a2b3c
must match: "#1a2b3c"
shade #ABC border
must match: "#ABC"
bad: #12345
must match nothing
bad: #xyz
must match nothing
Match every CSS rgb() color value, like rgb(255, 0, 128).
/ /
div { color: rgb(255, 0, 128); } must match: "rgb(255, 0, 128)"
a rgb(0,0,0) and rgb(12, 200, 7)
must match: "rgb(0,0,0)" "rgb(12, 200, 7)"
rgba(1,2,3,0.5) only
must match nothing
no color here
must match nothing