текстовое усечение jQuery (читает больше стиля),

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

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

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

Вот демонстрационная структура за $ ('#content'):

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.

Как это должно загрузиться:

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

Запись текста в качестве примера... [Читайте Больше]

После нажимают на 'Read More':

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

Запись текста в качестве примера является очень скучной.

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

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


ОБНОВЛЕНИЕ: Я нашел эти два плагина, которые делают в основном то же задание как этот лучший ответ. Однако лучший ответ имеет некоторые технические возможности, которые те плагины не имеют и наоборот!

23
задан Community 23 May 2017 в 12:26
поделиться

3 ответа

Этот код предполагает, что теги всегда будут сбалансированы, и что единственный тег без закрывающего элемента будет
(хотя это можно легко исправить, если необходимо).

#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>
11
ответ дан 29 November 2019 в 01:49
поделиться

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

<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>
22
ответ дан 29 November 2019 в 01:49
поделиться

Что ж, для этого есть плагин. Расширитель jQuery .

13
ответ дан 29 November 2019 в 01:49
поделиться
Другие вопросы по тегам:

Похожие вопросы: