如何从 jquery.tmpl 中解析的 html 中获取子字符串

Posted 2023-05-09

【中文标题】如何从 jquery.tmpl 中解析的 html 中获取子字符串

【英文标题】：How can I get substring from parsed html in jquery.tmpl

【发布时间】：2016-12-19 10:25:02

【问题描述】：

我的jquery模板很简单，就是

<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>

我在我的 js 文件中使用这个模板：

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

其中 data 是我想要重复的实际数据。和文章是页面上的另一个 div 元素。 它工作正常，但问题是有时描述太长，我只想显示前 500 个字符。 如您所见，描述是 html 内容，我已经尝试过使用类似于 createdDate(function getArticleDateFormat) 的函数

请提供一些解决方案。 谢谢

【参考方案1】：

这不是特定于 jQuery 模板的问题 - 而是一般 HTML 的问题 - 即您不能简单地截断 HTML 标记以使其显示的字符更少。显然，如果您截断它，它可能不再是格式良好的 HTML。要么你必须简单地显示文本内容并截断它，要么你必须解析或单步遍历 HTML 节点，并在最后删除或截断文本节点。

【讨论】：

非常感谢@Boris。我真的很感谢你的回答。我知道这不是模板问题。你能帮我如何从这里截断解析的 html。这真的是一个很棒的模板库，我不想仅仅为了截断而进行整个代码替换。我不知道如何继续我的代码。提前致谢。

您应该能够在提供truncate() 函数的地方执行html truncate(description, 500)。执行该功能的一种方法是将描述标记插入临时 DIV 元素，并使用 jQuery contents() 或 querySelectorAll(*) 之类的东西来获取包括文本节点在内的所有节点。遍历它们并删除或截断最后的那些。然后再次获取 div 的 innerHTML 并返回...