如何在Flutter中用Dart提取网站可见文本并去除JS/CSS代码

直接用正则表达式处理HTML是非常不可靠的——HTML的嵌套结构、注释、特殊字符很容易让正则失效，导致误删内容或者残留JS/CSS代码。最优方案是用专业的HTML解析库来操作DOM，精准过滤不需要的标签。

步骤1：添加依赖 #

在项目的pubspec.yaml中添加html包依赖：

dependencies:
  html: ^0.15.4

执行flutter pub get安装依赖。

步骤2：编写处理函数 #

利用html库解析HTML，移除所有<script>和<style>标签，再提取剩余的文本内容：

import 'package:html/parser.dart' show parse;

String extractVisibleText(String htmlContent) {
  // 解析HTML为DOM文档
  final doc = parse(htmlContent);
  
  // 移除所有script和style标签（及其内部内容）
  doc.querySelectorAll('script, style').forEach((element) => element.remove());
  
  // 提取body内的所有文本，合并多余空白并去除首尾空格
  final rawText = doc.body?.text ?? '';
  return rawText.trim().replaceAll(RegExp(r'\s+'), ' ');
}

补充说明 #

• 这个方法会完全移除<script>和<style>标签的所有内容，不会残留任何JS或CSS代码。
• 如果需要进一步过滤样式不可见的元素（比如display: none的节点），可以额外遍历DOM元素，检查其style属性或计算样式，但这会增加复杂度，一般场景下上面的代码足够满足需求。
• 如果你的函数是先通过网络请求获取网页内容，确保请求到的是完整的HTML（注意部分动态渲染的内容需要用WebView加载后获取，但静态HTML用这个方法完全没问题）。

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