是否有一种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>
答案 0 :(得分: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('<', name(), '>')"/>
</span>
<xsl:if test="node()">
<ul>
<xsl:apply-templates/>
</ul>
</xsl:if>
<span class="element">
<xsl:value-of select="concat('</', name(), '>')"/>
</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默认样式表以找到更复杂的解决方案。