Flutter用flutter_html渲染WordPress报Bad state: No element错误的解决方法

问题现状 #

• 项目已完成WordPress站点的内容拉取，可正常获取到带HTML标签的内容数据，使用flutter_html包实现内容渲染时触发渲染失败。
• 运行时抛出Bad state: No element错误，报错关联组件为Html渲染组件，初步推测触发原因是待渲染数据中包含未被确认的script标签。
• 当前实现代码如下：

Widget _buildDescription() {
    return Column(
      children: [
        Text(items.id.toString()),
        Html(data: items.title["rendered"]),
        Html(
          data: items.content["rendered"],
        ),
      ],
    );
  }

• 配套参考素材包含调试页面、原始报错页面、升级flutter_html至1.2.0版本后的页面展示三类截图。

解决方案 #

• 前置清洗原始HTML内容
  flutter_html对script、style、noscript这类非排版类标签的解析容错性较弱，遇到这类标签时很容易触发内部解析逻辑的空元素匹配异常。在将内容传入Html组件前，可通过正则规则移除所有上述标签及其包裹的全部内容；同时移除内容中残留的不完整标签片段、无匹配上下文的孤立代码块，避免解析器遇到空节点触发异常。
• 调整Html组件容错配置
  为Html组件补充全链路的异常兜底逻辑，包括图片加载失败、链接点击等场景的空回调实现，避免子组件构建失败连带触发整体渲染报错。旧版1.x系列的flutter_html存在已知的复杂HTML解析空元素匹配bug，可根据实际使用版本对照官方说明升级到稳定版本，同步调整自定义标签扩展的配置。
• 逐段定位异常内容
  打印待渲染的完整原始HTML字符串，通过逐段拆分测试的方式定位触发渲染异常的具体内容片段，重点排查WordPress插件自动插入的未闭合空标签、残缺的HTML结构片段。

内容的提问来源于stack exchange，提问作者Furkan Toptaş