Очистка HTML: удаление атрибутов, скриптов и мусора онлайн
Вставьте неаккуратный HTML и получите чистый каркас без атрибутов и схему структуры в JSON: удаляются скрипты, стили, комментарии, SVG, формы и любые пользовательские селекторы.
Всё выполняется в браузере с помощью встроенного HTML-парсера; данные никуда не загружаются. Подходит для извлечения контента, пайплайнов скрейпинга, миграции CMS и подготовки HTML для LLM.
Очистка HTML: удаление атрибутов, скриптов и мусора онлайн
Вставьте неаккуратный HTML и получите чистый каркас без атрибутов и схему структуры в JSON: удаляются скрипты, стили, комментарии, SVG, формы и любые пользовательские селекторы.
Об очистке HTML
HTML, скопированный с реальных сайтов, несёт огромное количество лишнего: классы фреймворков, встроенные стили, атрибуты data-*, скрипты отслеживания, SVG-иконки, маркеры комментариев и слои div-обёрток для отдельных задач. Когда нужна именно структура контента — для пайплайна скрейпинга, миграции CMS, сравнения или сокращения страницы перед отправкой языковой модели — всё остальное лишь скрывает полезную информацию и расходует токены.
Инструмент разбирает HTML встроенным парсером браузера (DOMParser), а затем применяет настраиваемую очистку: удаляет все атрибуты (при желании сохраняя href у ссылок), узлы script, style, комментариев, SVG и форм, элементы по пользовательским CSS-селекторам (по одному в строке; удобно для навигации и баннеров cookie), оставшиеся пустые теги и, при необходимости, каждую оболочку с ровно одним дочерним элементом без собственного текста, распрямляя вложенные div.
Рядом выводятся две версии: очищенный HTML и схема оставшейся структуры в JSON (tag, text, children, href), удобная для программной обработки. Индикатор размера показывает уменьшение: на типичных современных страницах очищенный каркас обычно на 80-95% меньше исходного. Всё выполняется локально во вкладке браузера, и HTML не покидает ваше устройство.
Примеры очистки HTML
Что делает каждая настройка с фрагментом.
| Вход | Выход | Примечание |
|---|---|---|
| ⟨div class="a b c" data-x="1"⟩⟨p style="color:red"⟩Hi⟨/p⟩⟨/div⟩ | ⟨div⟩⟨p⟩Hi⟨/p⟩⟨/div⟩ | Все атрибуты удалены, структура и текст сохранены. |
| ⟨p⟩Text⟨script⟩evil()⟨/script⟩⟨/p⟩ | ⟨p⟩Text⟨/p⟩ | Теги script удаляются полностью. |
| ⟨a class="btn" href="/docs"⟩Docs⟨/a⟩ | ⟨a href="/docs"⟩Docs⟨/a⟩ | При включённом сохранении href ссылки остаются рабочими. |
| ⟨div⟩⟨div⟩⟨p⟩Deep⟨/p⟩⟨/div⟩⟨/div⟩ | ⟨p⟩Deep⟨/p⟩ | Удаление оболочек с одним дочерним элементом убирает лишнюю вложенность. |
Как пользоваться очисткой HTML
- Вставьте HTML в поле ввода.
- Выберите нужные параметры очистки; для навигации, рекламных блоков и других элементов добавьте CSS-селекторы сайта, по одному в строке.
- Нажмите «Очистить HTML».
- Скопируйте очищенный HTML или JSON-структуру для программной обработки.
- Индикатор размера показывает, сколько мусора удалено.
Частые вопросы об очистке HTML
Мой HTML загружается на сервер?
Нет. Разбор и очистка выполняются полностью в браузере с помощью DOMParser. После загрузки страница работает офлайн.
Что делают пользовательские селекторы?
Любой элемент, соответствующий одному из CSS-селекторов (по одному в строке), удаляется до очистки — например, «nav», «#sidebar» или «div[class*=ads]». Некорректные селекторы пропускаются.
Для чего нужен вывод JSON?
Это схема очищенной структуры — объекты с полями tag, text, children и необязательным href. Она удобна для скрейперов, тестов и передачи структурированного контента программе без повторного разбора HTML.
Что означает удаление оболочек с одним дочерним элементом?
Если элемент содержит ровно один дочерний элемент и не имеет собственного текста, оболочка удаляется, а дочерний элемент занимает её место. Рекурсивно это убирает глубокую вложенность div, типичную для современных сайтов.
Зачем очищать HTML перед отправкой в LLM?
Имена классов, встроенные стили и скрипты расходуют токены, не добавляя смысла. Очищенный каркас обычно на 80-95% меньше, что снижает стоимость и оставляет модели больше места для самого контента.
Сохраняются ли изображения и переносы строк?
При удалении пустых тегов элементы br и img сохраняются явно, даже без дочерних элементов, поскольку сами несут смысл.