Обрезка строк

В JavaScript строки являются неизменяемыми последовательностями символов. jQuery не добавляет новых типов строк, но предоставляет удобные методы для взаимодействия с текстом элементов DOM. Обрезка строк часто требуется для улучшения отображения текста в интерфейсе, сокращения длинных заголовков или описаний и предотвращения нарушения верстки.

Метод text() и манипуляции со строками

Метод text() возвращает текстовое содержимое выбранных элементов или устанавливает его:

// Получение текста
let content = $('#element').text();

// Установка текста
$('#element').text('Новый текст');

Для обрезки строки используется стандартная функция JavaScript substring или slice:

let fullText = $('#element').text();
let shortText = fullText.substring(0, 50); // первые 50 символов
$('#element').text(shortText + '...');

Ключевые моменты:

  • substring(start, end) возвращает часть строки от индекса start до end (не включая end).
  • slice(start, end) работает аналогично, но поддерживает отрицательные индексы для отсчета с конца строки.

Обрезка с учётом слов

Простое обрезание по количеству символов может обрезать слово посередине. Чтобы избежать этого, используют поиск последнего пробела:

function truncateText(selector, maxLength) {
    $(selector).each(function() {
        let text = $(this).text();
        if (text.length > maxLength) {
            let truncated = text.substr(0, maxLength);
            truncated = truncated.substr(0, truncated.lastIndexOf(' '));
            $(this).text(truncated + '...');
        }
    });
}

truncateText('.description', 100);

Особенности:

  • substr(start, length) — возвращает подстроку длиной length начиная с индекса start.
  • lastIndexOf(' ') позволяет найти последний пробел и обрезать текст без разрыва слов.
  • Использование each позволяет обработать сразу несколько элементов на странице.

Обрезка с добавлением многоточия (ellipsis)

Для визуального сокращения текста часто используют CSS-свойство text-overflow: ellipsis;, но в случаях динамической подстановки текста с jQuery это нужно делать программно:

$('.title').each(function() {
    let maxLength = 30;
    let text = $(this).text();
    if (text.length > maxLength) {
        $(this).text(text.substring(0, maxLength) + '…');
    }
});

Различия между CSS и JS:

  • CSS-ellipsis работает только на одной линии и требует overflow: hidden и white-space: nowrap.
  • JS-обрезка позволяет учитывать количество символов и вставлять многоточие в любом месте, включая многострочные элементы.

Динамическая обрезка с учётом высоты блока

Иногда нужно, чтобы текст занимал не более определенной высоты, а не количества символов. jQuery позволяет вычислять высоту элемента и корректировать текст:

$('.content').each(function() {
    let el = $(this);
    let originalText = el.text();
    let maxHeight = 60; // пиксели
    while(el.height() > maxHeight && originalText.length > 0) {
        originalText = originalText.substr(0, originalText.length - 1);
        el.text(originalText + '...');
    }
});

Особенности:

  • Подходит для элементов с фиксированной высотой.
  • Подгонка текста выполняется циклически, пока высота элемента не станет допустимой.
  • Использование многоточия делает сокращение визуально понятным.

Создание универсальной функции обрезки

Для удобства можно объединить все методы в одну функцию, которая поддерживает обрезку по символам, словам или высоте блока:

function truncate(selector, options) {
    let maxLength = options.maxLength || 100;
    let byWords = options.byWords || false;
    let maxHeight = options.maxHeight || null;

    $(selector).each(function() {
        let el = $(this);
        let text = el.text();

        if(byWords && text.length > maxLength) {
            let truncated = text.substr(0, maxLength);
            truncated = truncated.substr(0, truncated.lastIndexOf(' '));
            el.text(truncated + '...');
        } else if(!byWords && text.length > maxLength) {
            el.text(text.substr(0, maxLength) + '...');
        }

        if(maxHeight) {
            while(el.height() > maxHeight && text.length > 0) {
                text = text.substr(0, text.length - 1);
                el.text(text + '...');
            }
        }
    });
}

truncate('.article-text', { maxLength: 150, byWords: true, maxHeight: 100 });

Преимущества универсального подхода:

  • Поддержка нескольких стратегий обрезки.
  • Гибкость для разных элементов страницы.
  • Совместимость с динамически изменяемым контентом.

Совместимость и производительность

  • jQuery работает с любыми современными браузерами, поэтому методы обрезки совместимы с широким спектром устройств.
  • При работе с большим количеством элементов стоит избегать лишних операций в циклах и по возможности кешировать длину текста или вычисленную высоту.
  • Использование CSS-решений (text-overflow, line-clamp) может значительно ускорить рендеринг для статичного текста.

Важные рекомендации

  • Всегда учитывать визуальный контекст: длина текста, размеры блока и шрифты.
  • Проверять, чтобы многоточие корректно отображалось во всех браузерах.
  • Для SEO и доступности лучше сохранять полный текст в атрибуте title или data-full-text, если он обрезается визуально.

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

Оглавление