Visualize Regular Expressions with Marbles
If you are one of those people who visualize things physically better than in the abstract, then Regex Marble Run by [bottomless] might be for you. You enter a test expression and a string, and the site generates a virtual marble machine that lets you see the regular expression pick apart the string in a physical way.
Click this link, and youβll see the regular expression β^[hH]ack.[dD][^0-9]*$β which, if you arenβt a regular expression user, might seem a bit cryptic. However, it is fairly simple if you take it bit-by-bit.
The caret character tells it to match the start of the string. So β^dogβ will match βdogβ and βdog foodβ but wonβt match βfood for a dog.β The following bit β[hH]β will match either βhβ or βHβ. Then there is βackβ which is just what you think it is. So a string starting with βhackβ or βHackβ might match (depending on the rest of the expression.
The period means match any single character. Then thereβs another β[]β but this time with βdDβ to match any kind of D. The next β[]β character class is a range from 0-9, but since there is a caret, the match is negated. So β[^0-9]β means match anything except a digit from 0 to 9. The β*β means we can have zero or more of these. So βHackxDβ matches, but so does βHackxDXYZabcβ for now. Trick question: Does βHackxDXYZabc123β match? So far, yes, but it only matches to the lowercase βcβ character.
The final character, β$β means end of string. So now βHackxDXYZabc123β does not match because we are still in the middle of the string. However, βHackxDXYZabcβ will match since the previous β*β βateβ the rest of the string.
Head spinning? The site will let you see each letter of a test string as a marble that falls through the different parts of the regular expression. Balls that pass wind up in the left-hand box, while failures are in the right-hand box. Will it help you? We donβt know, but it is fun to watch.
Want a refresher on regular expressions? Or perhaps you want some practice?