在Flutter应用开发中，我们经常会遇到需要处理富文本内容，例如从后端获取的HTML字符串。然而，TextEditingController和TextFormField默认只支持纯文本输入和显示。当尝试将带有HTML标签的字符串直接赋值给TextEditingController时，用户界面会显示原始的HTML标签，这不仅影响美观，也阻碍了正常的文本编辑操作。本文将深入探讨如何优雅地将HTML字符串转换为纯文本，以适应TextFormField的编辑需求。
问题背景
许多场景下，我们需要从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内容，包含了一些格式。'// '还有一些 链接 和
换行符。
'// 'alert("Hello");',// ),// ));// }
在这个示例中，HtmlTextEditorScreen在初始化时接收一个HTML字符串。在initState方法中，它调用convertHtmlToPlainText函数将HTML转换为纯文本，然后用这个纯文本初始化_textEditingController。这样，TextFormField就会显示干净的纯文本，用户可以正常编辑。
注意事项与进阶考虑
HTML实体处理： package:html在提取text时会自动处理HTML实体（如&转换为&，<转换为
换行符处理： document.body?.text会将所有块级元素（如
,
等）之间的内容合并，通常不会自动插入换行符。如果需要保留段落间的换行，您可能需要更复杂的解析逻辑，例如在解析时替换为nn，或在convertHtmlToPlainText函数中进行后处理。
示例（简单换行处理）：
String convertHtmlToPlainTextWithNewlines(String htmlString) { final Document document = parse(htmlString); // 替换常见的块级元素为带换行的形式 String processedHtml = htmlString .replaceAllMapped(RegExp(r''), (match) => 'n') // 处理
.replaceAllMapped(RegExp(r''), (match) => 'nn') // 处理 .replaceAllMapped(RegExp(r''), (match) => 'nn') // 处理这种方法是在解析前对HTML字符串进行预处理，然后再次解析，以期在body?.text中体现出换行。但最佳实践是更精细地遍历DOM树，根据节点类型决定是否添加换行。
脚本和样式： document.body?.text通常不会包含和标签内的内容，因为它们不属于可见的文本内容。这符合我们剥离HTML标签的需求。
性能： 对于非常大的HTML字符串，解析可能会有轻微的性能开销。但在大多数移动应用场景中，这种开销通常可以忽略不计。
反向转换： 请注意，这个过程是单向的。从HTML转换为纯文本会丢失所有格式信息。如果您需要将用户编辑后的纯文本重新转换为HTML，您需要一个富文本编辑器或自定义逻辑来重新添加格式。
总结
通过使用package:html库，我们可以轻松地将HTML字符串转换为纯文本，从而在Flutter的TextFormField中实现无缝的文本编辑体验。document.body?.text提供了一种简洁高效的方式来提取HTML文档的可见文本内容，是处理此类需求的推荐方法。理解其工作原理和注意事项，将帮助您构建更加健壮和用户友好的Flutter应用。
微信扫一扫 
支付宝扫一扫 
