Flutter中HTML字符串转换为纯文本的实用指南

dependencies:
  flutter:
    sdk: flutter
  html: ^0.15.4 # 请使用最新稳定版本

import 'package:html/parser.dart' show parse;
import 'package:html/dom.dart'; // 导入dom模块以使用Node、Element等类型

/// 从HTML字符串中提取纯文本内容
///
/// 该函数解析给定的HTML字符串，并尝试提取所有可见的纯文本内容。
/// 它通过访问HTML文档的body元素并获取其所有文本来实现。
/// 注意：此方法会移除所有HTML标签，但可能不会保留原始的格式（如段落间距、换行符等）。
/// 对于更复杂的格式保留，可能需要进行更精细的节点遍历。
String extractPlainTextFromHtml(String htmlString) {
  // 使用 parse 函数解析HTML字符串，返回一个Document对象
  final document = parse(htmlString);

  // 获取body元素中的所有文本内容。
  // document.body?.text 会自动拼接所有子节点的文本内容，
  // 并自动处理HTML实体（如 & 会被转换为 &）。
  // 如果body为null（例如，HTML字符串不完整），则返回空字符串。
  return document.body?.text ?? '';
}

// 示例用法：
void main() {
  String htmlContent = "<p>Hello <b>world</b>!</p><br><span>This is a test.</span>";
  String plainText = extractPlainTextFromHtml(htmlContent);
  print('原始HTML内容:\n$htmlContent');
  print('提取的纯文本内容:\n$plainText'); 
  // 预期输出: "Hello world!This is a test."

  String complexHtml = """
    <h1>标题</h1>
    <p>这是第一段。</p>
    <ul>
      <li>列表项1</li>
      <li>列表项2</li>
    </ul>
    <p>这是第二段，带有<b>粗体</b>文字。</p>
  """;
  String complexPlainText = extractPlainTextFromHtml(complexHtml);
  print('\n复杂HTML内容:\n$complexHtml');
  print('提取的纯文本内容:\n$complexPlainText');
  // 预期输出: "标题这是第一段。列表项1列表项2这是第二段，带有粗体文字。"
  // 注意：此方法默认不会添加换行符或空格来模拟块级元素间的间距。
}

import 'package:flutter/material.dart';
import 'package:html/parser.dart' show parse; // 引入HTML解析器

// 假设 extractPlainTextFromHtml 函数已在别处定义或直接写在此处
String extractPlainTextFromHtml(String htmlString) {
  final document = parse(htmlString);
  return document.body?.text ?? '';
}

class HtmlToPlainTextEditor extends StatefulWidget {
  final String initialHtmlContent;

  const HtmlToPlainTextEditor({Key? key, required this.initialHtmlContent}) : super(key: key);

  @override
  _HtmlToPlainTextEditorState createState() => _HtmlToPlainTextEditorState();
}

class _HtmlToPlainTextEditorState extends State<HtmlToPlainTextEditor> {
  late TextEditingController _controller;

  @override
  void initState() {
    super.initState();
    // 将HTML内容转换为纯文本，并初始化TextEditingController
    final plainText = extractPlainTextFromHtml(widget.initialHtmlContent);
    _controller = TextEditingController(text: plainText);
  }

  @override
  void dispose() {
    // 务必在Widget销毁时释放Controller资源
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('HTML纯文本编辑示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text('原始HTML内容:', style: TextStyle(fontWeight: FontWeight.bold)),
            Text(widget.initialHtmlContent, maxLines: 5, overflow: TextOverflow.ellipsis),
            const SizedBox(height: 20),
            const Text('编辑纯文本内容:', style: TextStyle(fontWeight: FontWeight.bold)),
            Expanded(
              child: TextFormField(
                controller: _controller,
                maxLines: null, // 允许无限行，使文本框可滚动
                expands: true, // 允许文本框扩展以填充可用空间
                textAlignVertical: TextAlignVertical.top, // 文本从顶部开始
                decoration: const InputDecoration(
                  hintText: '在此编辑纯文本内容...',
                  border: OutlineInputBorder(),
                  contentPadding: EdgeInsets.all(12.0),
                ),
                keyboardType: TextInputType.multiline,
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 可以在这里获取用户编辑后的纯文本内容
                print('用户编辑后的纯文本: ${_controller.text}');
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('当前内容: ${_controller.text}')),
                );
              },
              child: const Text('保存'),
            ),
          ],
        ),
      ),
    );
  }
}

// 如何使用这个Widget:
// void main() {
//   runApp(MaterialApp(
//     home: HtmlToPlainTextEditor(
//       initialHtmlContent: "<p>Hello <b>world</b>!</p><br><span>This is a test.</span><p>Another paragraph.</p>",
//     ),
//   ));
// }