Flutter中InlineSpans指定文本精准高亮的实现难题

你的核心问题在于当前的高亮逻辑是基于单词片段匹配，而非参考字符串的完整全局匹配，导致误高亮无关内容。下面是一套基于字符位置追踪的精准高亮方案：

1. 核心思路 #

1. 先将原始带标签文本转换为纯文本，用于计算字符的全局位置
2. 找到参考字符串在纯文本中所有完整出现的区间
3. 生成Span时，跟踪每个字符在纯文本中的全局位置，判断是否属于高亮区间，再应用背景色

2. 代码实现 #

第一步：定义区间辅助类与高亮区间获取函数 #

// 存储高亮区间的起始/结束索引
class HighlightRange {
  final int start;
  final int end;
  HighlightRange({required this.start, required this.end});
}

// 获取参考字符串在纯文本中的所有完整匹配区间
List<HighlightRange> getFullMatchRanges(String cleanText, String reference) {
  final ranges = <HighlightRange>[];
  int currentStart = 0;
  
  while (true) {
    final matchIndex = cleanText.indexOf(reference, currentStart);
    if (matchIndex == -1) break;
    
    ranges.add(HighlightRange(
      start: matchIndex,
      end: matchIndex + reference.length
    ));
    currentStart = matchIndex + reference.length; // 避免重复匹配同一位置
  }
  
  return ranges;
}

第二步：修改Span生成逻辑，加入位置追踪 #

List<InlineSpan> getText(String t, String reference) {
  // 1. 生成纯文本，用于位置计算（确保removeTags能正确移除所有自定义标签）
  final cleanText = t.removeTags();
  final highlightRanges = getFullMatchRanges(cleanText, reference);
  
  final spans = <InlineSpan>[];
  final parts = t.split("<t>");
  int currentGlobalPos = 0; // 跟踪当前处理字符在纯文本中的全局位置

  for (final part in parts) {
    if (part.trim().isEmpty) continue;

    if (isImage(part)) {
      spans.add(imageSpan(part));
      // 图片不占文本位置，无需更新currentGlobalPos
    } 
    else if (isTitle(part).$1) {
      final titleContent = extractTitleFromPart(part); // 提取<title>标签内的纯文本
      spans.add(titleSpanWithHighlight(titleContent, currentGlobalPos, highlightRanges));
      currentGlobalPos += titleContent.length;
    }
    else if (hasMeaning(part)) {
      final meanContent = extractMeaningFromPart(part); // 提取<mean>标签内的纯文本
      spans.add(meaningsSpanWithHighlight(meanContent, currentGlobalPos, highlightRanges));
      currentGlobalPos += meanContent.length;
    }
    // 其他标签类型（<ar>、<nm>等）同理，先提取纯文本内容再生成带高亮的Span
    else {
      // 普通文本部分
      spans.add(basicTextSpanWithHighlight(part, currentGlobalPos, highlightRanges));
      currentGlobalPos += part.length;
    }
  }

  return spans;
}

第三步：实现带高亮的TextSpan生成函数 #

TextSpan basicTextSpanWithHighlight(String text, int startGlobalPos, List<HighlightRange> highlightRanges) {
  final children = <TextSpan>[];
  int currentCharIdx = 0;

  for (int i = 0; i < text.length; i++) {
    final globalPos = startGlobalPos + i;
    final isHighlighted = highlightRanges.any(
      (range) => globalPos >= range.start && globalPos < range.end
    );

    // 当前字符与前一个字符高亮状态不同时，拆分新的TextSpan
    if (i == 0 || 
        highlightRanges.any((r) => (startGlobalPos + i -1) >= r.start && (startGlobalPos + i -1) < r.end) != isHighlighted) {
      if (currentCharIdx < i) {
        final subText = text.substring(currentCharIdx, i);
        final prevHighlighted = highlightRanges.any(
          (r) => (startGlobalPos + currentCharIdx) >= r.start && (startGlobalPos + currentCharIdx) < r.end
        );
        
        children.add(TextSpan(
          text: subText,
          style: TextStyle(
            color: getColor(subText),
            fontSize: getFontSize(subText),
            fontFamily: getFont(subText),
            fontWeight: getFontWeight(subText),
            fontStyle: getFontStyle(subText),
            backgroundColor: prevHighlighted ? Colors.cyan : null,
          ),
          recognizer: TapGestureRecognizer()..onTapUp = (details) {} // 保留原点击逻辑
        ));
      }
      currentCharIdx = i;
    }
  }

  // 处理最后一段文本
  if (currentCharIdx < text.length) {
    final subText = text.substring(currentCharIdx);
    final isHighlighted = highlightRanges.any(
      (range) => (startGlobalPos + currentCharIdx) >= range.start && (startGlobalPos + currentCharIdx) < range.end
    );
    
    children.add(TextSpan(
      text: subText,
      style: TextStyle(
        color: getColor(subText),
        fontSize: getFontSize(subText),
        fontFamily: getFont(subText),
        fontWeight: getFontWeight(subText),
        fontStyle: getFontStyle(subText),
        backgroundColor: isHighlighted ? Colors.cyan : null,
      ),
    ));
  }

  return TextSpan(children: children);
}

第四步：适配其他标签的Span生成 #

对于<title>、<mean>等带标签的内容，你需要实现对应的extractTitleFromPart、extractMeaningFromPart函数提取纯文本，然后参照basicTextSpanWithHighlight实现titleSpanWithHighlight、meaningsSpanWithHighlight，核心逻辑一致：根据全局位置判断是否高亮。

3. 关键注意事项 #

• 确保removeTags方法能完全移除所有自定义标签，生成与实际显示一致的纯文本，否则位置计算会偏移
• 如果参考字符串包含特殊字符（如换行、土耳其语特殊字符），indexOf仍能正确匹配，若需忽略大小写可改用正则的allMatches并设置caseSensitive: false
• 所有标签类型的Span生成都需要跟踪全局位置，确保高亮区间的准确性

内容的提问来源于stack exchange，提问作者Bilal Şimşek