嘿，朋友，你有没有遇到过这种情况？后端给你一段 HTML 字符串，里面不仅有普通的标签，还夹杂着一些“自定义格式”的内容，比如公式、链接、或者一些业务里约定好的特殊标记。你是不是第一反应就是想用正则去替换？

害，正则？那玩意儿Neng搞定简单的情况，但一旦涉及到组件嵌套、属性复杂、甚至还有事件绑定啥的，你就得抓耳挠腮了。所以今天咱不聊正则，咱聊点高级的——用 AST 把 HTML 转成 Vue3 的自定义组件！

你懂的，前端这行，有时候就是这么“折腾人”。你得自己动手，丰衣足食。那我们怎么Zuo呢？

我们得把那段 HTML 字符串解析成“抽象语法树”，再遍历它，把自定义格式的内容替换成我们自己的 Vue 组件。是不是听着就有点高大上了？哈哈，其实也没那么玄乎，咱就是说这事儿Neng干！

这一步其实挺简单的，浏览器原生就支持。你只需要用 DOMParser 就Neng把 HTML 字符串转成 DOM 树，也就是我们说的 AST。比如这样：

const parser = new DOMParser;
const doc = parser.parseFromString;
const ast = Array.from;

你kan，这不就拿到了一个 DOM 树的节点数组了嘛，接下来就是遍历它，把我们想要的节点替换成 Vue 的 VNode。

这一步是核心，也是Zui有趣的部分。我们要遍历这棵“树”，然后把自定义格式的内容替换成 Vue 组件。比如我们规定 {{$公式$}} 是数学公式，] 是链接，那我们就Ke以在遍历的时候，用正则匹配这些内容，然后替换成对应的组件。

比如这样：

const parseText =  => {
  const regex = //g;
  const parts = text.split;
  return parts.map => {
    if  && part.endsWith) {
      const url = part.slice;
      return h("a", {
        href: url,
        target: "_blank",
        style: { color: "#409EFF" }
      }, url);
    } else if  && part.endsWith) {
      const math = part.slice;
      try {
        const html = katex.renderToString;
        return h;
      } catch  {
        return h;
      }
    }
    return part;
  });
};

你kan，这样就把链接和公式dou转成组件了。是不是有点意思？

接下来就是把整个 DOM 树转成 Vue 的 VNode。这一步用的是 Vue3 的 h 函数，我们递归遍历 AST，把每个节点dou转成 VNode，Zui后再用 Vue 的渲染函数渲染出来。

比如这样：

const parseNode =  => {
  if  {
    return parseText;
  } else if  {
    const tagName = node.tagName.toLowerCase;
    const attrs = {};
    for  {
      const attr = node.attributes;
      attrs = attr.value;
    }
    const children = Array.from.flatMap;
    return h;
  }
  return null;
};

这样，我们就把整个 HTML 字符串转成了 Vue 的 VNode 树，然后就Ke以直接渲染了。是不是hen爽？

哦对了你是不是也遇到过“为什么百度不收录”的问题？

说实话，这事儿吧，跟我们今天聊的这个技术实现关系不大，但咱就是说百度收录这事儿，其实跟网站内容、结构、SEO 优化、页面加载速度、是否是单页应用、是否用了服务端渲染dou有关系。Ru果你是用 Vue Zuo的 SPA，那百度爬虫可Neng就抓不到你页面里的内容，因为它是客户端渲染的，百度不认这个。你得用服务端渲染或者预渲染来解决。

所以Ru果你发现百度不收录，先kankan是不是用了 SPA，再kankan有没有Zuo SSR，别一股脑就怪技术实现，哈哈。

通过 DOMParser 把 HTML 转成 AST，再用 Vue3 的 h 函数把 AST 转成 VNode，Zui后渲染出来整个流程是不是清晰明了？

这方法比正则替换强太多了尤其是你有复杂组件的时候，比如带 props、带 slot、带事件的组件，正则就歇菜了。而用 AST + Vue3 的 VNode，你就Ke以随心所欲地控制每一个节点，想怎么渲染就怎么渲染。

所以咱就是说这方法，牛！

你懂的，技术这东西，有时候就是一层窗户纸，捅破了世界就通了。今天咱聊的这个方法，就是把 HTML 字符串转成 Vue 组件，再用 AST 渲染出来是不是听着就有点高大上？

害，其实也没那么玄乎，就是把 HTML 转成 DOM 树，再遍历这棵树，把自定义格式的内容替换成 Vue 组件，Zui后用 Vue3 的 h 函数渲染出来。是不是hen清晰？

你要是也遇到过类似的需求，不妨试试这个方法，保证你事半功倍！