Nuxt中如何从API返回的YouTube嵌入代码提取Iframe的src属性

方法1：正则表达式提取（兼容服务端/客户端，无额外依赖） #

这种方法逻辑轻量，不需要引入额外依赖包，SSR环境也能正常运行：

• 匹配规则直接定位iframe标签里的src属性值，同时可以自动完成embed链接到watch链接的转换，适配你用到的video-embed组件要求。
  代码示例：

// 假设通过axios拿到的接口返回数据存在response.data里
const imageList = response.data.images
imageList.forEach(item => {
  if (item.description) {
    // 提取iframe的src属性
    const srcMatch = item.description.match(/<iframe[^>]+src="([^"]+)"/i)
    if (srcMatch && srcMatch[1]) {
      let youtubeSrc = srcMatch[1]
      // 把embed格式转成watch格式适配组件要求
      youtubeSrc = youtubeSrc.replace('embed/', 'watch?v=')
      // 处理完成的youtubeSrc可以直接传入video-embed组件的src属性
    }
  }
})

方法2：DOM解析提取（更稳定，适合HTML结构复杂的场景） #

如果description里的HTML结构不固定，用正则容易匹配出错的话，可以用DOMParser解析DOM节点提取属性：
注意：如果是Nuxt SSR环境下运行，需要先安装jsdom依赖模拟DOM环境，客户端侧直接运行无需额外依赖。
代码示例：

// 客户端侧代码
const parser = new DOMParser()
imageList.forEach(item => {
  if (item.description) {
    const doc = parser.parseFromString(item.description, 'text/html')
    const iframe = doc.querySelector('iframe')
    if (iframe) {
      let youtubeSrc = iframe.src
      youtubeSrc = youtubeSrc.replace('embed/', 'watch?v=')
      // 处理后的src直接给组件使用
    }
  }
})

实际在Nuxt中的使用示例 #

你可以在fetch/asyncData钩子中处理接口返回的数据，存到data里直接传给组件：

<template>
  <div>
    <video-embed :src="videoSrc" v-if="videoSrc"></video-embed>
  </div>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: ''
    }
  },
  async fetch() {
    const { data } = await this.$axios.get('你的API接口地址')
    const desc = data.images[0]?.description
    if (desc) {
      const srcMatch = desc.match(/<iframe[^>]+src="([^"]+)"/i)
      if (srcMatch?.[1]) {
        this.videoSrc = srcMatch[1].replace('embed/', 'watch?v=')
      }
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者J.O