如何渲染Strapi返回的oEmbed标签URL？

浏览器本身不识别<oembed>标签，直接用dangerouslySetInnerHTML渲染不会显示视频。你需要把这些标签替换成对应平台的iframe代码，下面是具体实现方案：

方案1：正则表达式替换（快速实现） #

写一个处理函数，匹配富文本中的<oembed>标签，提取视频URL后生成对应平台的iframe：

import React from 'react';

const processOEmbed = (htmlContent) => {
  // 匹配所有oembed标签
  const oEmbedRegex = /<oembed url="([^"]+)"[^>]*><\/oembed>/gi;

  return htmlContent.replace(oEmbedRegex, (match, url) => {
    // 处理YouTube视频
    const youtubeMatch = url.match(/youtube\.com\/watch\?v=([^&]+)/);
    if (youtubeMatch) {
      const videoId = youtubeMatch[1];
      return `<iframe 
        width="560" 
        height="315" 
        src="https://www.youtube.com/embed/${videoId}" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen
      ></iframe>`;
    }

    // 扩展支持Vimeo（可选）
    const vimeoMatch = url.match(/vimeo\.com\/(\d+)/);
    if (vimeoMatch) {
      const videoId = vimeoMatch[1];
      return `<iframe 
        src="https://player.vimeo.com/video/${videoId}" 
        width="640" 
        height="360" 
        frameborder="0" 
        allow="autoplay; fullscreen; picture-in-picture" 
        allowfullscreen
      ></iframe>`;
    }

    // 不支持的平台返回原标签
    return match;
  });
};

// 使用组件
const RichTextDisplay = ({ content }) => {
  const processedHtml = processOEmbed(content);
  return <div dangerouslySetInnerHTML={{ __html: processedHtml }} />;
};

export default RichTextDisplay;

方案2：DOMParser处理（更可靠，适合复杂DOM） #

如果富文本结构复杂，正则可能漏匹配，用DOMParser直接操作DOM节点更稳妥：

const processOEmbed = (htmlContent) => {
  const parser = new DOMParser();
  const doc = parser.parseFromString(htmlContent, 'text/html');
  const oEmbedTags = doc.querySelectorAll('oembed');

  oEmbedTags.forEach(tag => {
    const videoUrl = tag.getAttribute('url');
    if (!videoUrl) return;

    const iframe = document.createElement('iframe');
    // 处理YouTube
    const youtubeId = videoUrl.match(/youtube\.com\/watch\?v=([^&]+)/)?.[1];
    if (youtubeId) {
      iframe.src = `https://www.youtube.com/embed/${youtubeId}`;
      iframe.width = '560';
      iframe.height = '315';
      iframe.title = 'YouTube视频';
      iframe.frameBorder = '0';
      iframe.allow = 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture';
      iframe.allowFullscreen = true;
      tag.parentNode.replaceChild(iframe, tag);
    }
    // 可继续添加其他平台的处理逻辑
  });

  return doc.body.innerHTML;
};

额外提示 #

• 可以根据需求扩展支持更多oEmbed平台（比如Twitter、Instagram），只需要添加对应的URL匹配规则和iframe模板
• 如果想在后端处理，可以检查Strapi富文本插件的配置，部分插件支持自动将oEmbed链接转换为iframe，减少前端工作量
• 使用dangerouslySetInnerHTML时要确保内容来自可信来源，避免XSS攻击

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