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



есть ли у кого-нибудь более сложное решение/библиотека для сокращения строк с помощью JavaScript, чем очевидное:



if(string.length > 25) {
string = string.substring(0,24)+"...";
}
1066   18  

18 ответов:

String.prototype.trunc = String.prototype.trunc ||
      function(n){
          return (this.length > n) ? this.substr(0, n-1) + '…' : 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...

обратите внимание, что это нужно сделать только для 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.

использовать лодашь по усечь

_.truncate('hi-diddly-ho there, neighborino');
// → 'hi-diddly-ho there, neighbo…'

или подчеркивания.строка усекается.

_('Hello world').truncate(5); => 'Hello...'

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

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;"

It:

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

есть веские причины, по которым люди могут захотеть сделать это в JavaScript вместо CSS.

обрезать до 8 символов (не включая многоточие) в JavaScript:

short = long.replace(/^(.{8}).+/, "&hellip;");

или

short = long.replace(/^(.{8}).+/, "…");

большинство современных JavaScript фреймворков (JQuery,прототип, etc...) есть служебная функция, прикрепленная к строке, которая обрабатывает это.

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

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

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

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

p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

(обратите внимание, что для этого требуется, чтобы ширина элемента была ограничена каким-либо образом, чтобы иметь какой-либо эффект.)

на основе https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/.

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

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

например

javascript:

news.comments

используя функция усечения

news.comments.trunc(20, true);

однако, на новости.комментариев null это было бы "сломать"

финал

checkNull(news.comments).trunc(20, true) 

функция trunc любезно KooiInc

String.prototype.trunc =
 function (n, useWordBoundary) {
     console.log(this);
     var isTooLong = this.length > n,
         s_ = isTooLong ? this.substr(0, n - 1) : this;
     s_ = (useWordBoundary && isTooLong) ? s_.substr(0, s_.lastIndexOf(' ')) : s_;
     return isTooLong ? s_ + '&hellip;' : s_;
 };

моя простая проверка null (проверяет также литеральную" нулевую " вещь (это ловит undefined,"", null, "null" и т. д..)

  function checkNull(val) {
      if (val) {
          if (val === "null") {
              return "";
          } else {
              return val;
          }
      } else {
          return "";
      }
  }

можно использовать ВН.утиль.Формат.многоточие функция, если вы используете Ext.js.

Я поддержал решение Kooilnc. Действительно хорошее компактное решение. Есть один небольшой крайний случай, который я хотел бы рассмотреть. Если кто-то вводит действительно длинную последовательность символов по какой-либо причине, она не будет усечена:

function truncate(str, n, useWordBoundary) {
    var singular, tooLong = str.length > n;
    useWordBoundary = useWordBoundary || true;

    // Edge case where someone enters a ridiculously long string.
    str = tooLong ? str.substr(0, n-1) : str;

    singular = (str.search(/\s/) === -1) ? true : false;
    if(!singular) {
      str = useWordBoundary && tooLong ? str.substr(0, str.lastIndexOf(' ')) : str;
    }

    return  tooLong ? str + '&hellip;' : str;
}

С быстрым Гуглом я нашел этой... Это работает для вас?

/**
 * 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

иногда имена файлов нумеруются, где индекс может быть в начале или в конце. Поэтому я хотел сократить от центра строки:

function stringTruncateFromCenter(str, maxLength) {
    const midChar = "…";      // character to insert into the center of the result
    var left, right;

    if (str.length <= maxLength) return str;

    // length of beginning part      
    left = Math.ceil(maxLength / 2);

    // start index of ending part   
    right = str.length - Math.floor(maxLength / 2) + 1;   

    return str.substr(0, left) + midChar + str.substring(right);
}

имейте в виду, что я использовал символ заполнения здесь с более чем 1 байтом в UTF-8.

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

"My string".truncate(n)

вам придется использовать конструктор объекта regexp, а не литерал. Также вам придется бежать \S при преобразовании его.

String.prototype.truncate =
    function(n){
        var p  = new RegExp("^.{0," + n + "}[\S]*", 'g');
        var re = this.match(p);
        var l  = re[0].length;
        var re = re[0].replace(/\s$/,'');

        if (l < this.length) return re + '&hellip;';
    };

использовать следующий код

 function trancateTitle (title) {
    var length = 10;
    if (title.length > length) {
       title = title.substring(0, length)+'...';
    }
    return title;
}

исправление решения Kooilnc:

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

Это возвращает строковое значение вместо строкового объекта, если его не нужно усекать.

эта функция также усекает пространство и слова.(например: мать в мотылька...)

String.prototype.truc= function (length) {
        return this.length>length ? this.substring(0, length) + '&hellip;' : this;
};

использование:

"this is long length text".trunc(10);
"1234567890".trunc(5);

выход:

это Ло...

12345...

Мне недавно пришлось это сделать и в итоге получилось:

/**
 * Truncate a string over a given length and add ellipsis if necessary
 * @param {string} str - string to be truncated
 * @param {integer} limit - max length of the string before truncating
 * @return {string} truncated string
 */
function truncate(str, limit) {
    return (str.length < limit) ? str : str.substring(0, limit).replace(/\w{3}$/gi, '...');
}

чувствует себя хорошо и чисто для меня :)

лучшая функция, которую я нашел. Кредит на текст-многоточие.

function textEllipsis(str, maxLength, { side = "end", ellipsis = "..." } = {}) {
  if (str.length > maxLength) {
    switch (side) {
      case "start":
        return ellipsis + str.slice(-(maxLength - ellipsis.length));
      case "end":
      default:
        return str.slice(0, maxLength - ellipsis.length) + ellipsis;
    }
  }
  return str;
}

примеры:

var short = textEllipsis('a very long text', 10);
console.log(short);
// "a very ..."

var short = textEllipsis('a very long text', 10, { side: 'start' });
console.log(short);
// "...ng text"

var short = textEllipsis('a very long text', 10, { textEllipsis: ' END' });
console.log(short);
// "a very END"

Comments

    Ничего не найдено.