如何快速截断包含HTML元素的段落文本？

Question

我需要截断可能包含HTML标签的段落文本。我正在寻找使用纯jQuery或原生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应该保持在折叠和展开状态下。

- bjork24

---

不行，因为当段落扩展时它需要存在。 - bjork24

你在JSFiddle中出现了一个错误。将“title”更改为“text”。 - Dharman

为什么不创建一个包装元素并更改其高度呢？http://jsfiddle.net/6qFua/ - Blender

我添加了答案，以防对其他人有所帮助。这很棘手，因为HTML可以非常复杂。如果您在标记的一半处截断它会发生什么？各种问题可能会出现。您可能需要编写一个复杂的函数，以删除任何在截断侧结束的开放标记。 - Corion

@Blender - 我想避免部分隐藏的文本显示出来。 - bjork24

Answer 1

如果这个用于页面展示，一种更加整洁的方式可能是使用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/

- Adrian Wragg

---

如果它截断了复杂的HTML标签的中间部分，这个功能能够正常工作吗？ - Corion

@Corion 这是一种视觉效果，因此它将在给定的宽度处停止内容并附加省略号 - 无论当时使用的格式如何。 - Adrian Wragg

@Bjork24 给出的示例是一个简短的文本，所以我认为这是一个合适的解决方案。我已经从一个在Firefox上运行的实现中取得了这段代码，所以我会再次检查看看我可能漏掉了什么。 - Adrian Wragg

这在我使用的Firefox版本21.0中有效。我最近还在一个实际网站上使用了它，该网站（我认为）已经测试过IE8甚至IE7。 - Adrian Wragg

Answer 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()的元素中，然后进行替换。

- bjork24

---

您似乎回答了一个与您最初提出的问题不同的问题。此外，如果单词被单独包裹在标签中，则您的解决方案仅正确计算单词的数量；如果将一组单词放在span标签中，则它会将该span标签视为一个单词。 - Adrian Wragg

当你在中间有像表格这样的东西时，这仍然会出错 :( - Corion

Adrian是正确的，任何嵌套在彼此内部的元素都不会被计算，例如带有列出的li的ul或ol将不会被计算。 - GeorgeButter

Answer 3

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

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

- Corion

---

正如我在问题中添加的编辑中提到的那样，我需要在折叠和展开版本中保持相同的HTML。 - bjork24