truncate text including tags

rjonk · #1 (**permalink**) July 3rd, 2009, 03:48 AM

My mission is to output a text block in html and truncate the text at around a specific amount of characters. But the text can hold some extra inline tags like anchor tags. Not tables. I only want to count the rendered text not the markup. When I want to truncate the text and put an ellipsis after the text I don't want the tag to be truncated so that I end up with invalid html. Has anybody had this mission before and can help me solving this problem.
For example truncate a text at say around 20 characters. And the xml is "I want to be <a href='#'>truncated</a> here.
The output must be "I want to be <a href='#'>truncat</a>..." in the browser you see : I want to be truncat... . I don't ask for a total code but just a hint how my strategy should look like ( total code is always appreciated :-)

mhkay · #2 (**permalink**) July 3rd, 2009, 05:04 AM

I can think of two approaches.

(a) this is harder especially if you aren't accustomed to recursive functional programming, but it's probably more efficient: you basically need to program a recursive scan of all the descendants, accumulating the total text length in a parameter as you go, and terminating the recursion when the text length exceeds 20.

(b) alternatively you can use the built-in apply-templates tree walk, and test each text node to see how much text there is in preceding text nodes. This will have O(n^2) performance, but the logic may be simpler.

Either way, I'm afraid it would take me a little longer than the couple of minutes I allow myself when giving free coding advice!

rjonk · #3 (**permalink**) August 2nd, 2009, 10:02 AM

Description:
This template truncates the text of the introductie node until a maximum characters are reached. When the text is truncated
an ellipsis is added to the truncated text. When the text is smaller than the maximum no ellipsis is added
at the end of the introductie text a link will be added

Parameters:
* limit (optional) number of characters to limit by. Default 250 characters
* suffix (optional) the suffix character string to use when the text is truncated. Default '...'
* url the url on the 'more' link
Example:
<xsl:apply-templates select="path/to/your/introductie" mode="truncate"/>

Code:

   <xsl:template match="art:introductie" mode="truncateTree">
        <xsl:param name="limit" select="250"/>
        <xsl:param name="suffix" select="'...'"/>
        <xsl:param name="url"/>
        
        <!-- copy introduction node to redesign the content and later process this copy-->
        <xsl:variable name="truncatedNode">
            <xsl:copy-of select="*"/>
        </xsl:variable>
        
        <!-- create new truncated node -->
        <xsl:variable name="truncatedNodeTree">
            <xsl:apply-templates mode="truncate" select="$truncatedNode/*">
                <xsl:with-param name="limit" select="$limit"/>
                <xsl:with-param name="suffix" select="$suffix"/>
                <xsl:with-param name="url" select="$url"/>
            </xsl:apply-templates>
            
        </xsl:variable>
        
        <!--process new created truncated introduction tree with the general xslt-->
        <xsl:apply-templates select="$truncatedNodeTree/*"/>
        
    </xsl:template>
    
    <!-- process each node -->
    <xsl:template match="*" mode="truncate">
        <xsl:param name="limit"/>
        <xsl:param name="suffix"/>
        <xsl:param name="url"/>
       
        <xsl:variable name="preceding-strings">
            <xsl:copy-of select="preceding::text()"/>
        </xsl:variable>
        
        <!-- precedingchar: number of characters up to the current node -->
        <xsl:variable name="precedingchar" select="string-length(normalize-space($preceding-strings))"/>
        
        <xsl:if test="$precedingchar &lt; $limit">
            <xsl:element name="{name()}">
                <xsl:copy-of select="@*"/>
                <xsl:apply-templates mode="truncate">
                    <xsl:with-param name="limit" select="$limit"/>
                    <xsl:with-param name="suffix" select="$suffix"/>
                </xsl:apply-templates>
                <!-- only add link at end of first element this is the first node inside introductie-->
                <xsl:if test="position()=1">
                    <xsl:text> </xsl:text><link class="actionLink" xlink:href="{$url}" xlink:title="More">More</link>
                </xsl:if>
            </xsl:element>
        </xsl:if>
    </xsl:template>
    
    <!-- process each text node -->
    <xsl:template match="text()" mode="truncate">
        <xsl:param name="limit"/>
        <xsl:param name="suffix"/>
        <xsl:variable name="preceding-strings">
            <xsl:copy-of select="preceding::text()"/>
        </xsl:variable>
        
        <!-- precedingchar: number of characters up to the current node -->
        <xsl:variable name="precedingchar" select="string-length(normalize-space($preceding-strings))"/>
        
        <xsl:if test="$precedingchar &lt; $limit">
           <!-- totalchar: number of characters including current node -->
           <xsl:variable name="totalchar" select="$precedingchar + string-length(.)"/>
           
           <xsl:choose>
               <xsl:when test="$totalchar &gt; $limit ">
                   <!-- truncate until limit reached -->
                   <xsl:value-of select="substring(., 1, ($limit - $precedingchar))"/>
                   <xsl:value-of select="$suffix"/>
                   <xsl:text> </xsl:text>
               </xsl:when>
               <xsl:otherwise>
                   <!-- dont have to truncate text -->
                   <xsl:value-of select="."/>
               </xsl:otherwise>
           </xsl:choose>
        </xsl:if>
        
    </xsl:template>

this is an example xml

Code:

<Article xml:lang="nl" xmlns="http://article/version_1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
	<titel>Test truncation</titel>
	<article.info>
		<date>9-7-2009</date>
		<introductie>
			<alinea>This is the introduction text
				<special>This must be created bold</special>
				This is some text node too. <special >Make this also bold please</special> Again a  text node. For more information please visit:
				<special>www.frontendplace.nl</special>
				This is the last textnode.
			</alinea>
		</introductie>
	</article.info>
</Article>

and this is the template inside the calling xslt

Code:

<xsl:template name="summary">
		<xsl:param name="url" select="'.'"/>
		<xsl:param name="truncate" select="200"/>
		<h3>
			<a href="{$url}">
				<xsl:value-of select="art:titel"/>
			</a>
		</h3>
		<div class="introductie">
			<xsl:apply-templates mode="truncateTree" select="art:artikel.info/art:introductie">
				<xsl:with-param name="limit" select="$truncate"/>
				<xsl:with-param name="suffix" select="'...'"/>
				<xsl:with-param name="url" select="$url"/>
			</xsl:apply-templates>
		</div>
	</xsl:template>
	<xsl:template match="art:special">
		<strong><xsl:apply-templates/></strong>
	</xsl:template>

Need to download code?

Navigation