NextJS 13中用html-react-parser提取<video>元素src属性

要从domNode中获取<video>标签的src属性，直接访问domNode.attribs对象即可——这个对象存储了解析后DOM元素的所有原生属性。修改后的代码如下：

import parse, { Element, HTMLReactParserOptions } from "html-react-parser"
import VideoPlayer from "@/components/video-player"

export default function ArticleContent({ content }: { content: string }) {
  const parserOptions: HTMLReactParserOptions = {
    replace: (domNode) => {
      // 替换<video>标签为自定义VideoPlayer
      if (domNode instanceof Element && domNode.name === "video") {
         // 从attribs中提取src属性
         const videoSrc = domNode.attribs.src;
         // 可选：添加非空判断避免无效渲染
         return videoSrc ? <VideoPlayer src={videoSrc} /> : null;
      }
    }
  } 

  return (
    <div>
      {parse(content, parserOptions)}
    </div>
  )
}

额外说明 #

• domNode.attribs是html-react-parser内置的属性存储容器，所有HTML标签的原生属性（比如poster、controls）都能在这里找到，若需要给VideoPlayer传递更多参数，直接从该对象提取即可。
• 建议保留videoSrc的非空判断，防止CMS返回无src属性的<video>标签引发组件报错。

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