JQuery усечение текста (стиль читать дальше) - PullRequest
Новая
       23

JQuery усечение текста (стиль читать дальше)

22 голосов
/ 12 февраля 2010

Мой вопрос очень похож на " Обрезать текст до 340 символов ", но в jQuery . Это звучало очень прямо вперед, но когда я искал вокруг, я не мог найти ссылку на него.

Хорошо, у меня есть div $('#content') Я хочу обрезать текст до количества символов 'x', скажем, '600' НО Я не хочу, чтобы оно само разбивало слово! Как НЕ ' Вопрос ... ' НО ' Вопросы ... '.

Что происходит с остальным текстом? Хорошо, я скрываю это и покажу по запросу! Но подождите, он должен сначала удалить ' ... ' и показать текст сразу после того, где он спрятался.

Вот пример структуры $ ('# 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>

Как загрузить:

Однажды в полночь тоскливо, пока я размышлял слабый и усталый, над многими странный и любопытный объем забытого уздечка.

Написание примера текста ... [Читать Подробнее]

После нажатия «Подробнее»:

Однажды в полночь тоскливо, пока я размышлял слабый и усталый, над многими странный и любопытный объем забытого уздечка.

Написание примера текста очень скучно.

Особенно, когда ты достаточно глуп, скопировать и вставить. О!

Однажды он укрыл мошенников и рапсаллионы Британской империи; Теперь остров Кенгуру готов и в ожидании какого-нибудь твоего дела своя. Отправляйтесь в бурные дебри остров, пересекающий дикий Бушленд и нетронутые пляжи ищут из тюленя, пингвина и морского льва колонии. Познакомьтесь с любящими землю местными жителями - коалы, гоаны, ехидны и виды кенгуру, принадлежащие острову.

UPDATE: Я нашел эти два плагина, которые в основном выполняют ту же работу, что и этот лучший ответ. Однако лучший ответ имеет некоторые функции, которых нет у этих плагинов, и наоборот!

Ответы [ 4 ]

21 голосов
/ 12 февраля 2010

Следующее работает для ограничения объема текста, если вы не против потерять теги абзаца. 

<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>
13 голосов
/ 12 февраля 2010

Ну, есть плагин для этого. jQuery Expander .

11 голосов
/ 12 февраля 2010

Этот код предполагает, что теги всегда будут сбалансированы, и что единственным тегом без доводчика будет <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|*|$1|*|SPLITTER|*|');                      // Find all tags, and add a splitter to either side of them.
    theText = theText.replace(/(\|\*\|SPLITTER\|\*\|)(\s*)\|\*\|SPLITTER\|\*\|/g,'$1$2');           // 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/, '&nbsp;');
                    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>
0 голосов
/ 05 ноября 2014

Вы можете использовать плагин jQuery Expander, чтобы сделать это легко. http://plugins.learningjquery.com/expander/index.html#download?

...