Question

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

所以寻找：

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

而不是Web浏览器的默认解析器，它看起来像这样（取决于浏览器 - 下面的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>

Answer 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默认样式表以找到更复杂的解决方案。

XML XSLT显示文档树

1 个答案: