如何将HTML字符串转换为Vnode或JavaScript对象？

需求说明 #

需要将以下SVG Path的HTML字符串转换为VNode；若无法直接实现，则转换为可遍历属性的JavaScript对象，以便手动构建VNode：

<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5v-5a7 7 0 1 0-14 0v5c-.03 2.47-.72 4.887-2 7h18a13.833 13.833 0 0 1-2-7Z"/>

期望得到的JavaScript对象结构如下：

{
  $attrs$: {
    d: "M19.5 13.5v-5a7 7 0 1 0-14 0v5c-.03 2.47-.72 4.887-2 7h18a13.833 13.833 0 0 1-2-7Z",
    stroke: "currentColor",
    stroke-linecap: "round",
    stroke-linejoin: "round"
  },
  $children$: null,
  $elm$: path,
  $flags$: 0,
  $tag$: "path",
  $text$: null
}

SVG结构说明 #

• 可正常工作的SVG：渲染前path直接嵌套在svg标签内部的结构
• 无法正常工作的SVG：svg内部通过引用方式使用path的结构

实现方案 #

1. 转换为目标JavaScript对象 #

使用浏览器原生的DOMParser解析字符串，提取属性后构建目标对象：

const pathStr = '<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5v-5a7 7 0 1 0-14 0v5c-.03 2.47-.72 4.887-2 7h18a13.833 13.833 0 0 1-2-7Z"/>';
const parser = new DOMParser();
const svgDoc = parser.parseFromString(pathStr, 'image/svg+xml');
const pathElement = svgDoc.querySelector('path');

// 构建符合要求的对象
const pathObj = {
  $attrs$: {},
  $children$: null,
  $elm$: pathElement,
  $flags$: 0,
  $tag$: "path",
  $text$: null
};

// 遍历元素属性填充$attrs$
for (let i = 0; i < pathElement.attributes.length; i++) {
  const attr = pathElement.attributes[i];
  pathObj.$attrs$[attr.name] = attr.value;
}

console.log(pathObj);

2. 转换为VNode（以Vue框架为例） #

基于上面得到的属性对象，使用Vue的createVNode方法直接生成VNode：

import { createVNode } from 'vue';

// 利用已生成的pathObj.$attrs$创建VNode
const pathVNode = createVNode('path', pathObj.$attrs$);

注：不同前端框架的VNode结构会略有差异，可根据对应框架的API调整实现方式。

3. 修复SVG引用失效问题 #

如果是使用<use>标签引用path导致无法显示，需确保path定义在<defs>标签内，并正确设置引用ID：

<svg>
  <defs>
    <path id="targetPath" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5v-5a7 7 0 1 0-14 0v5c-.03 2.47-.72 4.887-2 7h18a13.833 13.833 0 0 1-2-7Z"/>
  </defs>
  <use href="#targetPath" />
</svg>

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