flutter如何解析html

在Flutter中如何解析HTML内容？我需要在应用中显示从网络获取的HTML数据，但直接显示会有很多标签和样式混杂。有没有推荐的插件或方法可以方便地解析HTML并提取纯文本或格式化显示？比如是否可以使用flutter_html这类库，或者有其他更高效的方式？

2 回复

Flutter中可使用flutter_html或webview_flutter库解析HTML。前者直接渲染HTML内容，后者嵌入网页视图。根据需求选择合适的方案。

更多关于flutter如何解析html的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中解析HTML有多种方式，以下是常用的方法：

1. 使用html包（推荐）

这是最常用的HTML解析库：

import 'package:html/parser.dart' as parser;
import 'package:http/http.dart' as http;

void parseHTML() async {
  // 获取HTML内容
  var response = await http.get(Uri.parse('https://example.com'));
  var document = parser.parse(response.body);
  
  // 提取标题
  var title = document.querySelector('title')?.text;
  print('标题: $title');
  
  // 提取所有链接
  var links = document.querySelectorAll('a');
  for (var link in links) {
    var href = link.attributes['href'];
    var text = link.text;
    print('链接: $text -> $href');
  }
  
  // 提取特定class的元素
  var articles = document.querySelectorAll('.article');
  for (var article in articles) {
    print('文章: ${article.text}');
  }
}

2. 安装依赖

在 pubspec.yaml 中添加：

dependencies:
  html: ^0.15.0
  http: ^0.13.4

3. 常用解析方法

// 解析本地HTML字符串
var document = parser.parse('''
<html>
  <body>
    <h1>标题</h1>
    <p class="content">内容</p>
  </body>
</html>
''');

// 获取元素文本
var heading = document.querySelector('h1')?.text;

// 获取元素属性
var content = document.querySelector('.content')?.text;

// 遍历子元素
var body = document.querySelector('body');
if (body != null) {
  for (var child in body.children) {
    print('子元素: ${child.localName} - ${child.text}');
  }
}

4. 注意事项

  • 处理网络请求时记得添加网络权限
  • 考虑使用try-catch处理解析异常
  • 对于复杂的HTML，可能需要更精细的选择器

这种方法适合大多数HTML解析需求，简单易用且功能强大。

回到顶部