Вспомогательные функции для строк

Dom7 — это компактная библиотека для работы с DOM, часто используемая вместе с фреймворком Framework7. Помимо удобного манипулирования элементами страницы, Dom7 предоставляет набор вспомогательных функций для работы со строками, которые упрощают обработку текстового контента.

text(): получение и установка текста элемента

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

// Получение текста первого элемента в наборе
const content = $('.item-title').text();

// Установка нового текста для всех выбранных элементов
$('.item-title').text('Новый заголовок');

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

  • Возвращает текст без HTML-тегов.
  • Если метод вызван с аргументом, он заменяет существующее содержимое текста для всех элементов выборки.
  • Если аргумент — функция, она вызывается для каждого элемента с текущим текстом, что удобно для динамических изменений.
$('.item-title').text((index, oldText) => `${oldText} (${index})`);

html(): работа с HTML-содержимым

Метод html() позволяет читать или изменять HTML внутри элемента.

// Получение HTML первого элемента
const htmlContent = $('.item-content').html();

// Установка HTML для всех элементов
$('.item-content').html('<strong>Выделенный текст</strong>');

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

  • При чтении возвращается строка с HTML-разметкой.
  • При установке HTML, строки корректно парсятся в DOM.
  • Можно использовать функции для динамического изменения контента.

val(): работа со значениями элементов форм

Метод val() предназначен для работы с значениями <input>, <textarea> и <select>.

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

// Установка значения
$('#username').val('Иванов');

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

  • Поддерживается множественный выбор элементов.
  • Если элемент <select> позволяет множественный выбор, возвращается массив выбранных значений.
  • Можно использовать функцию для вычисления нового значения на основе старого.
$('#username').val((index, oldValue) => oldValue.toUpperCase());

trim(): удаление пробельных символов

Для работы с обрезкой пробелов Dom7 предоставляет метод trim(). Он удаляет начальные и конечные пробелы, позволяя подготовить строки для последующих операций.

const input = $('#username').val().trim();

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

  • Работает с любыми строками.
  • Полезно при валидации данных форм перед отправкой.

textAppend() и htmlAppend(): добавление содержимого

Для добавления строкового содержимого к элементам существуют методы textAppend() и htmlAppend().

// Добавление текста к существующему
$('.item-title').textAppend(' - новый текст');

// Добавление HTML
$('.item-content').htmlAppend('<span class="highlight">Новый блок</span>');

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

  • Сохраняют существующее содержимое, добавляя новые данные в конец.
  • Позволяют динамически строить контент без перезаписи.

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

Методы attr() и removeAttr() позволяют получать и изменять строковые атрибуты элементов, включая id, class, data-* и другие.

// Получение атрибута
const dataId = $('.item').attr('data-id');

// Установка атрибута
$('.item').attr('data-id', '123');

// Удаление атрибута
$('.item').removeAttr('data-id');

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

  • При передаче объекта можно установить несколько атрибутов одновременно.
  • Возвращает строку или undefined, если атрибут отсутствует.

Конкатенация и динамическая генерация строк

Dom7 часто используют вместе с шаблонами строк для динамического создания элементов:

const name = 'Иван';
const age = 25;

$('.profile').html(`<p>Имя: ${name}</p><p>Возраст: ${age}</p>`);

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

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

Преобразование строк в массивы и обратно

Для разделения текста на слова или символы используется стандартный Jav * aScript:

const words = $('.item-title').text().split(' ');
const joined = words.join(', ');
$('.item-title').text(joined);

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

  • Dom7 предоставляет удобный доступ к содержимому, но для сложных манипуляций используются стандартные методы JavaScript.
  • Комбинация text() и методов массива позволяет создавать динамически обновляемые текстовые интерфейсы.

Безопасность при работе с HTML

При работе с методами html() и htmlAppend() важно избегать прямого вставления пользовательского ввода, чтобы предотвратить XSS-атаки:

// Небезопасно
$('.item-content').html(userInput);

// Безопасно через text()
$('.item-content').text(userInput);

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

Итоги работы со строками

Dom7 объединяет в себе следующие ключевые возможности для строк:

  • Чтение и запись текста: text().
  • Работа с HTML: html(), htmlAppend().
  • Значения форм: val().
  • Удаление пробелов: trim().
  • Манипуляции атрибутов: attr(), removeAttr().
  • Динамическая генерация контента через шаблонные строки.

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

Оглавление