从 html 内容的可见文本中搜索文本

Question

在我的应用程序中有一个搜索功能，可以按用户输入的搜索文本过滤消息列表。但是我的消息项的正文字段包含一个完整格式的 HTML 文档 (<html>...</html>)。我想通过将搜索过滤应用于邮件正文字段来过滤邮件列表。

 _getFilteredMessageList() {
    if (!StringHelper.isNullOrWhiteSpace(this._searchText)) {
      return _messagesList.where((msg) => msg.title.toLowerCase().contains(this._searchText.toLowerCase()) || msg.body.toLowerCase().contains(this._searchText.toLowerCase())).toList();
    }
    return _messagesList;
  }

这里的 msg.body 是 HTML 内容字段。

我只想搜索用户可见的文本内容，忽略所有非可见的标签和评论。

Flutter 中是否有实现此功能的包或逻辑？

Flutter v2.2.2

Answer 1

从网上找到解决方案，示例代码如下。

import 'package:html/parser.dart';

static String getHTMLBodyPlainTextFromHTMLDocument(String htmlString) {
  var document = parse(htmlString);
  String parsedString = parse(document.body!.text).documentElement!.text;
  // parsedString = StringHelper.removeLineBreaks(parsedString);
  // parsedString = StringHelper.repalceMultipleSpacesWithSingleSpace(parsedString);
  return parsedString.trim();
}

以上方法将为您提供 WebView 小部件中用户可见的纯文本，并且它将 完全剥离 html 标签和非可视元素。但是纯文本中会有很多不必要的空格，我们必须单独删除它们以适当的间距对文本进行碎片整理，以节省可变内存大小。

上面注释的两行代码作为手动编写的单独辅助方法去除换行符和多余空格。

从 html 内容的可见文本中搜索文本

Flutter search text out of html content's visible text

html

mobile

search

dart

flutter