使用Javascript DOMParser将单字符串HTML格式化为多行选项卡HTML

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

本文关键字：HTML 行选 选项 格式化 使用 DOMParser 字符串 Javascript      更新时间：2023-09-26

对于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>

变成"标签"，多行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值

[编辑]课堂上有人给了我使用

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

[编辑2]我解决这个问题的方法是，沿着DOM树逐级向下，通过获取outerHTML值并删除子值，从节点获取特定标记的HTML。

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

我找不到另一种更简单的方法来做这件事。图灵的回答帮了很大的忙，尤其是Firefox开发控制台和调试器。

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

如

<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>

如果您在浏览器中加载该代码片段(打开控制台进行调试)，您将看到htmlj。孩子们将为每个节点提供一个数组，因此，如果你使用递归实现你的解决方案，你将能够解决你的家庭作业。

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

相关文章：