Работа со строками

Zepto.js — лёгкая библиотека, создаваемая как упрощённая версия jQuery, ориентированная на мобильные устройства. Несмотря на компактность, она предоставляет широкий набор инструментов для работы с DOM, включая обработку текстового содержимого элементов и манипуляцию строками.

Получение и установка текстового содержимого

Метод text() используется для получения или изменения текстового содержимого выбранных элементов.

// Получение текста первого элемента
var content = $('p').first().text();

// Установка нового текста для всех элементов <p>
$('p').text('Новый текст для всех параграфов');

Ключевой момент: при вызове без аргументов метод возвращает только текст первого элемента, а при передаче строки — обновляет текст всех выбранных элементов.

Работа с HTML-контентом

Метод html() позволяет работать с HTML-содержимым элементов. Это важно, когда необходимо не просто изменить текст, а вставить разметку.

// Получение HTML
var htmlContent = $('#container').html();

// Установка HTML
$('#container').html('<span class="highlight">Выделенный текст</span>');

Отличие от text() заключается в том, что html() возвращает или устанавливает полное HTML-содержимое, включая теги, а не только текст.

Добавление и извлечение атрибутов

Строки часто хранятся в атрибутах элементов. Методы attr() и removeAttr() обеспечивают работу с ними.

// Получение значения атрибута
var linkHref = $('a#myLink').attr('href');

// Установка атрибута
$('a#myLink').attr('title', 'Ссылка на сайт');

// Удаление атрибута
$('a#myLink').removeAttr('title');

Важно помнить, что значение атрибута всегда возвращается как строка.

Работа с формами и полями ввода

Для текстовых полей форм используется метод val(), который напрямую взаимодействует со строками внутри элементов <input>, <textarea> и <select>.

// Получение значения поля ввода
var inputValue = $('#username').val();

// Установка нового значения
$('#username').val('новое имя пользователя');

Если поле пустое, метод возвращает пустую строку. Перед установкой значения можно использовать методы обработки строк, такие как trim().

Цепочки методов и строковые операции

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

$('#message')
  .text('Привет, мир!')
  .css('color', 'blue')
  .fadeIn(300);

При необходимости строку можно модифицировать до вставки в элемент:

var name = 'Алексей';
$('#greeting').text('Здравствуйте, ' + name.toUpperCase() + '!');

Фильтрация элементов по тексту

Для поиска элементов по их содержимому используется метод filter(), который может принимать функцию с проверкой строки.

$('li').filter(function() {
  return $(this).text().indexOf('важно') !== -1;
}).css('font-weight', 'bold');

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

Регулярные выражения и замена текста

Встроенные методы JavaScript для работы со строками (replace, match, split) можно напрямую применять к содержимому, полученному через text().

// Замена всех цифр на символ #
$('p.numbers').text(function(i, oldText) {
  return oldText.replace(/\d/g, '#');
});

Аргумент функции при использовании формы text(function(index, oldText){}) позволяет безопасно работать с текущим содержимым каждого элемента.

Динамическое добавление текста

Методы append(), prepend(), before() и after() позволяют добавлять новые строки в DOM с сохранением HTML-структуры.

// Добавление текста в конец контейнера
$('#log').append('<p>Новая запись</p>');

// Добавление текста в начало контейнера
$('#log').prepend('<p>Первая запись</p>');

При этом важно учитывать, что добавленный текст может содержать HTML, который будет интерпретирован, если используется append() или prepend(). Для добавления только текста безопаснее использовать text().

Преобразование содержимого в строку и обратное

Иногда необходимо извлечь данные в виде строки для дальнейшей обработки:

var contentArray = $('ul li').map(function() {
  return $(this).text();
}).get(); // Возвращает массив строк

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

Особенности работы с пустыми строками

При манипуляциях важно различать undefined и пустую строку. Методы Zepto всегда возвращают строку, даже если элемент пуст:

$('#empty').text(); // Возвращает ''
$('#nonexistent').text(); // Возвращает undefined

Это отличие критично при условных проверках или динамическом формировании контента.

Интеграция со стандартными строковыми методами JS

Все данные, полученные через Zepto как строки, можно обрабатывать стандартными методами Jav * aScript:

  • toUpperCase() / toLowerCase() — изменение регистра
  • trim() — удаление пробелов
  • split() / join() — работа с массивами
  • substring() / slice() — извлечение подстрок

Пример комбинирования:

var sentence = $('#sentence').text().trim();
var words = sentence.split(' ').map(function(word) {
  return word.toUpperCase();
});
$('#sentence').text(words.join(' '));

Такой подход позволяет использовать Zepto как мост между DOM и полноценной строковой обработкой на стороне клиента.

Оглавление