Умный способ обрезать длинные строки

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

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

ОТВЕТЫ

Ответ 1

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...

Ответ 2

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

Ответ 4

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

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

short = long.replace(/(.{7})..+/, "$1&hellip;");

или же

short = long.replace(/(.{7})..+/, "$1…");

Ответ 5

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

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 символы
  • Расширяет объект JavaScript String, поэтому его можно использовать на (и прикованным к) любая строка.
  • Урезает строку, если усечение приводит к завершающему пространству;
  • Добавит юникод hellip entity (эллипсис), если усеченная строка длиннее 25 символов

Ответ 6

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

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"

Ответ 7

Самые современные рамки Javascript (JQuery, Prototype, и т.д....) имеют функцию утилиты, привязанную к String, которая обрабатывает это.

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

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

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

Ответ 8

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

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

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

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

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

Ответ 9

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

например.

javascript:

news.comments

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

news.comments.trunc(20, true);

Однако, на news.comments 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_;
 };

My simple null checker (проверяет буквальную "нулевую" вещь (это ловит undefined, ", null," null" и т.д.)

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

Ответ 10

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

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.

Ответ 11

С помощью быстрого Googling я нашел this... Это работает для вас?

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

Ответ 12

Вы можете использовать функцию Ext.util.Format.ellipsis, если вы используете Ext.js.

Ответ 13

Я поддержал решение 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;
}

Ответ 14

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;';
    };

Ответ 15

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

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

Ответ 16

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

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

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

Ответ 17

Я недавно должен был сделать это и закончил с:

/**
 * 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, '...');
}

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

Ответ 18

Мне нравится использовать .slice() Первый аргумент - это начальный индекс, а второй - конечный. Все, что между ними, - это то, что вы получите.

var long = "hello there! Good day to ya."
// hello there! Good day to ya.

var short  = long.slice(0, 5)
// hello

Ответ 19

Где-то Смарт: D

//My Huge Huge String
    let tooHugeToHandle = 'It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).'
    
//Trim Max Length
 const maxValue = 50
// The barber.
 const TrimMyString = (string, maxLength, start = 0) => {
//Note - 'start' is if I want to start after some point of the string
    	if (string.length > maxLength) {
    	let trimmedString = string.substr(start, maxLength)
    	 return (
    	   trimmedString.substr(
    	   start,
    	   Math.min(trimmedString.length,   trimmedString.lastIndexOf(' '))
           ) + ' ...'
         )
       }
    return string
}

console.log(TrimMyString(tooHugeToHandle, maxValue))

Ответ 20

.wrap{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;
  width:"your desire width";
}
<p class="wrap">He this is code</p>

Ответ 21

('long text to be truncated').replace(/(.{250})..+/, "$1…");

Каким-то образом приведенный выше код не работал для некоторого текста, вставленного или написанного в приложении vuejs. Поэтому я использовал усечение lodash, и теперь он работает нормально.

_.truncate('long text to be truncated', { 'length': 250, 'separator': ' '});

Ответ 22

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

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

выход:

это lo...

12345...