HarmonyOS鸿蒙Next中后端返回的富文本如何根据alias-label匹配渲染对应组件

后端返回了富文本内容这个内容都是有规则的< img style="" draggable=“false” src="/storage/A4AE61E66CD26E888F4592833D56497F" duration= “291000” width=“233” audio-src="/storage/D12C09216463D988592B30CBAC5C986F" source-url="/storage/D12C09216463D988592B30CBAC 5C986F" alias-label=“audio” name=“大青蛙夫为妻纲.mp3” height=“auto”> 好比这个标签，虽然返回的是img但是实际上根据alias-label=“audio” 这个来判断他是一个audio那么就将返回的富文本用下面的办法进行处理一下

export interface TextItem {
  type: 'text';
  value: string;
}

export interface ImageItem {
  type: 'image';
  src: string;
}

export interface VideoItem {
  type: 'video';
  src: string;
  poster?: string;
  duration?: number;
}

export interface PdfItem {
  type: 'pdf';
  src: string;
}

export interface AudioItem {
  type: 'audio';
  src: string;
  duration?: number;
}

export type ContentItem = TextItem | ImageItem | VideoItem | PdfItem | AudioItem;

export function parseRichTextAsync(html: string): Promise<ContentItem[]> {
  return new Promise((resolve) => {
    const result: ContentItem[] = [];

    // 匹配 iframe、img、p 标签
    const regex = /(<iframe[^>]*pdfiframe="true"[^>]*>[\s\S]*?<\/iframe>|<img[^>]*>|<p[^>]*>[\s\S]*?<\/p>)/gi;
    let lastIndex = 0;
    let match: RegExpExecArray | null;
    
    while ((match = regex.exec(html)) !== null) {
      const tag = match[0];
      const index = match.index;
    
      // 标签前的纯文本
      if (index > lastIndex) {
        const text = html.substring(lastIndex, index).trim();
        if (text) result.push({ type: 'text', value: text });
      }
    
      // 处理 iframe → pdf
      if (tag.startsWith('<iframe')) {
        const srcMatch = tag.match(/_src="([^"]+)"/i);
        if (srcMatch) result.push({ type: 'pdf', src: srcMatch[1] });
    
        // iframe 内部文字或者后面紧跟文字
        // 去掉 iframe 标签，再生成 text
        const textAfterIframe = tag.replace(/<iframe[^>]*>[\s\S]*?<\/iframe>/i, '').trim();
        if (textAfterIframe) result.push({ type: 'text', value: textAfterIframe });
      }
      // 处理 img
      else if (tag.startsWith('<img')) {
        const aliasMatch = tag.match(/alias-label="([^"]+)"/i);
        const alias = aliasMatch ? aliasMatch[1] : '';
    
        const srcMatch = tag.match(/src="([^"]+)"/i);
        const src = srcMatch ? srcMatch[1] : '';
    
        const durationMatch = tag.match(/duration="([^"]+)"/i);
        const duration = durationMatch ? Number(durationMatch[1]) : undefined;
    
        const posterMatch = tag.match(/video-pic="([^"]+)"/i);
        const poster = posterMatch ? posterMatch[1] : undefined;
    
        if (alias === 'video') result.push({ type: 'video', src, poster, duration });
        else if (alias === 'audio') result.push({ type: 'audio', src, duration });
        else result.push({ type: 'image', src });
      }
      // 处理 p 标签 → text（保留 span 样式）
      else if (tag.startsWith('<p')) {
        let inner = tag.replace(/^<p[^>]*>/i, '').replace(/<\/p>$/i, '').trim();
    
        // 如果 p 内有 img / iframe，再用同样正则递归解析
        const innerMatches = inner.match(/<iframe[^>]*pdfiframe="true"[^>]*>[\s\S]*?<\/iframe>|<img[^>]*>/gi);
        if (innerMatches) {
          let startIdx = 0;
          innerMatches.forEach((m) => {
            const idx = inner.indexOf(m, startIdx);
            if (idx > startIdx) {
              const textPart = inner.substring(startIdx, idx).trim();
              if (textPart) result.push({ type: 'text', value: textPart });
            }
    
            // 解析 img / iframe
            if (m.startsWith('<iframe')) {
              const srcMatch = m.match(/_src="([^"]+)"/i);
              if (srcMatch) result.push({ type: 'pdf', src: srcMatch[1] });
            } else if (m.startsWith('<img')) {
              const aliasMatch = m.match(/alias-label="([^"]+)"/i);
              const alias = aliasMatch ? aliasMatch[1] : '';
    
              const srcMatch = m.match(/src="([^"]+)"/i);
              const src = srcMatch ? srcMatch[1] : '';
    
              const durationMatch = m.match(/duration="([^"]+)"/i);
              const duration = durationMatch ? Number(durationMatch[1]) : undefined;
    
              const posterMatch = m.match(/video-pic="([^"]+)"/i);
              const poster = posterMatch ? posterMatch[1] : undefined;
    
              if (alias === 'video') result.push({ type: 'video', src, poster, duration });
              else if (alias === 'audio') result.push({ type: 'audio', src, duration });
              else result.push({ type: 'image', src });
            }
    
            startIdx = idx + m.length;
          });
    
          // 剩余文字
          const remainingText = inner.substring(startIdx).trim();
          if (remainingText) result.push({ type: 'text', value: remainingText });
        } else if (inner) {
          result.push({ type: 'text', value: inner });
        }
      }
    
      lastIndex = regex.lastIndex;
    }
    
    // 标签之后剩余文本
    if (lastIndex < html.length) {
      const text = html.substring(lastIndex).trim();
      if (text) result.push({ type: 'text', value: text });
    }
    
    resolve(result);

  });
}

处理之后就会返回: 这样的数据 然后进行判断处理 然后在页面中逐一进行渲染