截断可能包含或不包含HTML元素的段落文本的最快方法是什么?
我需要截断可能包含或不包含HTML标记的段落文本。 我正在寻找使用直接jQuery或vanilla javascript执行此操作的最有效方法。 你可以在这里看到问题: http : //jsfiddle.net/4BzpY/3/
var text = "This is some text with a link"; var shortText = jQuery.trim(title).substring(0, 10).split(" ").slice(0, -1).join(" ") + "..."; alert(shortText );
截断的文本将位于可以动态展开以显示所有内容的段落元素中。 在这种情况下,我不想剥离HTML标记,然后仅在完全展开时显示它们。 HTML应保持原样在折叠和展开状态。
如果这是用于在页面上显示,则更简洁的方式可能是使用CSS。 鉴于HTML:
this is truncated text
和CSS:
.truncated { overflow: hidden; display: block; width: 50px; white-space: nowrap; text-overflow: ellipsis; }
这将显示类似于:
this is...
然后,您可以在需要时使用JavaScript删除CSS类。 示例实现: http : //jsfiddle.net/a8QK4/
我用正则表达式想出来了。 在这里找到了这个例子: 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()
的元素中,然后在展开框时替换它。
这种情况的一种可能性是暂时将被截断的数据转换为文本。
将HTML发送到一次性元素,然后提取文本:
var title = $('').html(text).text();
This is some text with a link
This is some text with a link
然后可以安全地截断。
如果您需要再次将其扩展为原始文本,只需保留一份HTML仍然在其中。
这是一个例子: http : //jsfiddle.net/B2AZA/