问题背景
许多场景下，我们需要从api或数据库中获取包含html格式的文本，例如文章内容、用户评论等。在展示这些内容时，可以使用flutter_html等库将其渲染为富文本。但当需要用户编辑这些内容时，例如将其加载到textformfield中，直接显示html标签会导致以下问题：
- 视觉混乱： 用户看到的是一堆HTML标签，而非易读的纯文本。
- 编辑困难： 用户可能无意中修改或删除了HTML标签，导致数据损坏或格式错误。
- 兼容性问题： TextEditingController不理解HTML，无法正确处理其内部结构。
为了解决这些问题，我们需要一个机制来剥离HTML标签，只保留其内部的纯文本内容。
解决方案：使用 package:html 解析HTML
package:html是一个强大的Dart库，用于解析HTML文档并构建DOM（文档对象模型）树。通过这个库，我们可以方便地访问HTML文档的各个部分，并提取所需的纯文本内容。
1. 添加依赖
首先，在您的pubspec.yaml文件中添加package:html依赖：
dependencies:
flutter:
sdk: flutter
html: ^0.15.4 # 请使用最新版本然后运行 flutter pub get 获取依赖。
立即学习“前端免费学习笔记（深入）”；
2. 实现HTML到纯文本的转换
package:html的核心功能是parse函数，它可以将HTML字符串转换为一个Document对象。Document对象代表了HTML的DOM树，我们可以通过遍历或直接访问其属性来获取纯文本。最简单且常用的方法是获取body元素的text属性。
以下是一个实现HTML到纯文本转换的函数示例：
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';
/// 将HTML字符串转换为纯文本
///
/// [htmlString] 待转换的HTML字符串。
/// 返回剥离HTML标签后的纯文本。
String convertHtmlToPlainText(String htmlString) {
// 使用parse函数解析HTML字符串，得到一个Document对象
final Document document = parse(htmlString);
// 获取文档的body元素，并提取其所有文本内容
// body?.text 会自动剥离所有HTML标签，并合并文本节点。
// 如果body为空，则返回空字符串。
final String? plainText = document.body?.text;
// 返回处理后的纯文本，如果为null则返回空字符串
return plainText ?? '';
}示例代码解析：
- import 'package:html/parser.dart' show parse;: 导入parse函数，它是解析HTML字符串的关键。
- import 'package:html/dom.dart';: 导入Document和其他DOM相关类。
- parse(htmlString): 将输入的HTML字符串解析成一个Document对象。这个对象代表了HTML文档的结构。
- document.body?.text: 这是获取纯文本最简洁有效的方式。document.body会返回HTML文档的元素。?.text是一个空安全操作符，它会获取元素及其所有子元素的纯文本内容，并自动移除所有HTML标签。如果body不存在，则返回null。
- plainText ?? '': 使用空合并操作符，确保即使document.body?.text返回null，函数也能返回一个非空的字符串（即空字符串）。
3. 将纯文本应用到 TextEditingController
现在，我们已经有了一个将HTML转换为纯文本的函数。接下来，将其集成到TextEditingController中：
import 'package:flutter/material.dart';
import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart';
// 上面定义的 convertHtmlToPlainText 函数
String convertHtmlToPlainText(String htmlString) {
final Document document = parse(htmlString);
final String? plainText = document.body?.text;
return plainText ?? '';
}
class HtmlTextEditorScreen extends StatefulWidget {
final String initialHtmlContent;
const HtmlTextEditorScreen({Key? key, required this.initialHtmlContent}) : super(key: key);
@override
_HtmlTextEditorScreenState createState() => _HtmlTextEditorScreenState();
}
class _HtmlTextEditorScreenState extends State {
late TextEditingController _textEditingController;
@override
void initState() {
super.initState();
// 在initState中，将HTML内容转换为纯文本并赋值给TextEditingController
final String plainText = convertHtmlToPlainText(widget.initialHtmlContent);
_textEditingController = TextEditingController(text: plainText);
}
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('编辑文章内容'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextFormField(
controller: _textEditingController,
maxLines: null, // 允许无限行
keyboardType: TextInputType.multiline,
decoration: const InputDecoration(
labelText: '文章内容',
hintText: '请输入纯文本内容',
border: OutlineInputBorder(),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {
// 用户编辑后的纯文本内容
final String editedContent = _textEditingController.text;
print('用户编辑后的纯文本内容：\n$editedContent');
// 在这里可以将编辑后的纯文本保存或进一步处理
// 如果需要保存为HTML，则需要一个富文本编辑器来重新生成HTML
},
child: const Text('保存'),
),
],
),
),
);
}
}
// 如何在您的应用中使用这个屏幕
// void main() {
// runApp(MaterialApp(
// home: HtmlTextEditorScreen(
// initialHtmlContent: '欢迎
这是一段HTML内容，包含了一些格式。'
// '还有一些 链接 和
换行符。
'
// '',
// ),
// ));
// } 在这个示例中，HtmlTextEditorScreen在初始化时接收一个HTML字符串。在initState方法中，它调用convertHtmlToPlainText函数将HTML转换为纯文本，然后用这个纯文本初始化_textEditingController。这样，TextFormField就会显示干净的纯文本，用户可以正常编辑。
注意事项与进阶考虑
HTML实体处理： package:html在提取text时会自动处理HTML实体（如&转换为&，zuojiankuohaophpcn转换为
-
换行符处理： document.body?.text会将所有块级元素（如
,
,.replaceAllMapped(RegExp(r'<\s*/h[1-6]\s*>'), (match) => '\n\n'); // 处理标题 final Document tempDoc = parse(processedHtml); return tempDoc.body?.text ?? ''; }等）之间的内容合并，通常不会自动插入换行符。如果需要保留段落间的换行，您可能需要更复杂的解析逻辑，例如在解析时替换为\n\n，或在convertHtmlToPlainText函数中进行后处理。
-
示例（简单换行处理）：
String convertHtmlToPlainTextWithNewlines(String htmlString) { final Document document = parse(htmlString); // 替换常见的块级元素为带换行的形式 String processedHtml = htmlString .replaceAllMapped(RegExp(r'<\s*br\s*/?>'), (match) => '\n') // 处理
.replaceAllMapped(RegExp(r'<\s*/p\s*>'), (match) => '\n\n') // 处理 .replaceAllMapped(RegExp(r'<\s*/div\s*>'), (match) => '\n\n') // 处理
这种方法是在解析前对HTML字符串进行预处理，然后再次解析，以期在body?.text中体现出换行。但最佳实践是更精细地遍历DOM树，根据节点类型决定是否添加换行。
-
脚本和样式： document.body?.text通常不会包含
性能： 对于非常大的HTML字符串，解析可能会有轻微的性能开销。但在大多数移动应用场景中，这种开销通常可以忽略不计。
反向转换： 请注意，这个过程是单向的。从HTML转换为纯文本会丢失所有格式信息。如果您需要将用户编辑后的纯文本重新转换为HTML，您需要一个富文本编辑器或自定义逻辑来重新添加格式。
总结
通过使用package:html库，我们可以轻松地将HTML字符串转换为纯文本，从而在Flutter的TextFormField中实现无缝的文本编辑体验。document.body?.text提供了一种简洁高效的方式来提取HTML文档的可见文本内容，是处理此类需求的推荐方法。理解其工作原理和注意事项，将帮助您构建更加健壮和用户友好的Flutter应用。
