Как обрезать строку до определенной длины и добавить многоточие?

Question

[lmbtje]

Есть задача: обрезать строку, если она имеет более 83х символов (с учетом пробелов) и добавить многоточие.
В то же время если в result попадет строка, имеющая меньшее число символов с учетом пробелов (<83), в многоточии она не нуждается.

Добавил slice чтобы обрезать, но пока не понимаю как дописать многоточие, чтобы на случай меньшей строки (<83 символов) в result оно уже не подставлялось:

result = {
        title: arr[0].title.slice(0, 83),
        nick: arr[0].authors.nick
      }

Comments

[FeST1VaL]

А точно ли вам надо это обрезать через JS? можно через CSS так сказать скрыть контент за before с многоточием max-width, max-height

Answer 1

[Mizutsune]

Если нужно просто обрезать строку по количеству символов, то этого можно добиться, например одной из этих функций:

const truncateString = (s, w) => s.length > w ? s.slice(0, w) + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w) + "..." : s;

Пример использования:

console.log(truncateString("123456789", 5));

Но в этих двух вариантах есть по крайней мере, один заметный минус. Если после обрезки строки, в конце будет пробел: "123456 789", то выглядеть результат будет так: "123456 ..."

Это решается достаточно легко. Воспользуемся функцией .trim() и в итоге, выше описанные функции, будут выглядеть так:

const truncateString = (s, w) => s.length > w ? s.slice(0, w).trim() + "..." : s;

const truncateString = (s, w) => s.length > w ? s.substring(0, w).trim() + "..." : s;

Дополнительные решения

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

const truncateStringByLimitChars = ({ target, limit, pattern, useREGEx = true }) => {
  const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

  const truncateString = () => {
    return useREGEx === false
      ? target.substring(0, limit).trim() + "..."
      : target.substring(0, limit).replace(ignoredChars, "").trim() + "...";
  };

  return target.length >= limit ? truncateString() : target;
};

Пример использования:

console.log(
  truncateStringByLimitChars({
    target: "1234_______",
    limit: 8,
    pattern: [",", ".", "_"]
  })
);

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

К примеру имеется строка: Hello__World. Обрезаем без удаления "лишних" символов до 7 символов:

let string = "Hello__World",

console.log(string.length > 7 ? string.slice(0, 7).trim() + "..." : string)

Результат: Hello__...

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

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

Однако это ещё не всё и при желании, можно дополнительно улучшить функцию - truncateStringByLimitChars, чтобы она корректно работала с такими строками:

Hello-World.loooooooong.image.name.sss.123456789.jpg

BackgroundImage_for__container.with.blog-news.cards.jpg

Допустим имеется такая строка: "BackgroundImageForContainerWithBlogNewsCards.jpg" - это название изображения, которое выводится в определенном блоке.

Пример:

<div>Файл "BackgroundImageForContainerWithBlogNewsCards.jpg" успешно загружен</div>

Задача: Обрезать эту длинную строку до 15 символов + сохранить расширение файла.

Можно конечно и не модифицировать функцию, чтобы получить желаемый результат, например склеивая обрезанную строку с полученным расширением файла вне функции truncateStringByLimitChars, но это уже другая история и поэтому всё же модифицируем функцию.

Модифицированная версия будет выглядеть так:

const truncateString = configuration => {
     const {
        targetString: target,
        limitWords: limit,
        pattern = [",", ".", "_"],
        useREGEx = true,
        suffix = "...",
        addFileExtension = false
    } = configuration;

     const ignoredChars = new RegExp(`[${pattern}]+$`, "g");

     const reduceContentByLimitCharset = () => {
          return useREGEx === false ?
             target.substring(0, limit).trim() :
             target.substring(0, limit).replace(ignoredChars, "").trim();
     };

     const updatedContent = () => {
          const croppedString = reduceContentByLimitCharset();
          const fileExtension = target.slice(target.lastIndexOf(".") + 1);

          return addFileExtension === false ?
             `${croppedString}${suffix}` :
             `${croppedString}${suffix} .${fileExtension}`;
     };

     return target.length >= limit ? updatedContent() : target;
};

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

console.log(
     truncateString({
          targetString: "BackgroundImageForContainerWithBlogNewsCards.jpg",
          limitWords: 15,
          addFileExtension: true
     })
);

Результат: BackgroundImage... .jpg

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

Comments

[lmbtje]

Огромное вам спасибо за развернутый ответ

Answer 2

[ProstoChel92]

Если нужно проверять обе строки, то:

const cut = str => {
	if(str.length > 83) {
  	return str.slice(0, 83) + '...';
  } else {
  	return str;
  }
}
result ={
	title: cut(arr[0].title),
  nick: cut(arr[0].authors.nick)
}

Answer 3

[lmbtje]

В итоге воспользовался вот этой конструкцией:

const cut = title => {
        return title.length > 83 ? `${title.slice(0, 83)}…` : title
      }