如何使用JavaScript/Vue渲染XHTML字符串并在指定位置插入自定义表单

轻量原生实现（推荐，无额外依赖） #

你完全不需要手动递归遍历XHTML字符串，直接用浏览器原生DOMParser API即可完美解决结构破坏问题，你的XHTML本身是合法格式，适配性100%：

核心实现逻辑 #

1. 拿到XHTML字符串后，用DOMParser以XHTML模式解析为完整DOM树，该过程不会自动补全标签、不会破坏原有结构

const parser = new DOMParser()
// 严格按照XHTML规范解析，完全保留原结构
const xhtmlDoc = parser.parseFromString(你的XHTML字符串, 'application/xhtml+xml')

2. 定位占位符节点：直接通过DOM选择器找到内容为{{FORM_PLACEHOLDER}}的<code>节点

// 高版本浏览器可用选择器直接匹配
const placeholder = xhtmlDoc.querySelector('code:has(> text(\'{{FORM_PLACEHOLDER}}\'))')
// 兼容低版本浏览器可以用遍历DOM节点的方式查找匹配

3. 替换占位符为插槽内容：将Vue插槽的VNode渲染为真实DOM节点，替换掉占位符节点即可

• Vue3可以直接用render方法将插槽VNode挂载到临时节点，再迁移到DOM树对应位置
• Vue2可以用Vue.extend创建临时实例渲染插槽内容，再替换节点

4. 把处理完成的DOM树整体迁移到HtmlWrapper组件的根元素中完成渲染

注意事项 #

• 如果XHTML来源不可信，解析后可以先过一遍XSS过滤再挂载
• 该方案完全遵循W3C标准，不存在结构打乱、标签补全的问题

简化方案（运行时编译模板） #

如果你的项目允许使用带编译器的Vue版本，可以直接将XHTML字符串中的{{FORM_PLACEHOLDER}}替换为<slot></slot>字符串，再用运行时模板编译器直接编译整个XHTML为Vue组件，天然支持插槽功能，不需要手动操作DOM。

之前方案失效的原因 #

• 拆分字符串用v-html渲染的问题是innerHTML的固有特性：浏览器会自动补全片段中的未闭合标签，无法规避
• 后端XML转JSON的方案不符合HTML的结构特性：通用XML转JSON工具默认会把同标签名节点合并为数组，必然打乱原有元素顺序，完全没必要在后端做这层转换

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