Flutter中如何校验API返回的输入字符串是否为HTML格式？

一、先校验输入是否为HTML格式 #

1. 快速基础校验 #

如果只是要快速筛掉明显非HTML的内容，用正则匹配HTML标签就行：

bool isHtml(String input) {
  final htmlRegex = RegExp(r'<[^>]+>');
  // 匹配是否存在至少一对HTML标签，同时排除纯文本里的尖括号（比如数学公式）
  return htmlRegex.hasMatch(input) && !input.contains(r'\<[0-9a-zA-Z]+\>');
}

这种方式够快，但没法识别格式错误的HTML，比如未闭合的标签或者非法属性。

2. 严谨校验（生产环境用） #

要准确判断是不是能正常解析的HTML，用Dart官方的html包最靠谱，它能直接解析并验证HTML结构：
先在pubspec.yaml加依赖：

dependencies:
  html: ^0.15.4

然后写校验逻辑：

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

bool isValidHtml(String input) {
  try {
    // 尝试把输入解析成HTML文档
    final document = parse(input);
    // 解析后如果body下有元素，就算有效HTML
    return document.body?.children.isNotEmpty ?? false;
  } catch (e) {
    // 解析失败说明不是有效HTML
    return false;
  }
}

这种方式能揪出格式错误的HTML，适合生产环境用。

二、把HTML/CSS转成Flutter组件 #

渲染HTML/CSS最常用的是flutter_html包，它支持内联CSS，还能自定义替换标签：

1. 加依赖 #

dependencies:
  flutter_html: ^3.0.0-beta.2

2. 基础渲染代码 #

import 'package:flutter_html/flutter_html.dart';

Html(
  data: apiResponseHtml, // 这里传API返回的HTML内容
  style: {
    // 全局样式覆盖，比如设置默认字体、间距
    'body': Style(
      fontSize: FontSize(16.0),
      color: Colors.black87,
      padding: EdgeInsets.all(12.0),
    ),
    'p': Style(
      margin: EdgeInsets.symmetric(vertical: 8.0),
    ),
  },
  // 自定义处理特定标签，比如把<a>改成Flutter的点击组件
  customRender: {
    'a': (context, child, attributes, _) {
      final url = attributes['href'];
      return GestureDetector(
        onTap: () {
          // 这里写跳转逻辑，比如用url_launcher打开链接
          // launchUrl(Uri.parse(url!));
        },
        child: Text(
          child?.text ?? '',
          style: TextStyle(color: Colors.blue, decoration: TextDecoration.underline),
        ),
      );
    },
  },
)

3. 处理外部CSS #

如果API返回的HTML引用了外部CSS文件，你可以先把CSS内容拉下来，然后通过stylesheet参数加载：

Html(
  data: apiResponseHtml,
  stylesheet: {
    // 把外部CSS内容转成字符串后传入
    'https://your-api.com/style.css': StyleSheet(
      'h1': Style(color: Colors.orange, fontSize: FontSize(24.0)),
    ),
  },
)

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