有没有一种方法可以在Vue中验证HTML语法？

Question

我有一个基本上从输入中获取所有内容并呈现html的组件：

<template>
    <div>
        <input type="text" v-model="html">
        <VRuntimeTemplate :template="html" />
    </div>
</template>

<script>
import VRuntimeTemplate from 'v-runtime-template'

export default {
    data: () => ({
        html: ''
    }),
    components: {
        VRuntimeTemplate
    }
}
</script>

现在，当我开始键入内容时，显然会抛出错误，提示输入值没有结束标记或结束标记。

是否可以预先验证HTML？ v-html可以正常工作，但是第三方模块有问题。

沙箱：https://codesandbox.io/s/vruntimetemplate-27bdz?fontsize=14

Answer 1

根据您需要验证 HTML 的时间，有几个选项。

要动态验证输入，您可以按照以下答案进行操作： Check if HTML snippet is valid with JavaScript

如果你想验证 Vue 组件的 HTML 输出，这里有一个 vue-cli 插件： https://gitlab.com/html-validate/html-validate-vue

我遇到了同样的问题，最终选择了第一个选项，因为我需要验证用户提供的 HTML，这些 HTML 将在另一个 vue 应用程序中发出。