如何正确转换HTML到JSON？Flutter/Dart中提取JSON内HTML内容失败的问题求助

首先，我猜你大概率是在Flutter移动端项目里误用了dart:html库的解析方法——这个库只适用于Web平台，在移动端环境下解析HTML会出现异常，导致返回空文本。下面给出正确的解决方案：

步骤1：添加正确的HTML解析包 #

在你的pubspec.yaml中添加纯Dart实现的html依赖（支持所有Flutter平台）：

dependencies:
  html: ^0.15.4 # 可替换为最新版本

执行flutter pub get完成依赖安装。

步骤2：修改解析代码 #

导入html包并重新编写解析逻辑，就能正确获取HTML中的文本内容：

import 'package:html/parser.dart' as html_parser;
import 'package:html/dom.dart' as dom;

// 假设你已完成JSON解析
Map<String, dynamic> jsonData = {"somed":"<h2>Thing<\/h2>\n<h1>Interesting<\/h1>\n<p>Expiring<\/p>\n"};

// 解析HTML片段
dom.Document document = html_parser.parse(jsonData["somed"]);

// 获取所有标签内的拼接文本
String allText = document.body!.text;
print(allText); // 输出：ThingInterestingExpiring

// 如果你需要分别获取每个标签的文本，可以遍历子元素
List<dom.Element> elements = document.body!.children;
for (var element in elements) {
  print(element.text);
}
// 输出：
// Thing
// Interesting
// Expiring

为什么之前的代码无效？ #

• 如果你用的是dart:html的parse方法，在Flutter移动端中这个库没有浏览器环境支撑，解析后的文档结构会异常，导致documentElement!.text返回空值。
• 你之前尝试的innerHTML/outerHTML同样是dart:html的属性，在移动端无法正常工作，换成html包中的outerHtml属性就能获取完整HTML内容：

String fullHtml = document.body!.outerHtml;
print(fullHtml); // 输出body内的完整HTML代码

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