jQuery 文本截断（阅读更多样式）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2248742/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery text truncation (read more style)
提问by Mazzi
My question is very similar to "Trim text to 340 chars" but in jQuery. It sounded very straight forward but when I searched around I couldn't find any reference for it.
我的问题与“将文本修剪为 340 个字符”非常相似，但在jQuery 中。这听起来很直接，但当我四处搜索时，我找不到任何参考资料。
Ok, I have a div $('#content')I want to trim the text to 'x' amount of characters lets say '600' BUTI don't want it to break the word it self! Like NOT 'The Ques...' BUT 'The Questions...'.
好的，我有一个 div，$('#content')我想将文本修剪为“x”个字符，可以说“600”，但我不希望它自己打破这个词！喜欢不是'问题......'而是'问题......'。
What happens to the rest of the text?Well, I hide it and will show it on request! But wait, it should first remove the '...' and show the text right after where it hid.
文本的其余部分会发生什么？好吧，我把它隐藏起来，并会根据要求显示出来！但是等等，它应该首先删除 ' ...' 并在它隐藏的位置之后立即显示文本。
Here is the sample structure for $('#content'):
这是 $('#content') 的示例结构：
<div id="content">
<p>Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.</p>
<p>Writing example text is very boring.</p>
<p>Specially when you are dumb enough not to copy and paste. Oh!</p>
<p>Once it sheltered the rogues and rapscallions of the British Empire; now Kangaroo Island is ready and waiting for some derring-do of your own. Venture into the rugged wilds of the island, traversing untamed bushland and pristine beaches seeking out seal, penguin and sea lion colonies. Meet the land loving locals - koalas, goannas, echidnas and the island's own species of kangaroo. </p>
</div>
How it should load:
它应该如何加载：
Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.
Writing example text is... [Read More]
从前的午夜沉闷，当我虚弱和疲倦地思考时，在许多古怪而好奇的被遗忘的传说中。
编写示例文本是... [阅读更多]
After click on 'Read More':
点击“阅读全文”后：
Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.
Writing example text is very boring.
Specially when you are dumb enough not to copy and paste. Oh!
Once it sheltered the rogues and rapscallions of the British Empire; now Kangaroo Island is ready and waiting for some derring-do of your own. Venture into the rugged wilds of the island, traversing untamed bushland and pristine beaches seeking out seal, penguin and sea lion colonies. Meet the land loving locals - koalas, goannas, echidnas and the island's own species of kangaroo.
从前的午夜沉闷，当我虚弱和疲倦地思考时，在许多古怪而好奇的被遗忘的传说中。
编写示例文本非常无聊。
特别是当你笨到不会复制和粘贴的时候。哦！
一旦它庇护了大英帝国的流氓和无赖；现在袋鼠岛已经准备好了，等待你自己的一些derring-do。冒险进入岛上崎岖的荒野，穿越未驯服的丛林和原始海滩，寻找海豹、企鹅和海狮的栖息地。认识热爱土地的当地人 - 考拉、巨蜥、针鼹和岛上特有的袋鼠。
UPDATE:I have found these two plug-ins that do basically same job as this best answer. However the best answer has some functionalities that those plug-ins don't have and vice versa!
更新：我发现这两个插件的工作与最佳答案基本相同。然而，最好的答案有一些插件没有的功能，反之亦然！
采纳答案by user113716
This code presumes that tags will always be balanced, and that the only tag without a closer will be <br />(though this could be easily remedied if needed).
此代码假定标签始终是平衡的，并且唯一没有关闭的标签将是<br />（尽管如果需要，这可以很容易地补救）。
#content {
width: 800px;
clear:both;
clip:auto;
overflow: hidden;
}
.revealText {
background: white; /* Strange problem in ie8 where the sliding animation goes too far
if revealText doesn't have a background color! */
}
.hiddenText {
}
.readMore {
cursor: pointer;
color: blue;
}
.ellipsis {
color: black;
}
$('document').ready(function() {
truncate('#content');
$('.readMore').on('click', function() {
var $hidden = $('.hiddenText');
if($hidden.is(':hidden')) {
$hidden.show();
$(this).insertAfter($('#content')).children('.readMoreText').text(' [Read Less] ').siblings().hide();
} else {
$(this).appendTo($('.revealText')).children('.readMoreText').text(' [Read More] ').siblings().show();
$hidden.hide();
}
});
$('.readMore').click();
function truncate(element) {
$(element + ' p').css({display: 'inline'});
var theText = $(element).html(); // Original Text
var item; // Current tag or text area being iterated
var convertedText = '<span class="revealText">'; // String that will represent the finished result
var limit = 154; // Max characters (though last word is retained in full)
var counter = 0; // Track how far we've come (compared to limit)
var lastTag; // Hold a reference to the last opening tag
var lastOpenTags = []; // Stores an array of all opening tags (they get removed as tags are closed)
var nowHiding = false; // Flag to set to show that we're now in the hiding phase
theText = theText.replace(/[\s\n\r]{2,}/g, ' '); // Consolidate multiple white-space characters down to one. (Otherwise the counter will count each of them.)
theText = theText.replace(/(<[^<>]+>)/g,'|*|SPLITTER|*||*|SPLITTER|*|'); // Find all tags, and add a splitter to either side of them.
theText = theText.replace(/(\|\*\|SPLITTER\|\*\|)(\s*)\|\*\|SPLITTER\|\*\|/g,''); // Find consecutive splitters, and replace with one only.
theText = theText.replace(/^[\s\t\r]*\|\*\|SPLITTER\|\*\||\|\*\|SPLITTER\|\*\|[\s\t\r]*$/g,''); // Get rid of unnecessary splitter (if any) at beginning and end.
theText = theText.split(/\|\*\|SPLITTER\|\*\|/); // Split theText where there's a splitter. Now we have an array of tags and words.
for(var i in theText) { // Iterate over the array of tags and words.
item = theText[i]; // Store current iteration in a variable (for convenience)
lastTag = lastOpenTags[lastOpenTags.length - 1]; // Store last opening tag in a variable (for convenience)
if( !item.match(/<[^<>]+>/) ) { // If 'item' is not a tag, we have text
if(lastTag && item.charAt(0) == ' ' && !lastTag[1].match(/span|SPAN/)) item = item.substr(1); // Remove space from beginning of block elements (like IE does) to make results match cross browser
if(!nowHiding) { // If we haven't started hiding yet...
counter += item.length; // Add length of text to counter.
if(counter >= limit) { // If we're past the limit...
var length = item.length - 1; // Store the current item's length (minus one).
var position = (length) - (counter - limit); // Get the position in the text where the limit landed.
while(position != length) { // As long as we haven't reached the end of the text...
if( !!item.charAt(position).match(/[\s\t\n]/) || position == length ) // Check if we have a space, or are at the end.
break; // If so, break out of loop.
else position++; // Otherwise, increment position.
}
if(position != length) position--;
var closeTag = '', openTag = ''; // Initialize open and close tag for last tag.
if(lastTag) { // If there was a last tag,
closeTag = '</' + lastTag[1] + '>'; // set the close tag to whatever the last tag was,
openTag = '<' + lastTag[1] + lastTag[2] + '>'; // and the open tag too.
}
// Create transition from revealed to hidden with the appropriate tags, and add it to our result string
var transition = '<span class="readMore"><span class="ellipsis">...</span><span class="readMoreText"> [Read More] </span></span>' + closeTag + '</span><span class="hiddenText">' + openTag;
convertedText += (position == length) ? (item).substr(0) + transition
: (item).substr(0,position + 1) + transition + (item).substr(position + 1).replace(/^\s/, ' ');
nowHiding = true; // Now we're hiding.
continue; // Break out of this iteration.
}
}
} else { // Item wasn't text. It was a tag.
if(!item.match(/<br>|<BR>/)) { // If it is a <br /> tag, ignore it.
if(!item.match(/\//)) { // If it is not a closing tag...
lastOpenTags.push(item.match(/<(\w+)(\s*[^>]*)>/)); // Store it as the most recent open tag we've found.
} else { // If it is a closing tag.
if(item.match(/<\/(\w+)>/)[1] == lastOpenTags[lastOpenTags.length - 1][1]) { // If the closing tag is a paired match with the last opening tag...
lastOpenTags.pop(); // ...remove the last opening tag.
}
if(item.match(/<\/[pP]>/)) { // Check if it is a closing </p> tag
convertedText += ('<span class="paragraphBreak"><br> <br> </span>'); // If so, add two line breaks to form paragraph
}
}
}
}
convertedText += (item); // Add the item to the result string.
}
convertedText += ('</span>'); // After iterating over all tags and text, close the hiddenText tag.
$(element).html(convertedText); // Update the container with the result.
}
});
<div id="content">
<p>Once upon a midnight dreary, while I pondered weak and weary,Over many a quaint and curious volume of forgotten lore.</p>
<p>Writing example text is very boring.</p>
<p>Specially when you are dumb enough not to copy and paste. Oh!</p>
<p>Once it sheltered the rogues and rapscallions of the British Empire; now Kangaroo Island is ready and waiting for some derring-do of your own. Venture into the rugged wilds of the island, traversing untamed bushland and pristine beaches seeking out seal, penguin and sea lion colonies. Meet the land loving locals - koalas, goannas, echidnas and the island's own species of kangaroo. </p>
</div>
回答by Tim R
The following works for limiting the amount of text if you don't mind losing the paragraph tags.
如果您不介意丢失段落标签，以下内容可用于限制文本数量。
<script type="text/javascript">
var shortText = $("#content").text() // get the text within the div
.trim() // remove leading and trailing spaces
.substring(0, 600) // get first 600 characters
.split(" ") // separate characters into an array of words
.slice(0, -1) // remove the last full or partial word
.join(" ") + "..."; // combine into a single string and append "..."
</script>
回答by Teja Kantamneni
Well, There is a plugin for it. jQuery Expander.
嗯，有一个插件。jQuery 扩展器。
回答by Prabhakar Undurthi
You can use jQuery Expander Plugin to do this easily. http://plugins.learningjquery.com/expander/index.html#download?
您可以使用 jQuery Expander 插件轻松完成此操作。 http://plugins.learningjquery.com/expander/index.html#download？
