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

6kkfgxo0 于 2023-02-15 发布在 Java

关注(0)|答案(1)|浏览(459)

我需要转换这个HTML字符串：'<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"/>'
转换为Vnode，或者如果不可能，转换为JS对象，这样我就可以遍历它，获取其属性，然后构造一个Vnode。
这是我需要得到的：

{$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结构。

JavaScript

来源：https://stackoverflow.com/questions/75445720/how-do-i-convert-an-html-string-into-a-vnode-or-a-js-object

1条答案

按热度按时间

ax6ht2ek1#

如果你需要从string中获取dom节点，你可以这样做

function getNodeFromString (htmlString) {
    const div = document.createElement('div')
    div.innerHTML = htmlString
    return div.firstElementChild
}

然后，您可以从节点获取属性，如下所示

const node = getNodeFromString('<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 result = Array
  .from(node.attributes, ({ name, value }) => ({ name, value }))
  .reduce((acc, current) => {
    acc[current.name] = current.value
    return acc
  }, {})

console.log(result)

赞(0）回复(0）举报 2023-02-15

我来回答

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

1条答案

相关问题

热门标签

最新问答