我有一个应用程序,其中在<template>
元素内接收HTML字符串,其中混入了一些自定义模板元素。然后,我想将内容解析为DOM元素。 (以前是在服务器端完成的。)
以前,我尝试使用DOMParser
来解析模板,但是在例如在模板的根目录中发现了<tr>
(因为行需要一个围绕它们的表)。使用<template>
,一切正常。
console.log(thisworks.outerHTML);
<template id="thisworks">
<tr><td><x:custom>Sample Text</x:custom></td></tr>
</template>
但是,当<template>
内的内容在结构上不是有效的HTML(例如<option>
内仅允许<optgroup>
/ <select>
)时,浏览器将尝试“修复”结构,打破了自定义模板部分,还有其他一些东西。
console.log(thisdoesnt.outerHTML);
<template id="thisdoesnt">
<table><x:custom><tr><td>Sample Text</td></tr></x:custom></table>
<select><x:custom><option>Sample Text</option></x:custom></select>
</template>
我也不想仅仅使用XML解析器,因为源可能不是有效的XML,并且转换它需要大量的现有代码。
是否存在一种方法(最好没有兆字节的依赖关系),可以使用HTML语法但没有HTML的约束来干净地解析JavaScript中的DOM?