Visual Regexp Web

A visual programming web service for building and testing regular expressions using Google Blockly.

🌐 Live Demo

https://hi-king.github.io/visual_regexp_web/

Embed Mode

You can embed this tool in your blog or website using an iframe:

<iframe
  src="https://hi-king.github.io/visual_regexp_web/?embed=true"
  width="100%"
  height="800"
  frameborder="0"
  style="border: 1px solid #ddd; border-radius: 8px;"
  title="Visual Regexp Web">
</iframe>

Embed mode features:

• Compact layout optimized for iframe embedding
• Header and navigation hidden for space efficiency
• Fully responsive and mobile-friendly
• Recommended minimum height: 800px

Overview

An educational tool that allows you to construct regular expressions using visual blocks. Designed for both beginners learning regex and programmers who want to quickly create regex patterns.

Key Features

• 🧩 Intuitive regex editor powered by Blockly
• ⚡ Real-time matching and testing
• 🌍 Multi-language support (Japanese/English)
• 📱 Responsive design (mobile-friendly)
• ✅ Comprehensive test coverage (115 tests)

Supported Regex Features

• Basic: Literal text, any character (.), escape sequences (\n, \t, \r)
• Character Classes: \d (digits), \w (word chars), \s (whitespace), custom classes [...]
• Quantifiers: * (zero or more), + (one or more), ? (optional), {n}, {n,m}
• Groups: Capture groups () with nested quantifier support
• Alternation: OR patterns (|)
• Anchors: Start of line (^), end of line ($)

Development Status

Currently in active development (Phase 2). See dev/design.md for detailed specifications (Japanese).

Development

Prerequisites

• Node.js 20+
• pnpm 8+

Setup

# Install dependencies
pnpm install

# Start development server
pnpm dev

# Run tests
pnpm test

# Build for production
pnpm build

# Preview production build
pnpm preview

Testing

# Run tests in watch mode
pnpm test

# Run tests once
pnpm test:run

# Run tests with UI
pnpm test:ui

Deployment

This project is automatically deployed to GitHub Pages via GitHub Actions when changes are pushed to the main branch.

Manual Deployment

# Build the project
pnpm build

# The dist/ directory contains the production-ready files

Tech Stack

• Framework: Vite
• Visual Editor: Google Blockly
• Testing: Vitest
• Deployment: GitHub Pages + GitHub Actions
• Language: Vanilla JavaScript (ES6+)

License

TBD