Coloring occasional lines in full XML Structure and show in HTML

ⅰ亾dé卋堺 提交于 2019-12-12 03:47:22

问题


My First question is marked as duplicated, but it isn't a duplicate

show XML in HTML with inline stylesheet

I hope this question is not immediatley marked as duplicate, only because one of the moderators has read the first two sentences and've ignored the rest.

The Problem is not to show an XML Structure in HTML, rather to show a full dynamically XML structure, with all tags and occasional colored lines. The structure and interior fields are full dynamically and every field can be correct or wrong, depending on the xml file like to compare. So a field is at the first comparison correct, but on another comparison it’s wrong. The fields and structure of XML can vary greatly from one comparison to another. I’m looking since yesterday for a corresponding and professional solution for this problem. Background process: comparison different xml files, via soa microservices in java. The comparison is made by org.custommonkey.xmlunit. The Result have to be an html popup, what shows me differences marked by colored lines.

Example Output XUnit Diff Result XPath

/ROOT[1]/MATDETAIL[1]/OUTPUT[1]/GENERAL[1]/CHANGED_BY[1]/text()[1]

Transform the source xml via xslt and the xunit diff result informations.

Example Input XML

<ROOT>    
      <MATDETAIL>
            <OUTPUT>
                  <GENERAL>
                        <CREATED_ON/>
                        <CREATED_BY>ORIGINAL USER</CREATED_BY>
                        <LAST_CHNGE/>
                        <CHANGED_BY>NEW USER</CHANGED_BY>
                  </GENERAL>
                  <RETURN>
                        <TYPE>S</TYPE>
                        <MESSAGE/>
                        <LOG_NO/>
                        <LOG_MSG_NO>000000</LOG_MSG_NO>
                  </RETURN>
            </OUTPUT>
      </MATDETAIL>  
</ROOT>

Example XSL Transformation

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

<xsl:template match="node() | @*">
<xsl:copy>
<xsl:apply-templates select="node() | @*" mode="unescape"/>
</xsl:copy>
</xsl:template>
<xsl:template match="/ROOT[1]/MATDETAIL[1]/OUTPUT[1]/GENERAL[1]/CHANGED_BY[1]">

    <xsl:element name = "span">
        <xsl:attribute name="style">font-weight:bold; color:red </xsl:attribute>
        <xsl:copy>
            <xsl:value-of select = "current()" />
        </xsl:copy>
        <xsl:text>&lt;== Expected: dasda</xsl:text>
    </xsl:element>
</xsl:template>
</xsl:stylesheet>

Example Result of XSL Transformation

<ROOT>    
      <MATDETAIL>
            <OUTPUT>
                  <GENERAL>
                        <CREATED_ON/>
                        <CREATED_BY>ORIGINAL USER</CREATED_BY>
                        <LAST_CHNGE/>
                        <span style="font-weight:bold; color:red "><CHANGED_BY>NEW USER</CHANGED_BY>&lt;== Expected: ORIGINAL USER</span>
                  </GENERAL>
                  <RETURN>
                        <TYPE>S</TYPE>
                        <MESSAGE/>
                        <LOG_NO/>
                        <LOG_MSG_NO>000000</LOG_MSG_NO>
                  </RETURN>
            </OUTPUT>
      </MATDETAIL>  
</ROOT>

I’m not able to show this xml structure in html, with (all) tags, correctly AND colored. Either I’ve get no tags, so there are only the raw data in XML to see, without tags, but the lines are colored. Or I get the xml structure with all data, but not colored. I tried to replace the lt and gt chars inside xslt, but failed, or after transformation in java, this result shows very ugly. My colleague has meant that we can not use it in any way. Because the XML Structur can be every time different and so on fully dynamically, I can not style the xml with css and tag definition. Unfortunately, alternative implementations are not an option. I have to do this somehow with the means available to me. (Java, XML & XSL, JS, HTML, CSS).

I hope to get good ideas to solute this.

I would like to thank you in advance.


回答1:


I hope i can solve your issue with following try.

I. Input:

<ROOT baum="baum">    
    <MATDETAIL>
        <OUTPUT>
            <GENERAL>
                <CREATED_ON/>
                <CREATED_BY>ORIGINAL USER</CREATED_BY>
                <LAST_CHNGE/>
                <CHANGED_BY>NEW USER</CHANGED_BY>
            </GENERAL>
            <RETURN>
                <TYPE>S</TYPE>
                <MESSAGE/>
                <LOG_NO/>
                <LOG_MSG_NO>000000</LOG_MSG_NO>
            </RETURN>
        </OUTPUT>
    </MATDETAIL>  
</ROOT>

II. Stylesheet (XSLT 1.0):

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

    <xsl:output omit-xml-declaration="yes"/>

    <xsl:template match="/">
        <xsl:apply-templates />
    </xsl:template>

    <xsl:template match="CHANGED_BY">
        <span style="color:red;">
            <xsl:apply-templates select="." mode="serialize"/>
        </span>
    </xsl:template>

    <xsl:template match="*">
        <xsl:apply-templates select="." mode="serialize"/>
    </xsl:template>

    <xsl:template match="@*">
        <xsl:apply-templates select="." mode="serialize"/>
    </xsl:template>

    <xsl:template match="*" mode="serialize">
        <xsl:value-of select="concat('&lt;', name())"/>
        <xsl:apply-templates select="@*" />
        <xsl:choose>
            <xsl:when test="node()">
                <xsl:text>&gt;</xsl:text>
                <xsl:apply-templates />
                <xsl:value-of select="concat('&lt;', name(), '&gt;')"/>
            </xsl:when>
            <xsl:otherwise>
                <xsl:text> /&gt;</xsl:text>
            </xsl:otherwise>
        </xsl:choose>
    </xsl:template>

    <xsl:template match="@*" mode="serialize">
        <xsl:value-of select="concat(' ', name(), '=&quot;', ., '&quot;')"/>
    </xsl:template>

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

</xsl:stylesheet>

III: Output:

&lt;ROOT baum="baum"&gt;    
    &lt;MATDETAIL&gt;
        &lt;OUTPUT&gt;
            &lt;GENERAL&gt;
                &lt;CREATED_ON /&gt;
                &lt;CREATED_BY&gt;ORIGINAL USER&lt;/CREATED_BY&gt;
                &lt;LAST_CHNGE /&gt;
                <span style="color:red;">&lt;CHANGED_BY&gt;NEW USER&lt;/CHANGED_BY&gt;</span>
            &lt;/GENERAL&gt;
            &lt;RETURN&gt;
                &lt;TYPE&gt;S&lt;/TYPE&gt;
                &lt;MESSAGE /&gt;
                &lt;LOG_NO /&gt;
                &lt;LOG_MSG_NO&gt;000000&lt;/LOG_MSG_NO&gt;
            &lt;/RETURN&gt;
        &lt;/OUTPUT&gt;
    &lt;/MATDETAIL&gt;  
&lt;/ROOT&gt;

IV. Explanation:

Whenever the mode="serialize" is applied, the context is escaped. See example for CHANGED_BY to format with HTML-Tags. The xml structure is fully escaped so the browser shows it like a string instead of tags.

I really hope it solves your problem



来源:https://stackoverflow.com/questions/40258477/coloring-occasional-lines-in-full-xml-structure-and-show-in-html

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!