4

我需要截断可能包含或不包含 HTML 标记的段落文本。我正在寻找使用直接 jQuery 或 vanilla javascript 执行此操作的最有效方法。你可以在这里看到问题：http: //jsfiddle.net/4BzpY/3/

var text = "This <a href=\"\">is</a> some text with a link";

var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "...";

alert(shortText );

截断的文本将位于可以动态扩展以显示所有内容的段落元素中。在这种情况下，我不想剥离 HTML 标记，然后仅在完全展开时才显示它们。HTML 应保持原样处于折叠和展开状态。

4

3 回答 3

6

如果这是为了在页面上显示，更简洁的方法可能是使用 CSS。给定 HTML：

    <span class="truncated">this is truncated text</span>

和CSS：

    .truncated {
        overflow: hidden;
        display: block;
        width: 50px;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

这将显示类似于：

    this is...

然后，您可以在需要时使用 JavaScript 删除 CSS 类。示例实现：http: //jsfiddle.net/a8QK4/

于 2013-07-03T21:39:18.053 回答
2

我用正则表达式弄清楚了。在此处找到示例：https ://stackoverflow.com/a/7552371/142486

var text = $('#my-text');
var maxWords = 25;
var words = text.html().match(/<\s*(\w+\b)(?:(?!<\s*\/\s*\1\b)[\s\S])*<\s*\/\s*\1\s*>|\S+/g);
text.html(words.slice(0, maxWords).join(" ") + " ...");

演示在这里 - http://jsfiddle.net/3Yjm8/

我将简单地将纯粹的 HTML 添加到带有 的元素中data()，然后在框展开时替换它。

于 2013-07-03T22:08:07.647 回答
1

这种情况的一种可能性是将被截断的数据临时转换为文本。

将 HTML 发送到一次性元素，然后提取文本：

var title = $('<div>').html(text).text();

This <a href=\"\">is</a> some text with a link变成This is some text with a link，然后可以安全地截断。

如果您需要再次将其扩展为原始文本，只需保留一份包含 HTML 的副本。

这是一个例子：http: //jsfiddle.net/B2AZA/

于 2013-07-03T21:36:14.297 回答