Visualize Regular Expressions with Marbles

Diablo

New member
marble.png


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?
 
Back
Top