How do you move an attribute in the first child of

2019-05-06 15:39发布

站内文章 / 前端开发
28 0 0

问题:

I'm a beginner to XSLT, I'm trying to convert flash Text Format into HTML based format

There are <LI></LI> blocks in the source xml and all <LI> blocks contains 1 or many <FONT> nodes. I need to apply the styles of the <FONT> in inline css to the <LI> and remove the <FONT> node (first FONT child).

( Example for explanation only - start ) From: 

<LI>
    <FONT FACE="Lato" SIZE="24" COLOR="#F7941D" LETTERSPACING="0" KERNING="0">
       <I>ertrr</I>
       <FONT SIZE="12" COLOR="#4B4B4B">sdfsd</FONT>
    </FONT>
 </LI>

To:

<li style="font-family:Lato; font-size:24px; color:#F7941D;">
   <I>ertrr</I>
  <span style="font-size:12px; color:#4B4B4B;">sdfsd</span>
</li>

( Example for explanation only - end )

XML Source

<root>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="Lato" SIZE="24" COLOR="#F7941D" LETTERSPACING="0" KERNING="0">
                <I>ertrr</I>
                <FONT SIZE="12" COLOR="#4B4B4B"></FONT>
            </FONT>
        </LI>
    </TEXTFORMAT>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="Lato" SIZE="24" COLOR="#000000" LETTERSPACING="0" KERNING="0">
                <I><U>ert</U></I>
                <FONT SIZE="12" COLOR="#4B4B4B"></FONT>
            </FONT>
        </LI>
    </TEXTFORMAT>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="System" SIZE="16" COLOR="#4B4B4B" LETTERSPACING="0" KERNING="0">
                <B>hgjgj</B>
                <FONT FACE="Lato" SIZE="12"></FONT>
            </FONT>
        </LI>
    </TEXTFORMAT>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="System" SIZE="16" COLOR="#4B4B4B" LETTERSPACING="0" KERNING="0">ghjghj
                <FONT FACE="Lato" SIZE="12"></FONT>
            </FONT>
        </LI>
    </TEXTFORMAT>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="Lato" SIZE="12" COLOR="#4B4B4B" LETTERSPACING="0" KERNING="0">@#dgsdg
                <FONT FACE="Gabriola">sdfgdfg</FONT> dsfg df
                <FONT SIZE="16">gdsfg</FONT>sd s
                <FONT FACE="Lucida Console">d
                    <I>fg df</I> gs
                    <FONT FACE="Verdana">dg sdgfgsd</FONT>
                </FONT> gdfg </FONT>
        </LI>
    </TEXTFORMAT>
    <TEXTFORMAT LEADING="2">
        <LI>
            <FONT FACE="Lato" SIZE="24" COLOR="#000000" LETTERSPACING="0" KERNING="0">
                <I><U>ert</U></I>
                <FONT SIZE="12" COLOR="#4B4B4B">sdfsd</FONT>
            </FONT>
        </LI>
    </TEXTFORMAT>

</root>

Expected Output

    <div>
        <li style="font-family:Lato; font-size:24px; color:#F7941D;">
            <I>ertrr</I><span style="font-size:12px; color:#4B4B4B;"></span>
        </li>
        <li style="font-family:Lato; font-size:24px; color:#000000;">
            <I><U>ert</U></I><span style="font-size:12px; color:#4B4B4B;"></span>
        </li>
        <li style="font-family:System; font-size:16px; color:#4B4B4B;">
            <B>hgjgj</B><span style="font-family:Lato; font-size:12px; "></span>
        </li>
        <li style="font-family:System; font-size:16px; color:#4B4B4B;">
            ghjghj
            <span style="font-family:Lato; font-size:12px; "></span>
        </li>
        <li style="font-family:Lato; font-size:12px; color:#4B4B4B;">
            @#dgsdg
            <span style="font-family:Gabriola; ">sdfgdfg</span> dsfg df
            <span style="font-size:16px; ">gdsfg</span>sd s
            <span style="font-family:Lucida Console; ">d
                        <I>fg df</I> gs
                        <span style="font-family:Verdana; ">dg sdgfgsd</span></span> gdfg
        </li>
        <li style="font-family:Lato; font-size:24px; color:#000000;">
            <I><U>ert</U></I><span style="font-size:12px; color:#4B4B4B;">sdfsd</span>
        </li>
    </div>

My code:

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

    <xsl:strip-space elements="*"/>
    <xsl:output indent="yes" method="html"/>

    <!-- identity template -->
    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>

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

    <xsl:template match="FONT">
        <span>
            <xsl:attribute name="style">
                <!-- collect attributes -->
                <xsl:variable name="styles">
                    <xsl:if test="@FACE">
                        <xsl:value-of select="concat('font-family:', @FACE)"/>
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:if test="@SIZE">
                        <xsl:value-of select="concat('font-size:', @SIZE, 'px')"/>
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:if test="@COLOR">
                        <xsl:value-of select="concat('color:', @COLOR)"/>
                        <xsl:text>;</xsl:text>
                    </xsl:if>
                </xsl:variable>
                <xsl:value-of select="$styles"/>
            </xsl:attribute>
            <xsl:apply-templates/>
        </span>
    </xsl:template>

    <!-- remove unwanted attributes -->
    <xsl:template match="@LETTERSPACING|@KERNING"/>

    <!-- Replace <LI> with <li> -->
    <xsl:template match="LI">
        <li>
            <xsl:attribute name="style">
                <!-- collect attributes -->
                <xsl:variable name="styles">
                    <xsl:if test="FONT/@FACE">
                        <xsl:value-of select="concat('font-family:', FONT/@FACE)"/>
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:if test="FONT/@SIZE">
                        <xsl:value-of select="concat('font-size:', FONT/@SIZE, 'px')"/>
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:if test="FONT/@COLOR">
                        <xsl:value-of select="concat('color:', FONT/@COLOR)"/>
                        <xsl:text>;</xsl:text>
                    </xsl:if>
                </xsl:variable>
                <!-- delete trailing spaces -->
                <xsl:value-of select="$styles"/>
            </xsl:attribute>
            <xsl:apply-templates/>
        </li>
    </xsl:template>

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

</xsl:stylesheet>

Current Output

<div>
    <li style="font-family:Lato; font-size:24px; color:#F7941D;">
        <span style="font-family:Lato; font-size:24px; color:#F7941D;"><I>ertrr</I><span style="font-size:12px; color:#4B4B4B;"></span></span>
    </li>
    <li style="font-family:Lato; font-size:24px; color:#000000;">
        <span style="font-family:Lato; font-size:24px; color:#000000;"><I><U>ert</U></I><span style="font-size:12px; color:#4B4B4B;"></span></span>
    </li>
    <li style="font-family:System; font-size:16px; color:#4B4B4B;">
        <span style="font-family:System; font-size:16px; color:#4B4B4B;"><B>hgjgj</B><span style="font-family:Lato; font-size:12px; "></span></span>
    </li>
    <li style="font-family:System; font-size:16px; color:#4B4B4B;">
        <span style="font-family:System; font-size:16px; color:#4B4B4B;">ghjghj
                <span style="font-family:Lato; font-size:12px; "></span></span>
    </li>
    <li style="font-family:Lato; font-size:12px; color:#4B4B4B;">
        <span style="font-family:Lato; font-size:12px; color:#4B4B4B;">@#dgsdg
                <span style="font-family:Gabriola; ">sdfgdfg</span> dsfg df
        <span style="font-size:16px; ">gdsfg</span>sd s
        <span style="font-family:Lucida Console; ">d
                    <I>fg df</I> gs
                    <span style="font-family:Verdana; ">dg sdgfgsd</span></span> gdfg </span>
    </li>
    <li style="font-family:Lato; font-size:24px; color:#000000;">
        <span style="font-family:Lato; font-size:24px; color:#000000;"><I><U>ert</U></I><span style="font-size:12px; color:#4B4B4B;">sdfsd</span></span>
    </li>
</div>

回答1:

You should create a named template to process the attributes. The following is the stylesheet that you need

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

    <xsl:strip-space elements="*"/>
    <xsl:output indent="yes" omit-xml-declaration="yes"/>

    <!-- identity template -->        
    <xsl:template match="node()|@*">
        <xsl:copy>
            <xsl:apply-templates select="node()|@*"/>
        </xsl:copy>
    </xsl:template>

    <xsl:template match="LI">
        <li>
            <xsl:attribute name="style">
                <xsl:call-template name="collect_attributes">
                    <xsl:with-param name="FACE" select="*[1][name()='FONT']/@FACE"/>
                    <xsl:with-param name="SIZE" select="*[1][name()='FONT']/@SIZE"/>
                    <xsl:with-param name="COLOR" select="*[1][name()='FONT']/@COLOR"/>
                </xsl:call-template>
            </xsl:attribute>
            <xsl:apply-templates/>
        </li>
    </xsl:template>

    <xsl:template match="LI/FONT[1]">
        <xsl:apply-templates/>
    </xsl:template>

    <xsl:template match="FONT[not(parent::LI)]">
        <span>
            <xsl:attribute name="style">
                <xsl:call-template name="collect_attributes">
                    <xsl:with-param name="FACE" select="@FACE"/>
                    <xsl:with-param name="SIZE" select="@SIZE"/>
                    <xsl:with-param name="COLOR" select="@COLOR"/>
                </xsl:call-template>
            </xsl:attribute>
        </span>
    </xsl:template>

    <!-- named template to process the attributes -->
    <xsl:template name="collect_attributes">
        <xsl:param name="COLOR"/>
        <xsl:param name="FACE"/>
        <xsl:param name="SIZE"/>

        <!-- collect attributes -->
        <xsl:variable name="styles">
            <xsl:if test="string-length($FACE) &gt; 0">
                <xsl:value-of select="concat('font-family:', $FACE)"/>
                <xsl:text>; </xsl:text>
            </xsl:if>
            <xsl:if test="string-length($SIZE) &gt; 0">
                <xsl:value-of select="concat('font-size:', $SIZE, 'px')"/>
                <xsl:text>; </xsl:text>
            </xsl:if>
            <xsl:if test="string-length($COLOR) &gt; 0">
                <xsl:value-of select="concat('color:', $COLOR)"/>
                <xsl:text>;</xsl:text>
            </xsl:if>
        </xsl:variable>
        <!-- delete trailing spaces -->
        <xsl:value-of select="normalize-space($styles)"/>
    </xsl:template>

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

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

</xsl:stylesheet>


回答2:

This will handle your "Example for explanation only":

XSLT 1.0

<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
<xsl:strip-space elements="*"/>

<!-- identity transform -->
<xsl:template match="@*|node()">
    <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
</xsl:template>

<xsl:template match="LI">
    <li>
        <xsl:apply-templates select="FONT[1]" mode="style"/>
        <xsl:apply-templates select="FONT[position() > 1]"/>
    </li>
</xsl:template>

<xsl:template match="FONT">
    <span>
        <xsl:attribute name="style">
            <xsl:apply-templates select="@*" mode="style"/>
        </xsl:attribute>
        <xsl:apply-templates/>
    </span>
</xsl:template>

<xsl:template match="FONT" mode="style">
    <xsl:attribute name="style">
        <xsl:apply-templates select="@*" mode="style"/>
    </xsl:attribute>
    <xsl:apply-templates/>
</xsl:template>

<xsl:template match="@FACE" mode="style">
    <xsl:text>font-family:</xsl:text>
    <xsl:value-of select="."/>
    <xsl:text>; </xsl:text>
</xsl:template>

<xsl:template match="@SIZE" mode="style">
    <xsl:text>font-size:</xsl:text>
    <xsl:value-of select="."/>
    <xsl:text>; </xsl:text>
</xsl:template>

<xsl:template match="@COLOR" mode="style">
    <xsl:text>color:</xsl:text>
    <xsl:value-of select="."/>
    <xsl:text>; </xsl:text>
</xsl:template>

<xsl:template match="@*" mode="style"/>

</xsl:stylesheet>


标签： html xml xslt xml-parsing xslt-1.0
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~