Javascript 在不进行验证的情况下进行parseFromString（）解析

我用它来创建元素。每个元素都是独立的，应该稍后插入到DOM中

这可以正常工作，除了以下字符串：

<tr> <td>a</td> </tr> <div>X</div>

如何解析and，使我有一个包含两个元素的列表

使现代化 我知道我可以很容易地解析它：

<table><tr> <td>a</td> </tr></table> <div>X</div>

但在这种情况下，我真的想解析

相关问题：

接口的parseFromString方法解析包含HTML或XML的字符串，返回或。 ，强调我的

您正在使用parseFromString执行它不打算执行的操作

你可能会说：

创建一个临时容器元素。 将HTML转储到该元素中。 获取容器的子对象。

---

无论哪种方式，您都不会从中得到一个tr-DOM节点，因为DOM解析器似乎会去掉无效的HTML。孤立的tr节点无效

不幸的是，表元素和一些其他元素不会作为顶级元素进行解析

在htmx中，我们通过包装然后展开它们来处理此问题：

---

如果在使用parseFromString之前将html片段包装在标记中，它应该可以工作：

---

正如我在这里的一些评论中所看到的那样，您不必使用document.createElement，也不必像我在一些解决方案中看到的那样将所有内容包装到某个父元素中，就可以实现这一点

要实现这一点，我们必须首先了解该方法的工作原理。从文件的第一行，我们可以看到

接口的parseFromString方法解析包含HTML或XML的字符串，返回或

以下是两种文档类型的要求：

text/html：：必须是有效的html，其中必须是元素的后代 text/xml:：必须有一个父元素；不能有多个顶级元素 这里的主要问题在于，解析为text/html的元素需要读取为有效的html，而顶层不需要，因为它需要一个祖先

好消息是，XML更容易接受不正确的HTML标记，因为它主要处理数据源的自定义标记。XML的主要缺点通常是HTML层次结构中不存在所有元素，并且需要一个父元素。但是，我们可以利用这一点，首先以您希望的方式在XML中创建DOM树，然后使用和循环将所有这些元素传递给新的HTMLDocument

在这里，它正在发挥作用。我添加了一个函数装饰器，使其更干净：

DOMParser.prototype.looseParseFromString=functionstr{ str=str.replace/\/>/g'>'。replace//g'$1'； const xdom=this.parseFromString+str+，'text/xml'； const hdom=this.parseFromString，“text/html”； 用于Array.fromxdom.documentElement.children的元素{ hdom.body.appendChildelem； } 用于数组元素。fromhdom.querySelectorAll'area，base，br，col，command，embed，hr，img，input，keygen，link，meta，param，source，track，wbr'{

---

elem.outerHTML='在这个非常特殊的情况下，我看到的唯一方法是const els=input.split'，然后按原样插入它们，即根本不解析。@ChrisG谢谢你的评论。不幸的是，到处都可能有空格。是的，即使在示例输入中，也有额外的空格。这回答了你的问题吗？@PeterB我不是那么简单fraid；主要问题是浏览器丢弃孤立的，因为它在表外无效。如果你是说，那也行不通，我猜，因为它使用相同的解析器并再次删除无效的HTMLOh，这很好！我已经更新了我的答案，说明了这不可能。谢谢，@ChrisGAll，这是你在本周可能想做的事情tead，is:段落是没有意义的，使用HTMLElement只是更脏、更慢，它没有提供任何好处。@Kaido:它没有围绕它构建HTMLDocument。实现这一点的方法是有意义的。这对

有用吗？虽然上面提到的HTML是意外有效的XML，但其目的是解析HTML。@guettli我想这就是问题所在使用这两个函数的缺点。一个需要有效的XML，另一个需要有效的HTML，并且需要一个以上的。我可以想出另一个更快的解决方法，它应该适用于所有情况。我现在就开始解决它…@guettli如果有机会，请检查我最近的更新，它解释了这些无效的HTML标记，例如img、br、input等。。我们已经解决了所有边缘问题。您看过下面的解决方案了吗？为什么您更喜欢您的解决方案？@guettli是的，我看过。当我使用parseFromString并将字符串包装到标记中时，它会注入一个片段，而不是我们可以在根级别使用的实际dom。这里的最终目标是拥有一个功能完整的文档元素。使用标记违背了您在原始问题中提到的不使用标记的目的。我建议的XML解决方案产生了一个功能完整的标准HTMLDocument对象。比较结果：