Русский
English
Deutsch
Français
Español
Polski

Опции очистки

Визуальный редактор

Слов: 0

HTML редактор

Символов: 0

Очистка HTML кода от мусора

При помощи нашего сервиса Вы можете конвертировать любой текст из Word в html-разметку, а также добавлять и удалять теги из html-кода. Полученный текст легко использовать для публикации контента в различных CMS. Также Вы можете использовать наш визуальный редактор для моментального просмотра и редактирования.

Описание функционала сервиса HTMLCleanup

Наш сервис позволяет превращать HTML-код в удобный читаемый текст, пригодный для публикации как обычный текстовый документ или при помощи редакторов CMS. Также доступна функция визуального редактирования.

Сервис предоставляет 16 опций очистки, которые могут быть использованы в различных комбинациях друг с другом.

1. Styles - удаление css-стилей для отдельных тегов и всего документа.

Пример 1:

Исходный текст:

<p style="color:red">Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span style="color:green">dolor</span> sit amet.</p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet.</p>

Пример 2:

Исходный текст:

<html> <head> <link rel="stylesheet" type="text/css" href="/example.css"> <style> body { background-color: blue; } </style> </head> <body> <p style="color:red">Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span style="color:green">dolor</span> sit amet.</p> </body> </html>

После обработки:

<html> <head> <link rel="stylesheet" type="text/css" href="/example.css"> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet</p> </body> </html>

2. Classes and ID's - удаление css-селекторов классов и Id.

Пример 1:

Исходный текст:

<p id="test">Lorem ipsum dolor sit amet.</p> <p class="test1">Lorem ipsum dolor sit amet.</p> <p class="test2">Lorem ipsum <span class="test1">dolor</span> sit amet.Aenean <span id="test">commodo</span> ligula eget dolor.</p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet. Aenean <span>commodo</span> ligula eget dolor.</p>

Пример 2:

Исходный текст:

<html> <head> <style> .test1{ color:blue; font-size:200%; } .test2{ color:blue; font-size:200%; } #test{ color:green; } </style> </head> <body> <p id="test">Lorem ipsum dolor sit amet.</p> <p class="test1">Lorem ipsum dolor sit amet.</p> <p class="test2">Lorem ipsum <span class="test1">dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p> </body> </html>

После обработки:

<html> <head> <style> .test1{ color:blue; font-size:200%; } .test2{ color:blue; font-size:200%; } #test{ color:green; } </style> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet. Aenean <span>commodo</span> ligula eget dolor.</p> </body> </html>

3. Span tags - удаление всех тегов span.

Пример 1:

Исходный текст:

<p>Lorem ipsum <span>dolor</span> sit amet.</p> <span>Lorem ipsum dolor sit amet</span> <span><p>Lorem ipsum dolor sit amet.</p></span> <li><span>Lorem ipsum dolor sit amet</span></li> <p>Lorem ipsum <span style="color:green">dolor</span> sit amet. </p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> Lorem ipsum dolor sit amet <p>Lorem ipsum dolor sit amet.</p> <li>Lorem ipsum dolor sit amet</li> <p>Lorem ipsum dolor sit amet. </p>

4. Comments - удаление комментариев из html-кода.

Пример 1:

Исходный текст:

<!--Test comment --> <p>Lorem ipsum dolor sit amet.</p> <!--Test comment --> <p>Lorem ipsum dolor sit amet.</p> <!--Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor-->

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p>

5. Empty-attributes - удаление пустых селекторов атрибутов.

Пример 1:

Исходный текст:

<p id="">Lorem ipsum dolor sit amet.</p> <p class="">Lorem ipsum dolor sit amet.</p> <p class="">Lorem ipsum <span class="">dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p>

Пример 2:

Исходный текст:

<html> <head> <style> .test1{ } .test2{ } #test{ } </style> </head> <body> <p id="">Lorem ipsum dolor sit amet.</p> <p class="">Lorem ipsum dolor sit amet.</p> <p class="">Lorem ipsum <span class="test1">dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p> </body> </html>

После обработки:

<html> <head> <style> .test1{ } .test2{ } #test{ } </style> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p> </body> </html>

6. Empty new lines - удаление пустых строк.

Пример 1:

Исходный текст:

<html> <head> </head> <body> <br> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <hr> </body> </html>

После обработки:

<html> <head> </head> <body> <br> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet</p> <p>Lorem ipsum dolor sit amet</p> <hr> </body> </html>

7. Empty tags - удаление пустых тегов.

Пример 1:

Исходный текст:

<html> <head> </head> <style></style> <script></script> <body> </body> <div></div> <p></p> <span></span> <p>Text</p> </html>

После обработки:

<html> <head> </head> <body> </body> <p>Text</p> </html>

Пример 2:

Исходный текст:

<p>Lorem <span>ipsum</span> dolor sit amet.</p> <p></p> <div></div> <span></span> <p>Lorem <em></em>ipsum dolor <b></b>sit amet.</p> <br> <hr> <p>Text <span></span>text.</p> <link rel="icon" href=""> <p> </p> <p>Text <span> </span>text.</p>

После обработки:

<p>Lorem <span>ipsum</span> dolor sit amet.</p> <p>Lorem <em></em>ipsum dolor <b></b>sit amet.</p> <br> <hr> <p>Text text.</p> <link rel="icon" href=""> <p> </p> <p>Text <span> </span>text.</p>

8. Non-breaking spaces - удаление неразрывных пробелов ( ).

Пример 1:

Исходный текст:

&nbsp; <p>Lorem ipsum dolor sit amet.</p> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <p>&nbsp;</p> <p>&nbsp;&nbsp;&nbsp;</p> <p>Lorem&nbsp;ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem&nbsp;&nbsp;ipsum dolor.</p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p> </p> <p> </p> <p>Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor.</p>

9. Links - удаление ссылок (без удаления элементов-привязок).

Пример 1:

Исходный текст:

<html> <head> <link href="/example.css" rel="stylesheet"> <link rel="icon" src="images/favicon.ico"> </head> <body> <a></a> <a href="#">Lorem ipsum dolor sit amet.</a> <a href="/test.html"></a> <p><a href="/test.html">Lorem ipsum dolor sit amet.</a></p> <p><a href="/test.html" target="_blank">Lorem</a>ipsum dolor sit amet.</p> <p><a href="#bottom">Lorem</a>ipsum dolor sit amet.</p> <p><a href="/test.html"><img src ="/image.jpeg"></a></p> </body> </html>

После обработки:

<html> <head> <link href="/example.css" rel="stylesheet"> <link rel="icon" src="images/favicon.ico"> </head> <body> Lorem ipsum dolor sit amet. <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p><img src ="image.jpeg"></p> </body> </html>

10. Tables - удаление таблиц.

Пример 1:

Исходный текст:

<table></table> <p>Table1</p> <table> <tr><td></td><tr> </table> <p>Table2</p> <table> <caption>Lorem Ipsum</caption> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum2</td> </tr> <tr> <td>Ipsum Lorem</td> <td>Ipsum Lorem2</td> </tr> </table> <p>Table3</p>

После обработки:

<p>Table1</p> <p>Table2</p> <p>Table3</p>

11. Forms - удаление тегов форм ввода.

Пример 1:

Исходный текст:

<p>Lorem ipsum dolor sit amet.</p> <form></form> <form action="/test.js" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> <p>Aenean commodo ligula eget dolor.</p>

После обработки:

<p>Lorem ipsum dolor sit amet.</p> <p>Aenean commodo ligula eget dolor./p>

12. Images - удаление изображений.

Пример 1:

Исходный текст:

<html> <head> <link rel="icon" src="favicon.ico"> </head> <body> <img src="" alt=""/> <img src="/test.jpg" alt="test"/> <div><img src="/test.jpg" alt="test"/></div> <p><img src="/test.jpg" alt="test"/></p> <p><img src="/test.jpg" alt="test"/>Text</p> <p><a href="/test.html"><img src="/test.jpg" alt="test"/></a></p> </body> </html>

После обработки:

<html> <head> <link rel="icon" src="favicon.ico"> </head> <body> <div></div> <p></p> <p><a></a></p> </body> </html>

13. Tags with whitespace - удаление тегов с пробелами.

Пример 1:

Исходный текст:

<html> <head> </head> <body> <a> </a> <a> </a> <a></a> <a>Text</a> <p> </p> <p> </p> <p></p> <p>&nbsp;</p> <p>Text&nbsp;</p> <p>Text</p> <p> Text </p> <h2> </h2> <h2> </h2> <h2> Text </h2> <!-- --> </body> </html>

После обработки:

<html> <body> <a></a> <a>Text</a> <p></p> <p>Text&nbsp;</p> <p>Text</p> <p> Text </p> <h2> Text </h2> <!-- --> </body> </html>

14. All tag attributes (except href and src) - удаление атрибутов тегов (кроме href и src).

Пример 1:

Исходный текст:

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Title</title> </head> <body> <p style="color:red">Lorem ipsum dolor sit amet.</p> <p title="Test">Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span class="test1">dolor</span> sit amet.</p> <p><img src="/test.jpg" alt="test"/>Text</p> <img src="/test.png"> <p><a href="/test.html" target="_blank">Lorem ipsum dolor.</a></p> <p id="test">Lorem ipsum dolor sit amet.</p> <p class="test1">Lorem ipsum dolor sit amet.</p> <p class="test2">Lorem ipsum <span class="test1">dolor</span> sit amet. Aenean <span id="test">commodo</span> ligula eget dolor.</p> <p lang="en">Lorem ipsum dolor sit amet.</p> <p dir="rtl">Lorem ipsum dolor sit amet.</p> </body> </html>

После обработки:

<html> <head> <meta> <title>Title</title> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet.</p> <p><img src="/test.jpg"/>Text</p> <img src="/test.png"> <p><a href="/test.html">Lorem ipsum dolor.</a></p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum <span>dolor</span> sit amet. Aenean <span>commodo</span> ligula eget dolor.</p> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </body> </html>

15. JS code scripts - удаление для js-скриптов.

Пример 1:

Исходный текст:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> </style> <script></script> </head> <body> <script></script> </body> </html>

После обработки:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> </style> </head> <body> </body> </html>

Пример 2:

Исходный текст:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style></style> <script src="/test.js"></script> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <script> document.getElementById("Test").innerHTML = "Test"; </script> <p>Lorem ipsum dolor sit amet.</p> <script type="text/javascript"> alert('Hello, how are you?') </script> </body> </html>

После обработки:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style></style> </head> <body> <p>Lorem ipsum dolor sit amet.</p> <p>Lorem ipsum dolor sit amet.</p> </body> </html>

16. All tags - удаление всех html-тегов.

Пример 1:

Исходный текст:

<!DOCTYPE html> <html> <head> <title>Title</title> <link href="/example.css" rel="stylesheet"> <link rel="icon" src="favicon.ico"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> table, th, td { border:1px solid black; } .test{ color:blue; font-size:200%; } </style> <script src="/test.js"></script> </head> <body> <h1>Title of text</h1> <br> <br> <hr> <p>1.Lorem ipsum <span style="color:red">Lorem ipsum</span>.</p> <p><a href="/test_example1.html">2.Lorem ipsum dolor</a> sit amet <ul> <li>Text1</li> <li>Text2</li> </ul> <ul> <li>Test1</li> <li>Test2</li> </ul> <p></p> <!--Comment--> <script> document.getElementById("Test").innerHTML = "Test"; </script> <h2>Title of paragraph</h2> <p>3.Lorem ipsum dolor sit amet.</p> <p><img src="/test.jpg" alt="test"/>Image</p> <p><a href="/test.html"><img src="/test.jpg" alt="test"/>Link image</a></p> <table> <caption>Table name</caption> <tr> <td>Lorem ipsum</td> <td>Lorem ipsum2</td> </tr> <tr> <td>Ipsum Lorem</td> <td>Ipsum Lorem2</td> </tr> </table> <p class="test">4.Lorem ipsum dolor sit amet.</p> <form action="/test.js" method="get"> <label for="fname">First input name:</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">Last input name:</label> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Submit"> </form> <script type="text/javascript"> </script> </body> </html>

После обработки:

Title of text 1.Lorem ipsum Lorem ipsum. 2.Lorem ipsum dolor sit amet. Text1 Text2 Test1 Test2 Comment Title of paragraph 3.Lorem ipsum dolor sit amet. Image Link image Table name Lorem ipsum Lorem ipsum2 Ipsum Lorem Ipsum Lorem2 4.Lorem ipsum dolor sit amet. First input name Last input name

Функция найти и заменить в HTML-коде

Функция позволяет находить и заменять в html-коде текстовые фрагменты и теги на заданные пользователем. Замена срабатывает в html-редакторе, изменения в котором передаются в визуальный редактор.

Политика конфиденциальности

HTMLCleanup использует cookie-файлы для улучшения взаимодействия с пользователями и сбора аналитики по анонимным посетителям. Все пользовательские операции выполняются на стороне клиента и не хранятся на наших серверах. Мы используем Google Analytics для сбора анонимной статистики и Google Adsense для показа персонализированной рекламы.