XML XSLT 显示文档树答案

【问题标题】：XML XSLT to display document treeXML XSLT 显示文档树
【发布时间】：2015-07-09 01:56:14
【问题描述】：

是否有一种 XSLT 方法可以在 Web 浏览器中显示 XML 文档，类似于 Chrome、IE 和 Firefox 的文档树视图（列出每个元素名称和 InnerText）？我想要一个类似的视图功能，但能够将某些样式应用于 InnerText 值（主要插入 br 标签）。 XML 模板相当复杂，包含许多不同的父元素和子元素，它还包括 cmets，但不包括属性。谢谢。

所以寻找：

<?xml version="1.0" encoding="utf-8">
<root>
  <!--
    Comment 1
    Comment 1 Continued
  -->
  <parent1>
    <child1>Child 1 InnerText</child1>
    <child2>
      Child 2 InnerText
      Child 2 InnerText Continued
    </child2>
  </parent>
</root>

要显示在网络浏览器中，例如：

<root>
  <!--
    Comment 1
    Comment 1 Continued
  -->
  <parent1>
    <child1>Child 1 InnerText</child1>
    <child2>
      Child 2 InnerText
      Child 2 InnerText Continued
    </child2>
  </parent>
</root>

而不是网络浏览器的默认解析器，看起来像这样（取决于浏览器 - IE 下面）：

<?xml version="1.0" encoding="utf-8">
- <root>
    <!-- Comment 1Comment 1 Continued -->
  -  <parent1>
      <child1>Child 1 InnerText</child1>
      <child2>Child 2 InnerTextChild 2 InnerText Continued</child2>
  </parent>
</root>

【问题讨论】：

你能用一个小例子说明你的意思吗？我无法理解您要查找的内容。
查看修改后的帖子。谢谢。

标签： xml xslt

【解决方案1】：

有可能，是的，您可以编写一个样式表来创建 HTML 嵌套列表或 HTML 嵌套表来呈现标记。这是一个使用嵌套列表的非常简单的示例：

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" 
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" doctype-system="about:legacy-compat"/>

  <xsl:template match="/">
    <html>
      <head>
        <style type="text/css">
        ul { list-style-type: none; }
        .element { color: darkred; }
        .comment { color: lightgrey; }
        pre { margin: 0; }
        </style>
      </head>
      <body>
        <ul>
          <xsl:apply-templates/>
        </ul>
      </body>
     </html>
   </xsl:template>

   <xsl:template match="*">
     <li>
       <span class="element">
         <xsl:value-of select="concat('&lt;', name(), '&gt;')"/>
       </span>
       <xsl:if test="node()">
         <ul>
           <xsl:apply-templates/>
         </ul>
       </xsl:if>
       <span class="element">
         <xsl:value-of select="concat('&lt;/', name(), '&gt;')"/>
       </span>
     </li>
   </xsl:template>

   <xsl:template match="comment()">
     <li>
       <pre class="comment"><![CDATA[<!--]]><xsl:value-of select="."/><![CDATA[-->]]></pre>
     </li>
   </xsl:template>

   <xsl:template match="text()">
     <li>
       <pre>
         <xsl:value-of select="."/>
       </pre>
     </li>
   </xsl:template>

   <xsl:template match="text()[not(normalize-space())]"/>

</xsl:stylesheet>

在 Firefox 中应用于更正的输入样本时

<root>
  <!--
    Comment 1
    Comment 1 Continued
  -->
  <parent1>
    <child1>Child 1 InnerText</child1>
    <child2>
      Child 2 InnerText
      Child 2 InnerText Continued
    </child2>
  </parent1>
</root>

结果是

<root>

    <!--
        Comment 1
        Comment 1 Continued
      -->

    <parent1>
        <child1>

            Child 1 InnerText

        </child1>
        <child2>


                  Child 2 InnerText
                  Child 2 InnerText Continued


        </child2>
    </parent1>
</root>

它是作为一个示例来展示如何处理它，您可能想在谷歌上搜索 XSLT 默认样式表以找到更复杂的解决方案。

【讨论】：