Как удалить HTML элементы и оставить только текст в JS

Быстрый ответ

Чтобы извлечь текст из HTML, не учитывая стили и скрытые элементы, вы можете использовать свойство textContent. Если же вам необходим только видимый текст, используйте innerText:

let unstyledText = document.getElementById('yourElementId').textContent; // Никаких лишних стилей
// или
let visibleText = document.getElementById('yourElementId').innerText; // Только видимая часть

То есть textContent возвращает весь текст, включая содержимое скрытых элементов, а innerText – только видимую часть текста.

Понимание textContent и innerText

Данные свойства предназначены для работы с текстом DOM-узлов, и у каждого из них свое поведение:

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

Выбор целевых элементов

Точное выбор элементов играет решающую роль. Старайтесь избегать конфликтов идентификаторов и всегда адресоваться к нужному элементу:

• Прямое обращение к элементу по id: document.getElementById('yourElementId').
• Выбор элемента по CSS-селектору: document.querySelector('selector').

Без лишних HTML-тэгов!

Если всё, что у вас есть, это innerHTML с HTML-тегами:

let htmlContent = document.getElementById('yourElementId').innerHTML;

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

let cleanText = htmlContent.replace(/<[^>]*>/g, ''); // Прощай, HTML-теги.

Добавление обработчика событий для извлечения текста

Обработчики событий помогают улучшить взаимодействие с элементами. Например, вы можете вытащить текст, нажав на кнопку:

document.getElementById('yourButtonId').addEventListener('click', extractText); // Кликай и получай текст.

Работа с дочерними узлами

Освойтесь с навигацией по DOM-дереву: используйте рекурсию или метод Node.childNodes, чтобы скомпоновать текст из всех вложенных узлов:

function gatherAllText(node) {
  let result = '';
  node.childNodes.forEach(child => {
    result += child.nodeType === Node.TEXT_NODE ? child.nodeValue : gatherAllText(child);
  });
  return result;
}

Упрощение с jQuery

Если у вас есть jQuery, то вытащить текст станет ещё проще:

$('#yourElementId').text(); // Всегда к вашим услугам – jQuery.

Хранение текста

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

let extractedText = document.getElementById('yourElementId').textContent; // Итак, вот наш текст.

Межплатформенные особенности

Перед использованием свойства проверьте, поддерживают ли его все нужные вам браузеры. innerText может не работать в старых версиях браузерах, в отличие от textContent, которое поддерживается большинством современных браузеров.

Баланс между innerText и textContent

Выбор между свойствами зависит от конкретной задачи:

• Если важна читаемость и воспроизведение поведения пользователя при копировании, используйте innerText.
• Если нужны сырые данные, выберите textContent.

Визуализация

Процесс извлечения текста можно представить как очистку апельсина 🍊. Наша задача – снять кожуру (HTML-теги) и насладиться мякотью (чистым текстом).

До: 🍊🔗🌐 "<p>Привет, <em>мир</em>!</p>"

После: 🥛 "Привет, мир!"

Получаем свежий и чистый текст без лишней корки HTML. 🍊➡️🥛

Обработка пробелов и переносов строк

В некоторых случаях может понадобиться особое отношение к пробелам и переносам строк при извлечении текста:

function extractTextWithSpaceHandling(elementId, handleSpace) {
  let text = document.getElementById(elementId).textContent;
  return handleSpace ? text : text.replace(/\s+/g, ' ').trim(); // С пробелами у нас всё под контролем.
}

Проверка результата

Всегда стоит дважды проверить, чтобы быть уверенным в индивидуальном ожидаемом результате. После использования innerText текст может выглядеть иначе, чем предполагалось, особенно с учетом связи этого свойства со стилями CSS.

Полезные материалы

1. Node: свойство textContent – Web API | MDN — подробное руководство по textContent.
2. Element: свойство innerHTML – Web API | MDN — всё о работе с innerHTML.
3. DOM-анализ и сериализация — спецификации W3C по анализу и сериализации DOM.
4. Удаление HTML-тегов в JavaScript | CSS-Tricks — как очищать текст от HTML с помощью регулярных выражений.
5. .text() | Документация API jQuery — особенности использования .text() в jQuery.
6. HTML DOM свойство innerText элемента — практические примеры использования innerText.
7. Эквиваленты методов jQuery на чистом JavaScript: DOM и формы — сравнение операций с DOM в JavaScript и jQuery.