Regex Tester & Cron Generator
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The Regex Tester and Cron Generator are core utility modules within the DevUtils suite, designed to provide developers with real-time validation, generation, and explanation of complex syntax patterns. These tools are integrated into a multi-tab developer environment built with Tauri and Next.js, emphasizing lightweight performance and cross-platform accessibility.
The Regex Tester (internally "Regex Scissors") allows for live regular expression testing with visual token-by-token explanations and common pattern presets. The Cron Generator (internally "Cron Schedule Builder") facilitates the creation of cron expressions through a guided UI, offering human-readable descriptions and previews of future execution times. Both tools leverage a localized messaging system to provide multilingual support.
Sources: README.md:1-15, components/tool-content.tsx:32-35, messages/en.json:2-10
Regex Tester (Regex Scissors)
Architecture and Logic
The Regex Tester is implemented as a functional React component that manages state for the pattern, flags, and test string. It utilizes a real-time feedback loop via useEffect to validate the regex and identify matches without requiring manual submission.
The core logic is divided into three primary functions:
- Regex Validation: Attempts to instantiate a
new RegExp(pattern, flags)and captures errors to provide immediate feedback on pattern validity. - Match Extraction: Executes the regex against the test string. If the "global" (
g) flag is present, it iterates through all matches; otherwise, it returns only the first match. - Pattern Explanation: A lexical analyzer that splits the pattern into tokens (e.g.,
^,\d,+) and maps them to localized descriptive strings.
Sources: components/tools/regex-tester.tsx:43-60, components/tools/regex-tester.tsx:135-242
Component Data Flow
The following diagram illustrates how user input triggers pattern validation and match visualization.
A brief explanation: The UI state updates reactively. Valid patterns trigger the matching engine and the token explanation generator simultaneously.
Sources: components/tools/regex-tester.tsx:248-285
Key Features and Configuration
| Feature | Description | File Reference |
|---|---|---|
| Live Flags | Support for g, i, m, s, u, y flags with interactive selection. | regex-tester.tsx:64-79 |
| Token Explanation | Breaks down pattern syntax (e.g., \w to "Word character"). | regex-tester.tsx:135-212 |
| Presets | Common patterns for Email, URL, Phone, IPv4, UUID, and more. | regex-tester.tsx:83-125 |
| Match Details | Displays match index, full string, and capturing groups. | regex-tester.tsx:422-475 |
Cron Generator (Cron Schedule Builder)
Architecture and Logic
The Cron Generator provides a structured interface for building 5-part cron expressions (minute, hour, day of month, month, day of week). It uses a state-driven approach to map high-level frequencies (e.g., "Weekly") to specific cron segments.
Key internal mechanisms include:
- generateCronExpression: A switch-case logic that constructs a string based on selected frequency, hour, and minute state values.
- generateDescription: A parser that converts the 5-part string back into a human-readable English sentence (e.g., "At 12:00 PM, on Monday").
- calculateNextRuns: A simulation engine that predicts the next five timestamps of execution based on the current system time.
Sources: components/tools/cron-generator.tsx:61-105, components/tools/cron-generator.tsx:143-264
Cron Expression Composition
The generation logic maps user-friendly selections to standard cron syntax as shown in the sequence below:
A brief explanation: Any change in the Builder UI triggers a chain reaction where the expression is regenerated, described in natural language, and projected into future run times.
Sources: components/tools/cron-generator.tsx:266-276
Scheduling Options
| Option | Logic / Default | File Reference |
|---|---|---|
| Frequency | Ranges from 'every-minute' to 'yearly'. | cron-generator.tsx:64-94 |
| Interval | Used for 'Every N minutes/hours' patterns. | cron-generator.tsx:69-75 |
| Format Guide | Visual mapping of * * * * * to time units. | cron-generator.tsx:443-455 |
| Presets | Quick buttons for "Daily at midnight", "Weekdays at 9 AM", etc. | cron-generator.tsx:488-510 |
Integration and Localization
Tool Routing
Both tools are registered in the toolComponents registry, allowing the ToolContent component to dynamically render them based on the active tab ID.
- Regex Tester ID:
regex-tester - Cron Generator ID:
cron-generator
Sources: components/tool-content.tsx:28-35
Internationalization
The tools consume localized strings via the react-i18next hook. Definitions for labels, placeholders, and technical explanations are stored in language-specific JSON files.
- English Definitions: Found in
messages/en.jsonundertools.regexTesterandtools.cronGenerator. - Chinese Definitions: Found in
messages/zh.jsonproviding equivalent translations for technical terms like "Capturing group" (捕获组) or "Cron Expression" (Cron 表达式).
Sources: messages/en.json:302-390, messages/zh.json:315-403
Conclusion
The Regex Tester and Cron Generator provide essential syntax assistance within the DevUtils ecosystem. By combining live execution environments with educational components (pattern explanations and next-run previews), these tools reduce the cognitive load required to manage complex developer configurations. Their implementation relies on robust React state management and localized messaging, ensuring a consistent experience across different environments and languages.
Sources: README.md:5-10, package.json:38-55