Dart中如何从字符串中提取img标签src属性的文本内容？

需求场景 #

需要从给定的img标签字符串中，提取src属性对应的文本内容，待处理示例字符串如下：

var string ='<img src="https://d3btgtzu3ctdwx.cloudfront.net/nf1?t=8e67f6f9-efba-4c3b-b718-517512044736" height="1" width="1" border="0" alt="" style="height: 0; width: 0;" />'

方案1：正则表达式快速匹配 #

适合格式固定、结构简单的HTML片段提取场景，实现成本低。

匹配规则 #

使用如下正则对象即可兼容单引号、双引号包裹的src属性，同时忽略img标签的大小写：

final srcReg = RegExp(r'<img[^>]*src=["\']([^"\']*)["\']', caseSensitive: false);

如果可以确定所有src属性都用双引号包裹，可以用更简单的正则提升匹配效率：

final srcReg = RegExp(r'src="([^"]*)"');

完整提取示例 #

void main() {
  var string ='<img src="https://d3btgtzu3ctdwx.cloudfront.net/nf1?t=8e67f6f9-efba-4c3b-b718-517512044736" height="1" width="1" border="0" alt="" style="height: 0; width: 0;" />';
  final srcReg = RegExp(r'<img[^>]*src=["\']([^"\']*)["\']', caseSensitive: false);
  final match = srcReg.firstMatch(string);
  if (match != null) {
    // 取第一个捕获分组的内容就是src值
    String srcContent = match.group(1)!;
    print(srcContent);
    // 输出：https://d3btgtzu3ctdwx.cloudfront.net/nf1?t=8e67f6f9-efba-4c3b-b718-517512044736
  }
}

注意：正则方案不适合处理结构复杂、格式不确定的完整HTML内容，遇到属性值含转义引号、标签嵌套在注释中、属性顺序极端特殊的场景容易出现匹配错误。

方案2：DOM节点解析（生产环境推荐） #

如果需要处理的HTML来源复杂、格式不固定，不要使用正则匹配，直接使用Dart的HTML解析能力将字符串解析为标准DOM树，定位到img标签后直接读取src属性值即可，容错率远高于正则方案，不会出现特殊场景匹配失效的问题。

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