Flutter网页数据查询插件web_query的使用

Flutter网页数据查询插件web_query的使用

web_query 是一个用于查询HTML和JSON数据的Flutter库。它采用简单的语法进行操作。

特性

  • 简单的查询语法用于HTML和JSON数据
  • 类似CSS的选择器用于HTML元素
  • JSON路径导航
  • 元素导航操作符
  • 变换操作
  • 类名检查
  • 链接和回退查询

开始使用

在你的 pubspec.yaml 文件中添加依赖：

dependencies:
  web_query: ^0.1.0

使用方法

基本HTML查询

以下是一个基本的HTML查询示例：

const html = '''
<div class="videos">
  <a href="a1">a1 text</a>
  <a href="a2">a2 text</a>
</div>
''';

final pageData = PageData("https://example.com", html);
// 新协议
final query = QueryString('div a/@text');
// 兼容旧协议
final queryOld = QueryString('div a@text', newProtocol = false);
final executeResult = query.execute(pageData.getRootElement()); // "a1 text"
final valueResult = query.getValue(pageData.getRootElement()); // "a1 text"
final listResult = query.getCollection(pageData.getRootElement()); // ["a1 text"]

JSON查询

以下是一个JSON查询示例：

const jsonData = {
  "meta": {
    "title": "Page Title",
    "tags": ["one", "two"]
  }
};

final pageData = PageData("https://example.com", "<html></html>",
    jsonData: jsonEncode(jsonData));
final query = QueryString('json:meta/title');
final result = query.execute(pageData.getRootElement()); // "Page Title"

查询语法

方案

  • json:path - 查询JSON数据
  • html:path - 查询HTML元素（可选，默认）
  • path - 默认为HTML查询

HTML查询

// 基础选择器
'div p'              // 在div中查找段落
'*p'                // 查找所有段落（强制所有）
'p'                // 查找第一个段落（强制一个）
'.content/*div'     // 在content中查找所有div
'.content/?div'     // 在content中查找第一个div

// 导航
'div/^'             // 父节点
'div/&gt;'             // 第一个子节点
'div/+&gt;'            // 下一个兄弟节点
'div/-'             // 上一个兄弟节点

// 属性
'a/@href'           // 获取href属性
'div/@text'         // 获取文本内容
'div/@html'         // 获取内部HTML
'div/@.class'       // 检查是否存在类
'div/@.prefix*'     // 匹配前缀类
'div/@.*suffix'     // 匹配后缀类

JSON查询

// 基础路径
'json:meta/title'           // 获取值
'json:items/0/name'         // 数组索引
'json:items/*'             // 所有数组项
'json:items/1-3'           // 数组范围

// 多个路径
'json:title,description'    // 获取多个值
'json:meta/title,tags/*'   // 混合路径和数组

查询参数

// 操作
'div/p?op=all'                    // 获取所有匹配项
'div/p?required=false'            // 链接中的可选项

// 变换
'@text?transform=upper'           // 转换为大写
'@text?transform=lower'           // 转换为小写
'@src?transform=regexp:/pat/rep/' // 正则表达式替换

链接查询

// 回退链
'json:meta/title||h1/@text'

// 多个必需项
'json:meta/title||json:content/body'

// 混合变换
'json:title?transform=upper||div/p?transform=lower'

额外功能

类名匹配

// 检查确切的类
'div/@.featured'          // true/false

// 通配符匹配
'div/@.prefix*'          // 匹配前缀-任意
'div/@.*suffix'          // 匹配任意-后缀
'div/@.*part*'          // 匹配包含部分

正则表达式变换

// 仅匹配
'@text?transform=regexp:/pattern/'

// 替换
'@text?transform=regexp:/pattern/replacement/'

// 带变量
'@src?transform=regexp:/^\/(.+)/${rootUrl}$1/'

旧API

旧API仍然支持但已弃用：

webValue(element, "div a")               // 获取第一个值
webCollection(element, "div a")          // 获取所有匹配项
webValue(element, "any#div a")          // 获取一个
webCollection(element, "any#div a")      // 获取一个作为列表

更多关于Flutter网页数据查询插件web_query的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter网页数据查询插件web_query的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


web_query 是一个用于在 Flutter 应用中查询网页数据的插件。它允许你从网页中提取特定的数据，例如 HTML 元素、文本、属性等。这个插件特别适用于需要从网页中抓取数据的场景，例如爬虫、数据监控等。

安装 web_query 插件

首先，你需要在 pubspec.yaml 文件中添加 web_query 插件的依赖项：

dependencies:
  flutter:
    sdk: flutter
  web_query: ^1.0.0  # 请使用最新版本

然后，运行 flutter pub get 来安装依赖。

使用 web_query 插件

以下是一个简单的示例，展示了如何使用 web_query 从网页中提取数据。

import 'package:flutter/material.dart';
import 'package:web_query/web_query.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Web Query Example'),
        ),
        body: WebQueryExample(),
      ),
    );
  }
}

class WebQueryExample extends StatefulWidget {
  [@override](/user/override)
  _WebQueryExampleState createState() => _WebQueryExampleState();
}

class _WebQueryExampleState extends State<WebQueryExample> {
  String _result = 'Loading...';

  [@override](/user/override)
  void initState() {
    super.initState();
    _fetchData();
  }

  Future<void> _fetchData() async {
    try {
      // 创建一个 WebQuery 实例
      final webQuery = WebQuery();

      // 加载网页
      await webQuery.load('https://example.com');

      // 查询网页中的特定元素
      final title = webQuery.querySelector('h1')?.text;

      setState(() {
        _result = title ?? 'No title found';
      });
    } catch (e) {
      setState(() {
        _result = 'Error: $e';
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Text(_result),
    );
  }
}
回到顶部