正则测试应用

---

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

一、项目概述

运行效果图

1.1 应用简介

正则测试应用是一款专为开发者和文本处理爱好者设计的正则表达式测试工具，旨在帮助用户快速验证正则表达式、学习正则语法、提高文本处理效率。应用以紫色为主色调，营造专业高效的开发工具氛围。

应用涵盖了测试器、常用正则库、个人中心三大模块，收录了18个常用正则表达式模板，涵盖联系方式、证件号码、网络相关、字符匹配、日期时间、密码验证六大分类。通过实时匹配、高亮显示、捕获组展示等功能，帮助用户快速掌握正则表达式的使用技巧。

1.2 核心功能

功能模块	功能描述	实现方式
正则测试	实时匹配测试	RegExp + allMatches
匹配选项	忽略大小写、多行等	正则标志设置
结果展示	匹配位置、捕获组	列表卡片展示
常用正则	18个常用模板	分类筛选
快速应用	一键使用模板	导航传参
快速参考	正则语法速查	标签展示

1.3 常用正则分类

序号	分类名称	数量	包含内容
1	联系方式	3个	手机号码、邮箱地址、固定电话
2	证件号码	4个	身份证号、银行卡号、车牌号、邮政编码
3	网络相关	3个	IP地址、URL地址、域名
4	字符匹配	4个	中文字符、数字、正整数、英文字母
5	日期时间	2个	日期格式、时间格式
6	密码验证	2个	密码强度、用户名

1.4 技术栈

技术领域	技术选型	版本要求
开发框架	Flutter	>= 3.0.0
编程语言	Dart	>= 2.17.0
设计规范	Material Design 3	-
状态管理	setState	-
目标平台	鸿蒙OS / Web	API 21+

1.5 项目结构

lib/
└── main_regex_tester.dart
    ├── RegexTesterApp        # 应用入口
    ├── RegexPattern          # 正则模板数据模型
    ├── MatchResult           # 匹配结果数据模型
    ├── MainPage              # 主页面（底部导航）
    ├── TesterPage            # 测试页面
    ├── PatternsPage          # 常用正则页面
    └── ProfilePage           # 个人中心页面

---

二、系统架构

2.1 整体架构图

2.2 类图设计

2.3 页面导航流程

2.4 正则测试流程

---

三、核心模块设计

3.1 数据模型设计

3.1.1 正则模板模型 (RegexPattern)

class RegexPattern {
  final String name;          // 模板名称
  final String pattern;       // 正则表达式
  final String description;   // 功能描述
  final String example;       // 示例文本
  final String category;      // 所属分类
}

3.1.2 匹配结果模型 (MatchResult)

class MatchResult {
  final String text;          // 匹配文本
  final int start;            // 起始位置
  final int end;              // 结束位置
  final List<String> groups;  // 捕获组列表
}

3.1.3 正则模板分布

3.2 页面结构设计

3.2.1 主页面布局

3.2.2 测试页面结构

3.2.3 常用正则页面结构

3.3 正则匹配流程设计

---

四、UI设计规范

4.1 配色方案

应用采用紫色为主色调，营造专业高效的开发工具氛围：

颜色类型	色值	用途
主色	#673AB7 (Deep Purple)	导航、强调元素
成功色	#4CAF50 (Green)	匹配成功提示
错误色	#F44336 (Red)	正则错误提示
警告色	#FF9800 (Orange)	未匹配提示
代码背景	surfaceContainerHighest	代码输入区域

4.2 字体规范

元素	字号	字重	字体
页面标题	20px	Medium	默认
正则表达式	16px	Regular	monospace
测试文本	14px	Regular	monospace
匹配结果	14px	Medium	monospace
捕获组	12px	Regular	monospace

4.3 组件规范

4.3.1 正则输入框

┌─────────────────────────────────────────────────┐
│ / \d+                                   /       │
│                                                 │
└─────────────────────────────────────────────────┘

4.3.2 匹配选项

┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ 忽略大小写 ✓ │ │ 多行模式     │ │ Unicode ✓    │
└──────────────┘ └──────────────┘ └──────────────┘

4.3.3 匹配结果卡片

┌─────────────────────────────────────────────────┐
│ 匹配 #1                          位置: 6-9      │
│ ┌─────────────────────────────────────────────┐ │
│ │ 123                                         │ │
│ └─────────────────────────────────────────────┘ │
│ 捕获组                                          │
│ [$1: value1] [$2: value2]                       │
│                                          [复制] │
└─────────────────────────────────────────────────┘

4.3.4 正则模板卡片

┌─────────────────────────────────────────────────┐
│ 手机号码                        [联系方式]      │
│ 匹配中国大陆手机号码                            │
│ ┌─────────────────────────────────────────────┐ │
│ │ ^1[3-9]\d{9}$                               │ │
│ └─────────────────────────────────────────────┘ │
│ 示例: [13812345678]                             │
│                                 [▶ 使用此正则]  │
└─────────────────────────────────────────────────┘

---

五、核心功能实现

5.1 正则测试核心实现

void _testRegex() {
  setState(() {
    _errorMessage = null;
    _matches = [];
  });

  if (_patternController.text.isEmpty) {
    return;
  }

  try {
    final regex = RegExp(_patternController.text);
    final text = _textController.text;
    final matches = regex.allMatches(text);

    setState(() {
      _matches = matches.map((match) {
        return MatchResult(
          text: match.group(0) ?? '',
          start: match.start,
          end: match.end,
          groups: List.generate(
            match.groupCount + 1, 
            (i) => match.group(i) ?? ''
          ),
        );
      }).toList();
    });
  } catch (e) {
    setState(() {
      _errorMessage = e.toString();
    });
  }
}

5.2 匹配选项实现

Widget _buildFlagsSection() {
  return Column(
    children: [
      _buildFlagChip('忽略大小写', _caseInsensitive, (value) {
        setState(() => _caseInsensitive = value);
        _testRegex();
      }),
      _buildFlagChip('多行模式', _multiline, (value) {
        setState(() => _multiline = value);
        _testRegex();
      }),
      _buildFlagChip('点匹配换行', _dotAll, (value) {
        setState(() => _dotAll = value);
        _testRegex();
      }),
      _buildFlagChip('Unicode (u)', _unicode, (value) {
        setState(() => _unicode = value);
        _testRegex();
      }),
    ],
  );
}

5.3 匹配结果展示实现

Widget _buildMatchCard(int index, MatchResult match) {
  return Card(
    child: Padding(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text('匹配 #$index'),
              Text('位置: ${match.start}-${match.end}'),
            ],
          ),
          Container(
            child: SelectableText(
              match.text,
              style: TextStyle(fontFamily: 'monospace'),
            ),
          ),
          if (match.groups.length > 1)
            Wrap(
              children: match.groups.asMap().entries
                .where((e) => e.key > 0)
                .map((e) => Chip(label: Text('\$${e.key}: ${e.value}')))
                .toList(),
            ),
        ],
      ),
    ),
  );
}

5.4 分类筛选实现

List<RegexPattern> get _filteredPatterns {
  if (_selectedCategory == '全部') {
    return _commonPatterns;
  }
  return _commonPatterns.where((p) => p.category == _selectedCategory).toList();
}

5.5 快速应用正则实现

void _applyPattern(RegexPattern pattern) {
  _patternController.text = pattern.pattern;
  _textController.text = pattern.example;
  _testRegex();
}

---

六、交互设计

6.1 正则测试交互流程

6.2 分类筛选交互

6.3 正则应用流程

---

七、扩展功能规划

7.1 后续版本规划

7.2 功能扩展建议

7.2.1 测试历史

记录测试记录：

• 保存历史正则表达式
• 保存历史测试文本
• 快速恢复历史测试

7.2.2 收藏功能

个人收藏管理：

• 收藏常用正则
• 创建自定义分类
• 导入导出收藏

7.2.3 代码生成

多语言代码生成：

• 生成Dart代码
• 生成JavaScript代码
• 生成Python代码

---

八、注意事项

8.1 开发注意事项

1. 正则语法：Dart正则语法与JavaScript基本一致

2. 捕获组：group(0)返回完整匹配，group(1)开始是捕获组

3. 特殊字符：需要转义的特殊字符包括 \ ^ $ . | ? * + ( ) [ ] { }

4. 性能优化：复杂正则可能导致性能问题，需要提示用户

8.2 常见问题

问题	原因	解决方案
正则不匹配	语法错误或边界问题	检查正则语法，注意^和$
捕获组为空	未使用分组语法	使用()创建捕获组
中文匹配失败	未考虑Unicode	开启Unicode选项
换行符不匹配	.不匹配换行	开启dotAll选项

8.3 正则语法速查

📝 正则表达式快速参考 📝

符号	含义	符号	含义
.	任意字符	\d	数字
\w	字母数字下划线	\s	空白字符
^	行首	$	行尾
*	0次或多次	+	1次或多次
?	0次或1次	{n}	恰好n次
[]	字符集	()	分组
`	`	或	[^]

---

九、运行说明

9.1 环境要求

环境	版本要求
Flutter SDK	>= 3.0.0
Dart SDK	>= 2.17.0
鸿蒙OS	API 21+

9.2 运行命令

# 查看可用设备
flutter devices

# 运行到Web服务器
flutter run -d web-server -t lib/main_regex_tester.dart --web-port 8105

# 运行到鸿蒙设备
flutter run -d 127.0.0.1:5555 lib/main_regex_tester.dart

# 运行到Windows
flutter run -d windows -t lib/main_regex_tester.dart

# 代码分析
flutter analyze lib/main_regex_tester.dart

---

十、总结

正则测试应用通过简洁直观的界面设计，为开发者提供了一个高效的正则表达式测试工具。应用涵盖了正则测试、常用正则库、个人中心三大模块，收录了18个常用正则表达式模板，帮助用户快速验证正则表达式、学习正则语法。

核心功能涵盖实时匹配测试、匹配选项设置、结果展示、常用正则库四大模块。正则测试支持实时验证、错误提示、捕获组展示；匹配选项支持忽略大小写、多行模式、点匹配换行、Unicode等设置；常用正则库涵盖六大分类18个模板，支持一键应用；个人中心提供快速参考、学习统计等功能。

应用采用Material Design 3设计规范，以紫色为主色调，界面专业高效。通过本应用，希望能够帮助开发者提高正则表达式的编写效率，快速解决文本处理问题。

正则表达式，文本处理的利器