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

Opcje oczyszczania

Edytor Wizualny

Słów: 0

Edytor HTML

Znaki: 0

Czysty kod HTML online

Dzięki naszemu serwisowi można konwertować dowolny tekst z Worda na format html, a także dodawać i usuwać znaczniki z kodu html. Powstały tekst można łatwo wykorzystać do publikacji treści w różnych CMS. Można również skorzystać z naszego edytora wizualnego, który umożliwia natychmiastowe przeglądanie i edytowanie.

Opis funkcjonalności serwisu HTMLCleanup

Nasz serwis umożliwia przekształcenie kodu HTML w łatwy do odczytania tekst, nadający się do publikacji jako zwykły dokument tekstowy lub w edytorach CMS. Dostępna jest również funkcja edycji wizualnej.

W ramach serwisu dostępnych jest 16 opcji czyszczenia, które można stosować w różnych kombinacjach.

1. Styles - usuwanie stylów css dla poszczególnych znaczników i całego dokumentu.

Przykład 1:

Tekst wyjściowy:

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

Po obróbce:

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

Przykład 2:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Klasy i ID - usuwanie selektorów css klas i Id.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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>

Przykład 2:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Tagi span - usuwanie znaczników span.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Komentarze - usuwanie komentarzy z kodu html.

Przykład 1:

Tekst wyjściowy:

<!--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-->

Po obróbce:

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

5. Puste atrybuty - usuwanie pustych selektorów atrybutów.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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>

Przykład 2:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Puste linie - usuwanie pustych wierszy.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Puste tagi - usuwanie pustych znaczników.

Przykład 1:

Tekst wyjściowy:

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

Po obróbce:

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

Przykład 2:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Spacje niełamliwe - usuwanie spacji niezniszczalnych się ( ).

Przykład 1:

Tekst wyjściowy:

&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>

Po obróbce:

<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. Linki - usuwanie łączy (bez usuwania elementów zakotwiczenia).

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Tabele - usuwanie tabel.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

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

11. Formularze - usuwanie znaczników formularzy wprowadzania.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

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

12. Zdjęcia - usuwanie obrazów.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

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

13. Tagi z "białymi znakami" - usuwanie znaczników ze spacjami.

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Usuń wszystkie atrybuty z tagów (z wyjątkiem href i src) - usuwanie atrybutów znaczników (oprócz href i src).

Przykład 1:

Tekst wyjściowy:

<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>

Po obróbce:

<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. Skrypty - usuwanie skryptów js.

Przykład 1:

Tekst wyjściowy:

<!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>

Po obróbce:

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

Przykład 2:

Tekst wyjściowy:

<!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>

Po obróbce:

<!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. Wszystkie tagi - usuwanie wszystkich znaczników html.

Przykład 1:

Tekst wyjściowy:

<!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>

Po obróbce:

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

Funkcja "Znajdź i zamień w kodzie HTML"

Funkcja umożliwia wyszukiwanie i zastępowanie fragmentów tekstu oraz znaczników w kodzie html znacznikami zdefiniowanymi przez użytkownika. Podstawianie jest uruchamiane w edytorze html, a zmiany są przekazywane do edytora wizualnego.

Polityka prywatności

HTMLCleanup używa plików cookie, aby poprawić interakcję z użytkownikiem i zbierać dane analityczne o anonimowych odwiedzających. Wszystkie transakcje użytkownika są wykonywane po stronie klienta i nie są przechowywane na naszych serwerach. Wykorzystujemy Google Analytics do zbierania anonimowych statystyk oraz Google Adsense do wyświetlania spersonalizowanych reklam.