Что такое надежный и изящный способ циклически проходить по струне и сбривать ее часть до

Question

У меня есть строка, и в некоторых случаях она может иметь длину более 150 символов (включая пробелы и специальные символы).Я просто собирался взять длину курсора, минус 150 (если больше 150) и, помни, сбрить часть струны.Мне интересно, есть ли надежный способ сделать это?Проблема в том, что я не хочу бриться до конца.Я хочу побрить часть, которая находится в «промежутке» с определенным идентификатором.Я хочу получить этот строковый раздел и добавить «...».Итак, у меня есть это.

Например.У меня есть.

<div id="divid">
Funny thing is, I went to the store <span id="spanid">on a Tuesday afternoon while the sun was in the sky</span> and rode home with excitement and glee. Did I say it was Tuesday?
</div>
var txtcount = jQuery('#divid').text().length;
var spanidcount = jQuery('#spanid').text().length;
if(txtcount > 140){
    var tocut = txtcount - 140;
    // here I would reduce the contents of spanid so that the total string count is 140 or less. and have spanid end with "..." - with the ... counting toward the total of 140.
}

Answer 1

Более понятный способ - использовать CSS text-overflow: ellipsis в вашем div. Образец скрипка . Преимущество этого способа в том, что вы не доверяете размеру шрифта и ширине буквы варианта, чтобы не облажаться. Вы всегда вырезаете текст именно там, где вам это нужно. И если размер div изменяется, многоточие автоматически настраивается на правильную длину.

Answer 2

Лучше всего реализовать функцию усечения. Вам не нужно расширять прототип String, но я сделал в этом случае. : P

http://jsfiddle.net/j89em/1/

String.prototype.truncate = function (len, trail) {
    len = len || 10; // default to 10
    trail = trail || '...';
    return len < this.length ? this.substring(0, len - trail.length) + trail : this;
};

var $div = $('div'),
    $span = $div.find('span');

$span.text($span.text().truncate(25));

Таким образом, вы можете проверить общую длину теста и применить метод усечения, если необходимо.

if ($div.text().length > 140) {
   $span.text($span.text().truncate(25));
}

Answer 3

Включите этот (плагин) в тег script или ссылку из внешнего файла .js через некоторое время после загрузки jQuery:

(function($) {
    $.fn.trimFluff = function(options) {
        var settings = $.extend({
            'childSelector': '#spanid',
            'maxLength': 140
        }, options);
        return this.each(function() {
            var container = $(this);
            var child = $(settings.childSelector);
            var containerLen = container.text().length;
            var childLen = child.text().length;
            var fluffToTrim = containerLen - settings.maxLength;
            if (containerLen > settings.maxLength) {
                if (fluffToTrim > childLen) { //'fluffToTrim' is larger than the child contents...
                    $(this).find(settings.childSelector).remove(); //remove child
                    containerLen = container.text().length; //recalc new length
                    fluffToTrim = containerLen - settings.maxLength; //recalc 'fluffToTrim'
                    if (containerLen > settings.maxLength) {
                        //remove "offending length" characters + 3 for the ellipsis and replace with the ellipsis
                        container.text(container.text().substring(0, containerLen - fluffToTrim + 3) + '...');
                        //string is now under (or equal to) 140 characters
                    }
                } else {
                    //remove "offending length" characters + 3 for the ellipsis, from the child, and replace with the ellipsis
                    child.text(child.text().substring(0, childLen - fluffToTrim + 3) + '...');
                }
            }
        });
    };
}(jQuery));

Затем назовите его так:

$('#divid').trimFluff();

или передать объект опций.Есть два варианта: childSelector, который принимает любой допустимый селектор jQuery (или элемент, или объект jQuery) и maxLength (который, я надеюсь, не требует пояснений :)).

Примеры:

$('#divid').trimFluff({childSelector: 'span', maxLength: 150});
$('#divid').trimFluff({childSelector: $('#spanid'), maxLength: 140});
$('#divid').trimFluff({childSelector: 'span#spanid.customClass', maxLength: 160});

var s = document.getElementById('spanid');
$('divid').trimFluff({childSelector: s); 

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

. Это практически не проверяет ошибки, но будет работать с любым объектом jQuery, где функция text() что-то делает.

Веселитесь вместе с ним.

Answer 4

Вы можете сделать это так:

html:

<p>Funny thing is, I went to the store <span>on a Tuesday afternoon while the sun was in the sky</span> and rode home with excitement and glee. Did I say it was Tuesday?</p>
<button>Reduce</button>

jQ:

var reduceStr = function(str, maxLen) {
    return str.substr(0, maxLen-1) + (str.length > maxLen ? '...' : '');
};

$('button').click(function(){
    $('span').text(reduceStr($('span').text(), 30));
});