Dart 解析 HTML

最后修改日期：2024 年 1 月 28 日

在本文中，我们将介绍如何在 Dart 中解析 HTML 文档。我们使用 html 包。

$ dart pub add html

我们需要将 html 库添加到项目中。

Dart 解析本地 HTML 文件

在第一个示例中，我们解析本地磁盘上的 HTML 文件。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
</head>
<body>
    
    <h1>My Document</h1>

    <p>
        A simple document.
    </p>
</body>
</html>

这是要解析的文件。

main.dart

import 'dart:io';
import 'package:html/parser.dart';

void main() {
  var file = new File('index.html');
  var data = file.readAsStringSync();

  var doc = parse(data);

  print(doc.head!.innerHtml);
}

我们加载文件并进行解析。我们打印 head 标签的内部 HTML 内容。

import 'dart:io';
import 'package:html/parser.dart';

我们导入 IO 库和 HTML 解析器。

var file = new File('index.html');
var data = file.readAsStringSync();

我们读取文件内容。

var doc = parse(data);

我们将数据解析成一个文档；此文档可以使用各种成员函数和属性进行处理。

print(doc.head!.innerHtml);

我们获取并打印 head 标签的内容。

$ dart main.dart

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My title</title>

Dart 从网页解析 HTML

在第二个示例中，我们从外部网页解析 HTML 文档。

main.dart

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

Future<String> fetchData() async {
  final resp = await http.get(Uri.http('webcode.me'));

  if (resp.statusCode == 200) {
    return resp.body;
  } else {
    throw Exception('Failed to fetch data');
  }
}

void main() async {
  var data = await fetchData();

  var doc = parse(data);
  print(doc.querySelector('title')!.text);
}

我们向 webcode.me 网页发送 GET 请求并检索主页。我们对其进行解析并获取其标题。

print(doc.querySelector('title')!.text);

我们使用 querySelector 获取 title 标签的文本内容。

$ dart main.dart
My html page

Dart html querySelectorAll

querySelectorAll 成员函数查找此文档中与指定选择器组匹配的所有后代元素。

main.dart

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

Future<String> fetchData() async {
  final resp = await http.get(Uri.parse('http://webcode.me/os.html'));

  if (resp.statusCode == 200) {
    return resp.body;
  } else {
    throw Exception('Failed to fetch data');
  }
}

void main() async {
  var data = await fetchData();

  var doc = parse(data);
  var lis = doc.querySelectorAll('li');

  lis.forEach((e) => {print(e.text)});
}

该程序查找外部 HTML 文档中的所有 li 标签并打印它们的文本内容。

var lis = doc.querySelectorAll('li');

使用 querySelectorAll，我们获取所有 li 标签。

lis.forEach((e) => {print(e.text)});

我们遍历列表并打印每个元素的标题。

$ dart main.dart
Solaris
FreeBSD
Debian
NetBSD
Windows

来源

Dart html 库文档

在本文中，我们涵盖了 Dart 中的 HTML 解析。

作者

我叫 Jan Bodnar，我是一名充满激情的程序员，拥有丰富的编程经验。我自 2007 年以来一直撰写编程文章。迄今为止，我已撰写了 1,400 多篇文章和 8 本电子书。我在编程教学方面拥有十多年的经验。

列出所有 Dart 教程。