Если нужно обрезать строку, а также удалить и определенные символы с конца строки(лишние точки, запятые, пробелы и прочее), перед добавлением троеточия, тогда можно сделать вот так:
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
