如何在React Native Expo中解析M3U文件并提取标题与URL

方法一：手动解析（轻量场景） #

M3U文件的核心格式通常是#EXTINF:-1,标题后紧跟一行URL，你可以直接读取文件内容后按行遍历提取：

import * as FileSystem from 'expo-file-system';

const parseM3U = async (fileUri) => {
  try {
    // 读取文件内容
    const content = await FileSystem.readAsStringAsync(fileUri);
    // 分割行并过滤空行
    const lines = content.split('\n').map(line => line.trim()).filter(line => line);
    const playlist = [];
    let currentTitle = '';

    for (let i = 0; i < lines.length; i++) {
      const line = lines[i];
      // 匹配EXTINF行提取标题
      if (line.startsWith('#EXTINF:')) {
        const titleMatch = line.match(/#EXTINF:\d+,(.+)/);
        if (titleMatch) currentTitle = titleMatch[1];
      } 
      // 非注释行视为URL，且已有标题时存入结果
      else if (!line.startsWith('#') && currentTitle) {
        playlist.push({ title: currentTitle, url: line });
        currentTitle = '';
      }
    }
    return playlist;
  } catch (error) {
    console.error('M3U解析失败:', error);
    return [];
  }
};

// 使用示例（本地文件）
// const playlist = await parseM3U(FileSystem.documentDirectory + 'my_playlist.m3u');

如果是远程M3U文件，用fetch获取内容后再传入解析逻辑：

const parseRemoteM3U = async (remoteUrl) => {
  try {
    const res = await fetch(remoteUrl);
    const content = await res.text();
    // 复用上面的行处理逻辑，这里省略重复代码
    // ...
  } catch (err) {
    console.error('获取远程M3U失败:', err);
  }
};

方法二：使用第三方库（复杂场景） #

如果需要解析带扩展属性的M3U8（比如直播流、多码率列表），可以用m3u8-parser库，它支持完整的M3U8规范：

1. 安装依赖：

npm install m3u8-parser
# 或
yarn add m3u8-parser

2. 解析代码示例：

import { Parser } from 'm3u8-parser';
import * as FileSystem from 'expo-file-system';

const parseM3UWithLibrary = async (fileUri) => {
  try {
    const content = await FileSystem.readAsStringAsync(fileUri);
    const parser = new Parser();
    
    // 传入内容并结束解析
    parser.push(content);
    parser.end();

    // 提取播放列表的标题与URL
    const playlist = parser.manifest.playlists.map(item => ({
      title: item.attributes.NAME || '未命名',
      url: item.uri
    }));

    // 若需解析媒体切片（直播流场景），可访问parser.manifest.segments
    // const segments = parser.manifest.segments.map(seg => ({ url: seg.uri }));

    return playlist;
  } catch (error) {
    console.error('M3U解析失败:', error);
    return [];
  }
};

注意事项 #

• 确保M3U文件编码为UTF-8，避免解析乱码；
• 部分M3U文件可能包含更多注释行（以#开头），解析时需跳过这些非核心内容；
• Expo环境中读取本地文件需注意权限，可配合expo-document-picker选择用户设备上的M3U文件。

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