Flutter中能否将API返回的HTML响应转换为JSON格式？

基础结论 #

• API返回的HTML响应完全可以处理，但不存在通用的HTML自动转JSON方案。HTML是展示类标记文档，JSON是结构化数据格式，需要你明确要提取的内容规则后自行做转换。
• 你当前拿到的是站点登录页的HTML代码，优先建议你先排查为什么API会返回网页而非预期的接口数据，常见原因如下：
  • 请求头配置错误：没有添加Accept: application/json，服务端默认返回了HTML格式响应
  • 鉴权失效：请求未携带合法的token/cookie，服务端拦截后跳转到登录页，返回了登录页代码
  • 请求参数/地址错误：误调用了网页端路由，而非数据接口路由

自定义HTML转JSON方案（Flutter） #

如果确认需要从返回的HTML中提取指定数据并生成JSON，可以通过Flutter的HTML解析库实现，步骤如下：

1. 引入官方维护的html解析依赖，在pubspec.yaml中添加配置：

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.4

2. 编写解析转换代码，示例如下：

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

// 入参为接口返回的HTML字符串
Map<String, dynamic> htmlToJson(String htmlStr) {
  // 解析HTML生成DOM对象
  Document dom = parse(htmlStr);
  
  // 按业务需求提取对应节点的内容/属性
  // 示例：提取页面标题、站点根地址、主题色
  String? title = dom.querySelector('title')?.text;
  String? baseUrl = dom.querySelector('base')?.attributes['href'];
  String? themeColor = dom.querySelector('meta[name="theme-color"]')?.attributes['content'];

  // 组装为Map后可直接转为JSON格式
  Map<String, dynamic> result = {
    "pageTitle": title,
    "baseUrl": baseUrl,
    "themeColor": themeColor
    // 按需添加其他需要提取的字段
  };

  // 如需JSON字符串直接调用jsonEncode(result)即可
  return result;
}

注意：你需要根据自己要提取的内容编写对应的DOM选择器，不同HTML结构的选择器规则完全不同，没有通用的转换逻辑。

内容的提问来源于stack exchange，提问作者G H Prakash