如何用Dart的RegExp从字符串中提取tracks的src链接

我来帮你搞定这个问题！从处理后的wp-playlist HTML字符串里提取tracks数组内的src链接，有两种可行的方法，我会分别说明——优先推荐更稳定的JSON解析方案，再给你纯正则表达式的实现。

方法一：JSON解析（推荐） #

WordPress的播放列表通常会把曲目数据存在data-playlist属性的JSON字符串里，比起正则表达式，直接解析JSON能避免很多结构变化带来的匹配错误，可靠性更高。

步骤如下：

1. 从处理后的HTML中提取data-playlist属性里的JSON内容
2. 将JSON字符串解码为Dart对象
3. 遍历tracks数组，提取每个元素的src字段

代码示例：

import 'dart:convert';

void extractTrackSrcs(String processedHtml) {
  // 匹配data-playlist属性的JSON内容
  final playlistDataRegex = RegExp(r'data-playlist="([^"]+)"');
  final playlistMatch = playlistDataRegex.firstMatch(processedHtml);

  if (playlistMatch != null) {
    try {
      // 提取并解析JSON
      final playlistJson = playlistMatch.group(1)!;
      final playlistMap = jsonDecode(playlistJson) as Map<String, dynamic>;
      final tracks = playlistMap['tracks'] as List<dynamic>? ?? [];

      // 提取所有src链接（过滤空值）
      final trackSrcs = tracks
          .where((track) => track['src'] != null)
          .map((track) => track['src'] as String)
          .toList();

      // 输出结果
      print('提取到的曲目链接：');
      trackSrcs.forEach(print);
    } catch (e) {
      print('解析JSON出错：$e');
    }
  } else {
    print('未找到playlist数据');
  }
}

// 使用示例
void main() {
  // 模拟你处理后的HTML字符串（已去除换行、制表符、单引号）
  final processedHtml = '<div class="wp-playlist" data-playlist="{&quot;tracks&quot;:[{&quot;src&quot;:&quot;https://example.com/track1.mp3&quot;,&quot;title&quot;:&quot;Track 1&quot;},{&quot;src&quot;:&quot;https://example.com/track2.mp3&quot;,&quot;title&quot;:&quot;Track 2&quot;}]}"></div>';
  extractTrackSrcs(processedHtml);
}

方法二：纯正则表达式实现 #

如果一定要用RegExp来提取，我们可以构造一个正则，专门匹配tracks数组范围内的src字段，避免误匹配其他地方的链接。

代码示例：

void extractTrackSrcsWithRegex(String processedHtml) {
  // 正则说明：匹配tracks数组内的src字段，确保只在数组闭合前的内容里匹配
  final trackSrcRegex = RegExp(
    r'"src":"([^"]+)"(?=[^\]]*?\])',
    dotAll: true, // 允许.匹配任意字符（因为你已经去掉了换行）
  );

  final matches = trackSrcRegex.allMatches(processedHtml);
  final trackSrcs = matches.map((match) => match.group(1)!).toList();

  // 输出结果
  print('提取到的曲目链接：');
  trackSrcs.forEach(print);
}

// 使用示例
void main() {
  final processedHtml = '<div class="wp-playlist" data-playlist="{&quot;tracks&quot;:[{&quot;src&quot;:&quot;https://example.com/track1.mp3&quot;,&quot;title&quot;:&quot;Track 1&quot;},{&quot;src&quot;:&quot;https://example.com/track2.mp3&quot;,&quot;title&quot;:&quot;Track 2&quot;}]}"></div>';
  extractTrackSrcsWithRegex(processedHtml);
}

这个正则的逻辑：

• "src":"([^"]+)"：匹配src字段的键值对，捕获链接内容到分组1
• (?=[^\]]*?\])：正向预查，确保当前匹配的内容后面跟着的是任意非]的字符（非贪婪匹配），直到遇到]（tracks数组的闭合括号），这样就限定了只匹配tracks数组内的src。

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