умный способ сократить длинные строки с помощью JavaScript

Question

умный способ сократить длинные строки с помощью JavaScript

146

задан user000001 21 September 2013 в 16:09

5 ответов

С быстрым поиском в Google я нашел это ... Это работает для вас?

/**
 * Truncate a string to the given length, breaking at word boundaries and adding an elipsis
 * @param string str String to be truncated
 * @param integer limit Max length of the string
 * @return string
 */
var truncate = function (str, limit) {
    var bits, i;
    if (STR !== typeof str) {
        return '';
    }
    bits = str.split('');
    if (bits.length > limit) {
        for (i = bits.length - 1; i > -1; --i) {
            if (i > limit) {
                bits.length = i;
            }
            else if (' ' === bits[i]) {
                bits.length = i;
                break;
            }
        }
        bits.push('...');
    }
    return bits.join('');
};
// END: truncate

1

ответ дан 23 November 2019 в 22:07

Большинство современных фреймворков Javascript ( JQuery , Prototype , и т. д. ...) к String прикреплена служебная функция, которая этим занимается.

Вот пример в Prototype:

'Some random text'.truncate(10);
// -> 'Some ra...'

Это похоже на одну из тех функций, которые вы хотите, чтобы кто-то другой имел дело / обслуживал. Я бы позволил фреймворку справиться с этим, вместо того, чтобы писать больше кода.

4

ответ дан 23 November 2019 в 22:07

~~Обратите внимание, что это нужно сделать только для Firefox.~~

Все ~~другие~~ браузеры поддерживают решение CSS (см. таблицу поддержки ):

p {
    white-space: nowrap;
    width: 100%;                   /* IE6 needs any width */
    overflow: hidden;              /* "overflow" value must be different from  visible"*/ 
    -o-text-overflow: ellipsis;    /* Opera < 11*/
    text-overflow:    ellipsis;    /* IE, Safari (WebKit), Opera >= 11, FF > 6 */
}

По иронии судьбы, я получил этот фрагмент кода из Mozilla MDC.

54

ответ дан 23 November 2019 в 22:07

Вот мое решение, которое имеет несколько улучшений по сравнению с другими предложениями:

String.prototype.truncate = function(){
    var re = this.match(/^.{0,25}[\S]*/);
    var l = re[0].length;
    var re = re[0].replace(/\s$/,'');
    if(l < this.length)
        re = re + "&hellip;";
    return re;
}

// "This is a short string".truncate();
"This is a short string"

// "Thisstringismuchlongerthan25characters".truncate();
"Thisstringismuchlongerthan25characters"

// "This string is much longer than 25 characters and has spaces".truncate();
"This string is much longer&hellip;"

Оно:

Обрезает первый пробел после 25 characters
Расширяет объект JavaScript String, так что его можно использовать (и приковать) любая строка.
Обрежет строку, если усечение приводит к завершающему пробелу;
Добавляет юникодную сущность hellip (многоточие), если усеченная строка длиннее 25 символов

7

ответ дан 23 November 2019 в 22:07

Другие вопросы по тегам:

string javascript

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

score 314 · Accepted Answer

String.prototype.trunc = String.prototype.trunc ||
      function(n){
          return (this.length > n) ? this.substr(0, n-1) + '&hellip;' : this;
      };

Теперь вы можете:

var s = 'not very long';
s.trunc(25); //=> not very long
s.trunc(5); //=> not ...

Если под «более сложным» вы подразумеваете усечение на границе последнего слова строки, то это может быть то, что вам нужно:

String.prototype.trunc =
     function( n, useWordBoundary ){
         if (this.length <= n) { return this; }
         var subString = this.substr(0, n-1);
         return (useWordBoundary 
            ? subString.substr(0, subString.lastIndexOf(' ')) 
            : subString) + "&hellip;";
      };

теперь вы можно делать:

s.trunc(11,true) // => not very...

Если вы не хотите расширять собственные объекты, вы можете использовать:

function truncate( n, useWordBoundary ){
    if (this.length <= n) { return this; }
    var subString = this.substr(0, n-1);
    return (useWordBoundary 
       ? subString.substr(0, subString.lastIndexOf(' ')) 
       : subString) + "&hellip;";
};
// usage
truncate.apply(s, [11, true]); // => not very...