使用 Javascript DOMParser 将单个字符串 HTML 格式化为多行制表符 HTML

Question

Automata 的作业，使用DOMParser，我们需要格式化HTML

的单个字符串

<div class="the-best-css-class-like-ever"><div class="youtube-embed" data-oembed="{'version': '1.0', 'type': 'video', 'title': 'Amazing Nintendo Facts', 'html': '<object width=\'425\'><param name=\'movie\' value=\'http://www.youtube.com/v/M3r2XDceM6A&fs=1\'></param>}"><img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"><img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png"></div><!-- asdf <img> -> --><p>Automata Rules!</p></div>

变成"tabbed"，多行HTML字符串

<div class="the-best-css-class-like-ever">
    <div class="youtube-embed" data-oembed="{'version': '1.0', 'type': 'video', 'title': 'Amazing Nintendo Facts', 'html': '<object width=\'425\'><param name=\'movie\' value=\'http://www.youtube.com/v/M3r2XDceM6A&fs=1\'></param>}">
        <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png">
        <img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png">
    </div>
    <!-- asdf <img> -> -->
    <p>
        Automata Rules!
    </p>
</div>

我从来没有用过Javascript，那么如何使用DOMParser 来完成这个任务呢？据我了解，DOMParser 采用 HTML 并将其格式化为具有子元素的树结构。但是，我试图遍历树，但我得到的只是 null 和 undefined 值

[编辑] class 中有人给了我使用

的提示

var parser  = new DOMParser();
var htmlDoc = parser.parseFromString(text, "text/html");
var elements = htmlDoc.body.childNodes;

[编辑 2] 我解决了这个问题，方法是降低 DOM 树并通过获取外部 HTML 值并删除子项的值从节点获取该特定标记的 HTML。

element.outerHTML.replace(child.outerHTML, "");

我找不到其他更简单的方法来执行此操作。 Alan 的回答帮助很大，尤其是 Firefox 开发控制台和调试器。

Answer 1

我想你可以用它来完成你的任务。在你的位置，我会从一个更简单的例子开始，然后我会用一些更难的例子。

例如

<html>
   <head>
    <title>DOM Parser</title>
    <script>
       var parser = new DOMParser();
       var simpleHTML = "<div class'tst'> <p> hello </p> </div>";
      var htmlObj = parser.parseFromString(simpleHTML, "text/html"); 
    </script>
   </head>
 <body></body>
</html>

如果您在浏览器中加载该代码片段（打开控制台进行调试），您会看到 htmlObj.children 将为您提供一个包含每个节点的数组，因此，如果您使用递归实现您的解决方案，你就能解决你的作业了。

在这里你可以找到更多关于DOMParser

的信息

使用 Javascript DOMParser 将单个字符串 HTML 格式化为多行制表符 HTML

Using Javascript DOMParser to format single string HTML to multiline tabbed HTML

html

javascript

domparser