Flutter如何提取网页正文文本 实现TTS应用网页朗读功能

直接解析HTML源码提取不准的核心原因是：不同站点DOM结构差异极大，页面里混有导航栏、广告位、侧栏推荐、评论区、页脚版权等大量非正文内容，靠手动写标签选择器、正则匹配的方式覆盖度极低，根本没法适配全量资讯类站点。以下是经过生产验证的可行方案：

核心实现方案（覆盖90%以上通用站点） #

采用行业通用的Readability正文提取算法作为核心逻辑，这套算法原本是为浏览器阅读模式设计的，会根据节点文本密度、标签权重、位置特征自动评分，过滤非正文节点，提取出核心的标题、正文内容，不需要针对单个站点写适配规则。

• 静态页面处理流程：
  1. 用http包拉取目标页面完整HTML，请求时必须携带桌面端浏览器的User-Agent头，避免站点返回反爬拦截页、或者缺正文的移动端极简页面，基础请求示例：

     import 'package:http/http.dart' as http;
     Future<String> fetchPageHtml(String targetUrl) async {
       final response = await http.get(
         Uri.parse(targetUrl),
         headers: {
           'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36'
         }
       );
       if (response.statusCode != 200) {
         throw Exception('页面加载失败，状态码：${response.statusCode}');
       }
       return response.body;
     }
     

  2. 调用Dart生态的Readability工具处理拉取到的HTML源码，拿到结构化的正文结果后，剥离残留的HTML标签，把连续的空白符、换行、特殊占位符合并为单换行，输出干净的纯文本直接传给TTS模块即可。
• 动态渲染（Vue/React单页应用）处理流程：
  对于直接拉HTML拿不到渲染后正文的站点，放弃硬扒接口的方案，直接接入webview_flutter控件加载目标URL，等页面加载完成回调触发后，向WebView注入内置的Readability JS脚本，执行提取逻辑后把正文文本回传给Flutter端，这个方案可以绕过绝大多数前端渲染的内容限制，和用户手动在浏览器看到的正文内容完全一致。

精度优化兜底规则 #

算法提取完成后加一层轻量清洗，进一步适配TTS朗读体验：

• 过滤掉单段长度小于15个字符的短文本节点，这类节点基本是按钮文字、广告标注、功能入口文字，没有朗读价值
• 过滤掉包含“登录”“注册”“相关推荐”“发表评论”“广告”“免责声明”这类固定非正文关键词的文本块
• 把正文按自然段落拆分，不要一次性传入超长文本给TTS插件，避免出现朗读中断、初始化失败的问题，逐段调度TTS播放还能支持中途暂停、跳转段落的交互

避坑提示 #

• 不要用正则表达式直接匹配HTML提取正文，HTML属于结构化嵌套语法，正则无法处理标签嵌套、注释、行内代码等场景，提取结果要么缺漏内容要么夹杂大量垃圾字符
• 不要尝试给每个站点写专属CSS选择器规则，后续维护成本会随着支持站点数量线性上涨，只有极少数高频使用的站点可以加专属选择器做精度补全，通用场景全部走算法提取即可
• 遇到反爬严格的站点，优先走WebView注入提取的方案，不要频繁修改请求参数暴力爬取，容易触发IP封禁

内容的提问来源于stack exchange，提问作者Harsh Vardhan