Flutter中如何在Html组件内实现文本搜索功能？

核心思路 #

监听TextFormField的输入内容，将原始HTML文本中的目标关键词替换为带高亮样式的HTML标签，再把处理后的HTML传给Html组件渲染展示。

具体实现步骤 #

1. 定义状态变量
   先声明用于存储原始HTML、搜索关键词和处理后高亮HTML的状态变量：

String originalHtml = ""; // 从API获取的原始HTML内容
String searchKeyword = "";
String highlightedHtml = "";

2. 绑定搜索输入与HTML处理逻辑
   在TextFormField的onChanged回调中，根据输入的关键词动态修改HTML内容，添加高亮样式：

TextFormField(
  onChanged: (value) {
    setState(() {
      searchKeyword = value;
      if (searchKeyword.isEmpty) {
        // 清空搜索时恢复原始HTML
        highlightedHtml = originalHtml;
      } else {
        // 正则全局匹配关键词，支持忽略大小写
        final regex = RegExp(searchKeyword, caseSensitive: false);
        highlightedHtml = originalHtml.replaceAllMapped(
          regex,
          (match) => '<span style="background-color: yellow; color: black;">${match.group(0)}</span>',
        );
      }
    });
  },
  decoration: const InputDecoration(
    hintText: "输入关键词搜索",
    prefixIcon: Icon(Icons.search),
  ),
)

3. 渲染处理后的HTML
   将处理好的带高亮的HTML传给Html组件：

Html(
  data: highlightedHtml,
),

额外说明 #

• 若原始HTML包含特殊字符，需确保API返回的是正确转义后的内容，避免替换操作破坏HTML结构。
• 支持多关键词搜索的话，可修改正则表达式为RegExp("关键词1|关键词2", caseSensitive: false)。
• 高亮样式可自定义，调整<span>的style属性即可修改背景色、字体样式等。

内容的提问来源于stack exchange，提问作者Heike Heinrich