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?

16 thoughts on “Visualize Regular Expressions With Marbles”

  1. Fantastic idea. Even without the marbles, just displaying which input character is being matched to which bit of the regex could make it much easier to understand what’s going on and fix bugs. Stepping through (forward and back) the process is a bonus feature that makes it even better.

  2. REGEX has always confused me, and now I know why!

    “The caret character tells it to match the start of the string”, but on the other hand “since there is a caret, the match is negated”. Also, “The period means match any single character”, when I’ve been wasting my time with a question mark for any single character. Jeesh! Who invented this system of coding, and why didn’t they stop after their third alcoholic beverage?

  3. Now I know why certain retail operations’ websites are so appallingly bad, returning every item that matches any word in the search string, in order of… something…possibly the solar flux gradient on Olympus Mons.

    1. I swear I’ve had some so bad that they will match words that are inside other words.

      Then the only way to get around that sort of thing is to use categories and filters to properly limit the search. However, most of these retailers either are shit at entering proper tags or allow 3rd parties and don’t bother to either require proper tagging or do it themselves.

      Gets really annoying when you want to filter something like “1/2 in” and there are also categories for “.5 in”. Then even after adding all the proper ones you get things that aren’t properly tagged and so you are still getting listings for “1 1/2 in” or something.

    2. AliExpress search is so bad that if you do a search for the item you are currently looking at (in order to find similar) it quite often finds nothing.

      It’s been terrible forever, so don’t bother hoping for improvement.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.