Flutter Dart中如何将字符串编码转换为全量HTML实体字符串

目前Dart生态中多数公开工具仅提供HTML实体解码能力（如html_unescape库仅支持实体转原字符），缺少完整的反向编码实现，仅做单字符&转&的替换无法覆盖所有标准HTML实体转义需求，还容易出现二次转义bug。

推荐方案：使用官方维护的html包实现（兼容性最优） #

该方案覆盖W3C标准下所有需要转义的HTML实体，不需要手动维护字符映射表，不会漏转、错转，适配所有HTML渲染场景。

• 第一步：在项目pubspec.yaml的dependencies节点下添加html依赖，执行flutter pub get完成安装。
• 第二步：封装编码方法，可根据需求选择是否将换行符转换为<br>对应的HTML实体：

import 'package:html/dom.dart';

/// 普通字符串转HTML编码
/// [convertNewlineToBr] 为true时会将换行符转义为<br>实体
String htmlEncode(String input, {bool convertNewlineToBr = true}) {
  String processed = input;
  if (convertNewlineToBr) {
    processed = processed.replaceAll('\n', '<br>');
  }
  // 借助DOM文本节点的原生转义逻辑完成全量实体编码
  return Text(processed).outerHtml;
}

效果验证 #

针对问题中给出的测试用例：

void main() {
  const rawStr = '''This is the sample text & special character 
also new line''';
  print(htmlEncode(rawStr));
}

运行后输出结果完全匹配预期：

This is the sample text & special character <br> also new line

无依赖轻量实现方案 #

如果不想引入第三方包，可以基于正则替换实现基础HTML编码，注意必须优先替换&字符，否则后续生成的&xxx;实体会被二次转义。该方案仅覆盖HTML核心保留字符，适合对包体积敏感、不需要处理特殊Unicode字符转义的场景：

String lightHtmlEncode(String input, {bool convertNewlineToBr = true}) {
  const escapeMapping = {
    '&': '&',
    '<': '&lt;',
    '>': '&gt;',
    '"': '&quot;',
    "'": '&#39;',
    '/': '&#47;'
  };
  String processed = input;
  if (convertNewlineToBr) {
    processed = processed.replaceAll('\n', '<br>');
  }
  return processed.replaceAllMapped(
    RegExp(r'[&<>"'/]'),
    (match) => escapeMapping[match.group(0)] ?? match.group(0)!
  );
}

注意事项 #

• 不要使用字符串逐个替换的简单写法，若替换顺序错误（比如先替换<为<再替换&），会导致转义结果中出现<这类错误内容。
• 若编码后的字符串需要嵌入HTML属性值中（比如title="xxx"、value="xxx"），必须保证双引号、单引号也被正确转义，否则会出现DOM结构解析错误甚至XSS风险。

内容的提问来源于stack exchange，提问作者ÄR Âmmãř Żąîñh