Очистка форматирования текста от HTML и мусора Word/Google Docs

Статью писали в Google Docs, согласовали и вставили в CMS. На сайте она поехала: у одного абзаца чужой шрифт, у другого белый фон, межстрочный интервал приехал из Word. А в коде страницы вместе с текстом поселилась гора служебной разметки.

Виноват буфер обмена. Вместе с текстом он тащит инлайновые стили mso-, обёртки span, служебные теги вида o:p и комментарии. Очистка форматирования текста снимает всё это: вставьте такой кусок в поле выше и заберите то же самое, но без мусора.

Кому это нужно

Контент-менеджерам, которые переносят статьи из документов в CMS. SEO-специалистам: раздутый код мешает разбирать страницу и утяжеляет её. Email-верстальщикам, потому что в письме мусор из Word ломается ещё веселее, чем на сайте.

Очистка форматирования текста: как работают четыре галочки

Все четыре стоят по умолчанию, и в таком виде инструмент делает то, чего от него ждут чаще всего.

• Сохранять базовое форматирование. Оставляет теги p, b, strong, i, em, a, ul, ol, li и br. Всё остальное разметкой быть перестаёт. Снимите галочку, если нужен голый текст без единого тега.
• Удалять атрибуты style и class. Выносит из тегов инлайновые стили и классы чужой вёрстки. Снимете галочку, и style с class уедут к вам вместе с текстом.
• Убирать мусор Word и Google Docs. Разворачивает обёртки span, выбрасывает объявления mso- и служебные теги редакторов вроде o:p и w:sdt.
• Схлопывать лишние пробелы и пустые строки. Два и больше пробелов подряд сводятся к одному, отступы в начале строк снимаются, три и больше переводов строки превращаются в два.

Результат пересчитывается сразу: и пока вы печатаете, и когда щёлкаете галочку.

Было и стало на куске из Word

Вот типичный абзац, который приезжает из документа:

<p class=MsoNormal><span style='font-size:11.0pt;mso-fareast-font-family:"Times New Roman"'>Цена <b>от 1200 рублей</b></span><o:p></o:p></p>

Со всеми четырьмя галочками на выходе останется вот это:

<p>Цена <b>от 1200 рублей</b></p>

Класс MsoNormal, стиль шрифта, обёртка span и пустой o:p исчезли. Смысл и жирное начертание остались.

Что делать с результатом

Когда форматирование сохранено, на выходе лежит HTML-код. В поле результата вы увидите теги как текст, и это нормально. Вставлять его нужно в режим исходного кода вашего редактора: в визуальном теги так и останутся тегами.

Нужен обычный текст? Снимите первую галочку, и результат можно класть куда угодно. Кнопка «Скопировать» появляется, как только в результате что-то есть.

Ещё одна тонкость про счётчики. «Символов до» считает то, что вы вставили, а «Символов после» меряет готовый результат вместе с тегами. Если форматирование вы сохранили, разница выйдет скромной, а на аккуратном исходнике может оказаться и нулевой. Чтобы увидеть чистый объём текста, снимите первую галочку.

Чего инструмент не сохранит

• Заголовки. В безопасный набор h2 и h3 не входят, тег с заголовка снимается. Но с соседним абзацем он больше не слипается: на границе блока инструмент ставит перенос строки, а с сохранённым форматированием тег br. Размечать заголовки заново придётся руками.
• Таблицы. Тега table в безопасном наборе тоже нет. Текст из ячеек не пропадёт и не слипнется: каждая ячейка встаёт на отдельную строку. А вот деление на строки и столбцы теряется, так что переносить таблицу через этот инструмент по-прежнему не стоит.
• Картинки. Тег img в результат не попадает, и подпись alt вместе с ним. Остаётся только текст вокруг.
• Скрипты и встройки. Теги script, style, iframe, object, embed и соседние по смыслу выбрасываются вместе с содержимым. Это защита: чужой код не должен приезжать в вашу статью.
• Ссылки на javascript. Такой адрес не переносится, текст самой ссылки остаётся.
• Одиночный неразрывный пробел. Два таких подряд схлопнутся в обычный пробел, а один так и уедет в вашу статью. Ловить его надо отдельным инструментом.

Сколько текста влезает

Жёсткого лимита нет. Но каждое нажатие клавиши заново разбирает всю вставку через DOMParser и собирает дерево заново, а это тяжелее простой замены по строке. Статья на пару тысяч слов чистится мгновенно. Если вы гоните книгу целиком, лучше делить её на главы.

Перед работой поставьте галочку согласия над формой, иначе поле ввода останется заблокированным. Галочку мы не запоминаем, при следующем заходе поставьте её заново.

Текст никуда не уходит: разбор идёт у вас в браузере. Вставьте свой кусок и сравните счётчики до и после.