← Hashito System Home 日本語 Tools Blog Posters
Sample
Build with blocks Drag and connect them top to bottom
Structure map See the meaning as blocks and lines
How to use: in the "Build with blocks" area on the left, drag blocks from the categories on the far left and connect them top to bottom; the pattern is generated automatically at the top right. Enter test strings under "Compare matches" and the matched parts and capture groups are color-coded. To reuse an existing regex, paste it into the input on the right and press Apply to blocks to convert it. The structure map cards, the blocks, and the colored parts of the test table are linked; click one to jump to its counterpart. Building, generation, and matching all happen in your browser, and nothing you enter is transmitted.
If you just want to paste a finished pattern and check its matches quickly, the Regex Tester is handy. We also offer free learning posters that illustrate how data and the web work.
Related tools: Regex Tester Manuscript Paper Sheet Counter Kana to Romaji Converter Lorem Ipsum Generator

Frequently asked questions

Which languages can I use the regex I build with?

The generated pattern uses JavaScript (ECMAScript) syntax. Core constructs such as character classes, quantifiers, anchors, and groups are shared with many languages including Python, Java, PHP, and Ruby, so they usually port directly. However, some constructs like named groups ((?<name>...)) and lookbehind ((?<=...)) differ in spelling or support between engines. Check the regex specification of your target language when porting.

Is the data I enter sent to a server?

No. Building the blocks, generating the pattern, and matching against your test strings all happen in JavaScript inside your browser. Nothing you enter is sent to or stored on a server. Matching runs on a separate thread (a Web Worker) and patterns that take too long are cut off automatically after a short time, so the page never freezes even on heavy expressions.

Can I import an existing regex into blocks?

Yes. Paste a pattern into the input on the right and press Apply to blocks; it is parsed and converted into blocks. Conversely, rearranging the blocks updates the pattern string automatically. Any advanced fragment that cannot be parsed is kept as a RAW block, so no information is lost.

How is this different from the Regex Tester?

The Regex Tester is for pasting a finished pattern and checking where it matches in your test strings. This Visual Builder is for assembling the pattern itself from blocks and understanding its meaning through a structure map. The two pages link to each other, so you can build here and do detailed checking in the Tester.