How can I get substring from parsed html in jquery.tmpl

Question

My jquery template is very simple which is

<div id="pageArticleTemplate" class="hide-me">
    <article class="post-item">
        <div class="wrapper row">
            <div class="meta">
                ${getArticleDateFormat(createdDate)}
            </div>
            <h2>${title}</h2>
            <div class="excerpt text-justify">
                {{html description}}
            </div>
        </div>
    </article>
</div>

I am using this template in my js file as:

var markup = $("#pageArticleTemplate").html();
$.template("pageTemplate", markup);
$.tmpl("pageTemplate", data).appendTo("#articles");

where data is the actual data I want to repeat. and article is some another div element on page. It's working fine, but problem is sometimes description is too long and I want to display only first 500 characters. As you can see description is html content and I have already tried using function like I used for createdDate(function getArticleDateFormat{})

Please provide some solution. Thanks

Answer 1

This is not a jQuery Templates-specific issue - but an an issue with HTML in general - namely that you cannot simply truncate HTML markup to make it display with fewer characters. Obviously if you truncate it it will likely no longer be well-formed HTML. Either you have to simply display the text content and truncate that, or you have to parse, or step through the HTML nodes, and remove or truncate the text nodes at the end.