基于 Flutter × OpenHarmony 的正则表达式测试器开发实战

前言

在日常开发和数据处理工作中，正则表达式是一个强大的工具，它可以快速匹配、查找和替换文本。但对初学者来说，编写和调试正则表达式往往存在一定难度。为了提高开发效率，同时让正则表达式调试更直观，我们基于 Flutter × OpenHarmony 跨平台技术，开发了一款 正则表达式测试器，支持实时测试匹配结果、区分大小写、多行模式等功能，并可直接复制匹配结果。

本文将从开发背景、跨端开发介绍、核心代码解析到开发心得进行详细讲解。

---

背景

正则表达式虽然功能强大，但其语法繁杂，开发者在使用时常常遇到以下问题：

1. 调试困难：复杂表达式难以判断匹配结果。
2. 跨平台兼容性：不同平台正则表达式行为略有差异。
3. 实时反馈缺失：传统工具不能实时显示匹配结果。

为了提升调试效率，我们希望开发一个轻量、可跨端运行的正则表达式测试工具，实现以下功能：

• 输入正则表达式并测试匹配文本。
• 可选择是否区分大小写、多行模式。
• 实时显示匹配结果和匹配数量。
• 支持清空和复制结果操作。
• 跨平台支持 HarmonyOS、Windows 等。

---

Flutter × OpenHarmony 跨端开发介绍

Flutter 是 Google 推出的跨平台 UI 框架，具有“一次编写，多端运行”的特性。而 OpenHarmony 是华为推出的分布式操作系统，支持多设备协同。结合 Flutter 和 OpenHarmony，可以快速开发跨端应用：

• UI 一致：Flutter 提供声明式 UI，界面在不同设备上保持一致。
• 跨端适配：通过 OpenHarmony 的能力，应用可在手机、平板甚至 IoT 设备运行。
• 快速迭代：Flutter 热重载功能大大提升了开发效率。
• 生态兼容：可使用 Flutter 丰富的插件生态，快速扩展功能。

在本项目中，我们利用 Flutter 构建 UI 和逻辑，同时通过 OpenHarmony 的跨端能力，实现在 HarmonyOS 设备上的良好体验。

---

开发核心代码

核心页面为 RegexTesterPage，功能包括正则表达式输入、测试文本输入、匹配结果展示以及操作按钮。下面是主要功能解析：

1. 文本控制器与状态管理

final TextEditingController _regexController = TextEditingController();
final TextEditingController _testTextController = TextEditingController();
final TextEditingController _resultController = TextEditingController();

bool _caseSensitive = false;
bool _multiline = false;
List<String> _matches = [];
int _matchCount = 0;
String? _errorMessage;

• _regexController：输入正则表达式。
• _testTextController：输入测试文本。
• _resultController：显示匹配结果。
• _caseSensitive、_multiline：用于控制正则选项。
• _matches、_matchCount、_errorMessage：用于存储匹配结果和错误信息。

2. 正则表达式测试逻辑

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

    String regexPattern = _regexController.text;
    String testText = _testTextController.text;

    if (regexPattern.isEmpty) {
      _resultController.text = '';
      return;
    }

    try {
      RegExp regex = RegExp(
        regexPattern,
        caseSensitive: _caseSensitive,
        multiLine: _multiline,
      );

      Iterable<Match> matches = regex.allMatches(testText);
      _matches = matches.map((match) => match.group(0) ?? '').toList();
      _matchCount = _matches.length;

      _resultController.text = _matchCount == 0
          ? '没有找到匹配项'
          : '匹配项 ($_matchCount)：\n${_matches.join('\n')}';
    } catch (e) {
      _errorMessage = '正则表达式错误: $e';
      _resultController.text = '';
    }
  });
}

• 实时监听输入，动态匹配。
• 捕获正则表达式错误，防止程序崩溃。
• 显示匹配数量和匹配项。

3. 选项切换与操作按钮

void _toggleCaseSensitive(bool? value) {
  setState(() {
    _caseSensitive = value ?? false;
    _testRegex();
  });
}

void _toggleMultiline(bool? value) {
  setState(() {
    _multiline = value ?? false;
    _testRegex();
  });
}

void _clearAll() {
  _regexController.clear();
  _testTextController.clear();
  _resultController.clear();
  setState(() {
    _matches = [];
    _matchCount = 0;
    _errorMessage = null;
  });
}

void _copyResult() {
  if (_resultController.text.isNotEmpty) {
    Clipboard.setData(ClipboardData(text: _resultController.text));
    ScaffoldMessenger.of(context)
        .showSnackBar(const SnackBar(content: Text('已复制到剪贴板')));
  }
}

• 支持区分大小写、多行模式切换。
• 一键清空或复制结果，提高操作便捷性。

4. UI 构建

TextField(
  controller: _regexController,
  decoration: InputDecoration(
    labelText: '正则表达式',
    hintText: r'例如: \w+@\w+\.\w+',
    border: OutlineInputBorder(borderRadius: BorderRadius.circular(8)),
    errorText: _errorMessage,
  ),
)

• 使用 TextField 构建输入框。
• 通过 CheckboxListTile 实现选项控制。
• 使用 Expanded 和 flex 实现自适应文本框布局。

---

心得

1. 实时反馈是关键：用户体验最重要，输入即显示结果能大大提升调试效率。
2. 错误处理必须稳健：正则表达式易出错，捕获异常防止崩溃非常必要。
3. 跨端适配需注意：HarmonyOS 与传统 Android 可能在字体渲染、输入法行为上有差异，UI 需要灵活适配。
4. 功能精简更高效：本工具专注正则测试核心功能，避免冗余复杂操作，提高可用性。

---

总结

本项目展示了如何使用 Flutter × OpenHarmony 构建一个跨端的正则表达式测试器。通过精心设计的 UI、实时匹配逻辑和稳健的异常处理，开发者可以轻松调试和验证正则表达式。同时，利用 Flutter 的跨端特性，应用可以在 HarmonyOS、Windows 等多平台运行，实现“一次开发，多端可用”的目标。

未来可以扩展功能，例如：

• 支持正则替换功能。
• 支持保存常用正则表达式。
• 提供更丰富的匹配结果高亮展示。

通过这样的实战开发，不仅掌握了 Flutter 跨端开发能力，也积累了正则表达式调试工具设计经验，为日常开发提供了极大便利。

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