Как правильно обрезать текст js?

Question

[PlasterTom]

Добрый день. Как правильно обрезать текст с применение различных фильтров: по количеству символов, но чтобы в конце не было пробела и знаков пунктуации (если я ничего не упустил).
Исходный код таков, но здесь не хватает удаления знаков пунктуации.

function kitcut(text, limit) {
                            text = text.trim();
                            if( text.length <= limit) return text;

                            text = text.slice( 0, limit);
                            const lastSpace = text.lastIndexOf(" ");
           
                            if( lastSpace > 0) {
                                text = text.substr(0, lastSpace);
                            }
                            return text + "...";
                        }

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

function kitcut(text, limit) {
                            text = text.trim();
                            if( text.length <= limit) return text;

                            text = text.slice( 0, limit);
                            const lastSpace = text.lastIndexOf(" ");
                        const match      = text.match(/[!.,?]/);
                        const lastIndex  = text.lastIndexOf(match[match.length-1]);

                            if( lastSpace > 0) {
                                text = text.substr(0, lastSpace).substr(0, lastIndex);
                            }
                            return text + "...";
                        }

Comments

[Александр]

Зачем вам проверка на lastSpace, если trim и так обрезает пробелы?

[PlasterTom]

Александр, потому что строка может обрезаться посередине слова, тогда остается нечто вида "Как правильно обр...", поэтому ищем последний пробел, обрезаем по нему, получаем "Как правильно...". Сохраняем слова целостными.

[Антон Спирин]

PlasterTom, у вас задача обрезать абзац по определенной высоте?

[PlasterTom]

Антон Спирин, примерно так. Нужно скрыть часть текста поста в блоге. Как это обычно бывает часть поста видна, затем идет троеточие и кнопка "читать далее".

[Антон Спирин]

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

function truncateText (el, maxHeight?) {

  let text = el.innerHTML.trim();

  while(maxHeight ?  (el.clientHeight > maxHeight) : (el.clientHeight < el.scrollHeight)) {
    text = el.innerHTML.trim();

    if (text.split(' ').length <= 1) {
      break;
    }

    el.innerHTML = text.replace(/\W*\s(\S)*$/, '...');
  }
}

export default truncateText;

Обрезает по словам. Знаки препинания в конце срезаются. Есть расширенная версия для обрезки HTML с сохранением тегов, в том числе закрывающих из обрезанной части.
Если не задан maxHeight, то обрезает по размеру блока.

Демо.

truncateHTML

import truncateText from './truncateText';

function truncateHTML(el, maxHeight?) {
  let text = el.innerHTML.trim();

  const tags = [];

  // remove all tags and collect them in array
  text = text.replace(/<[^>]*>/g, (tag, position) => {
    tags.push({ tag, position });
    return '';
  });

  el.innerHTML = text;

  // truncate text
  truncateText(el, maxHeight);

  text = el.innerHTML.trim();


  // restore all tags to their positions
  for (let item of tags) {
    const { tag, position } = item;

    if(position <= text.length - 4) {
      text = text.substring(0, position) + tag + text.substring(position);
    } else {
      text += tag;
    }
  }

  // remove all empty tags from end of string
  text = text.replace(/<[^\/>][^>]*><\/[^>]+>/g, '');
  el.innerHTML = text;
}

export default truncateHTML;

Answer 1

[Dark_Scorpion]

Если только пробелы, то самый простой вариант.

function kitcut(text, limit) {
  text = text.trim();
  if( text.length <= limit) return text;

  text = text.slice(0, limit);

  return text.trim() + "...";
}

Если ещё нужно игнорировать определённые символы, то проще идти с конца. Пример функции:

var str = 'Test text. Hello, world!!!!,..,';
var z = getLastIndexWithoutIgnore(str, ['!', ',', '.']);

console.log( 'Index: %s, string: %s', z,  str.slice(0, z+1) );
// => Index: 22, string: Test text. Hello, world

function getLastIndexWithoutIgnore(text, ignoreArr) {
  for(var i = text.length-1; i >= 0; i--) {
    if(ignoreArr.indexOf(text[i]) === -1) {
      return i;
    }
  }

  return 0;
}