Ta bort html-taggar. Rensa text från html-taggar. Hur fungerar html cleaner?

Hallå!

När jag skrev min egen WYSIWYG-redigerare stötte jag på ett problem när jag kopierade text från Word. Det finns faktiskt tre problem:

Word infogar en massa skräp-html-kod som behöver rengöras
Av någon anledning använder Word stycken istället för UL- och LI-taggar för att presentera listor
Egentligen, hur man avgör att den infogade texten infogas från Word.

I allmänhet, för att lösa dessa problem, skrevs en jquery-plugin, komplett källa som finns i slutet av artikeln. Användningsexempel:

$('#editor'). msword_html_filter();
Plugin-programmet hänger på en händelse knappsats och kontrollerar om källkoden inuti editorn är inklistrad från Word; i så fall startas rensningsfunktionen. I den resulterande HTML-koden är allt möjligt spikat in - icke-brytande utrymmen, attribut stil Och justera, taggar spänna, Allt Mso-klasser, tomma stycken.

Genomförande detaljer under snittet.

De flesta av de stammisar som användes togs från TinyMCE.

Hur man avgör om en rad innehåller HTML-kod infogat från Word:

If (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w:WordDocument/i.test(content)) ( ... )

Kodrengöringsfunktion (övergår till funktionen jquery objekt redaktör):

Funktion word_filter(editor)( var content = editor.html(); // Word-kommentarer som villkorliga kommentarer etc content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|länk|stil|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertera in i <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, function(str, blanksteg) (retur (mellanslag.längd > "; if (/^\s*\w+\./.test(txt)) ( var matchar = /()\./.exec(txt) ); if (matchar) ( var start = parseInt(matches, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level> " + $(this).html() + "") $(this).remove(); last_level = cur_level; )else( last_level = 0; ) )) $("", editor).removeAttr("style"); $("", editor).removeAttr( "align"); $("span", editor).replaceWith(function() (retur $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("klass"); $("p:empty", editor).remove(); )

Den fullständiga källtexten för pluginet finns under spoilern, spara till en fil jquery.msword_html_filter.js

~~plugin källtext~~

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // Word-kommentarer som villkorliga kommentarer etc content = content.replace(//gi, ""); // Ta bort kommentarer, skript (t.ex. msoShowComment), XML-tagg, VML-innehåll, // MS Office-namnavståndstaggar och några andra taggar content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|länk|stil|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertera in i för line-though content = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Ersätt nbsp entites till char eftersom det är lättare att hantera //content = content.replace(/ /gi, "\u00a0"); content = content.replace(/ /gi, " "); // Konvertera ___ till en sträng med alternerande // brytande/icke-brytande mellanslag av samma längd innehåll = content.replace(/ ([\s\u00a0]*)<\/span>/gi, function(str, blanksteg) ( return (mellanslag.längd > 0) ? mellanslag.ersätt(/./, " ").slice(Math.floor(spaces.length/2)).split("") .join("\u00a0") : ""; )); editor.html(innehåll); // Analysera listindragsnivå för listor $("p", editor).each(function())( var str = $(this).attr("style"); var matches = /mso-list:\w+ \ w+(+)/.exec(str); if (matchar) ( $(this).data("_listLevel", parseInt(matches, 10)); ) )); // Parse Lists var last_level=0; var pnt = null; $("p", editor).each(function())( var cur_level = $(this).data("_listLevel"); if(cur_level != undefined)( var txt = $(this).text() ; var list_tag = ""; if (/^\s*\w+\./.test(txt)) ( var matches = /()\./.exec(txt); if (matchar) ( var start = parseInt ( matchar, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level>last_level)( if(last_level==0)( $(this).before( list_tag ); pnt = $(this).prev(); )else( pnt = $(list_tag).appendTo(pnt); ) ) if(cur_level " + $(this).html() + "") $(this).remove(); last_level = cur_level; )else( last_level = 0; ) )) $("", editor).removeAttr("style"); $("", editor).removeAttr( "align"); $("span", editor).replaceWith(function() (retur $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("klass"); $("p:tom", editor).remove(); ) returnera this.each(function() ( $(this).on("keyup", funktion ()( var content = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/i.test(content)) ( word_filter($(detta)); ) )); )); ); ))(jQuery)

Prestanda testades endast i den senaste Firefox.
Excel/Word till HTML är ett idealiskt verktyg för att redigera källkoden för WordPress-artiklar eller något annat innehållshanteringssystem när deras inbyggda kompositör inte tillhandahåller alla funktioner vi behöver. Komponera innehåll direkt i ditt webbläsarfönster utan att installera ett tillägg eller plugin för att hantera syntaxmarkering och andra textredigeringsfunktioner.

Hur man använder?

Klistra in dokumentet du vill konvertera i Word-redigeraren och gå sedan till HTML-visningen med de stora flikarna överst på sidan för att generera koden.

Rensa upp smutsiga markeringar med en stor knapp som kör aktiva (markerade) alternativ i en lista. Du kan också använda dessa funktioner en efter en med ikonen CLEAN.

Konverteringsproblem som enkelt löses med vår online HTML-konverterare

Problemet med att konvertera word till html har förmodligen alltid funnits tillsammans med Microsoft Word. Ett stort antal stilar som tilldelats texter, såsom mso-spacerun:yes, och klasser, såsom MsoNormal, samt en mängd olika typer av span style="font-size:10.0pt" stör koden kraftigt. Och de avbryter ofta de ursprungliga stilarna som anges på webbplatsen. Om du fortfarande kan hantera enkel text genom att infoga text via redaktörens "Infoga endast text"-knapp, så kommer den här metoden inte att fungera med tabeller. Vår omvandlare kan enkelt rensa bort alla onödiga kommentarer och stilar från den framtida html-filen genom att helt enkelt klicka på knapparna.

Online rengöring av HTML från onödiga CSS-stilar
Ta bort alla onödiga stilar från all text eller ett markerat fragment

Vi tar bort onödiga indragskoder, symboler och andra Unicode-koder

Rensa koden från extra mellanslag och dubbletter av taggar

Om det behövs, ta bort HTML-uppmärkningen helt.

Konvertera Word, Excel, TxT-filer till ren HTML-källkod. Utan onödiga stilar och kommentarer för direkt, korrekt infogning på webbplatssidor.

Format som stöds för onlinekonvertering:

97–2004 och nyare DOC till HTML, DOCX till HTML;

XLS till HTML, XLSX till HTML;

PPT till HTML, PPTX till HTML;

TXT till HTML och många andra format.

En annan användbar användning av tjänsten, istället för att spendera timmar på att göra en tabell i HTML, gör den på 15 minuter i Excel eller Word och konvertera den till ren, vacker HTML-kod för att infogas på webbplatsen.

God dag kära läsare! Jag hoppas att ni har det lika bra som vi gör - solen skiner, fåglarna sjunger, det är varmt och sommaren har kommit! Jag håller fortfarande på med min avhandling, så den senaste och en halv månaden har jag bara skrivit en gång i veckan, jag har fysiskt inte tid. Men låt oss inte prata om sorgliga saker, låt oss börja!

En gång i tiden grävde jag på Internet för att hitta ett skript som rensar HTML-koden från skräp, vilket i synnerhet lämnar oss alla "älskade" i detta avseende, Microsoft Word. Tidigare använde jag Kodrensning med Adobe Dreamweaver men det hade han två nackdelar:

Ibland städar det inte allt som vi skulle vilja ha.
Om det finns en mycket stor mängd kod ger rensningsskriptet ett fel.

Den andra punkten blev kritisk för mig, eftersom jag var tvungen att arbeta med stora html-tabeller, från vilka det var omöjligt att flytta från en sida, och de gav all information i Word.

Så, efter att ha vandrat runt på Internet under en lång tid, hittade jag ett manus som klarar all denna hantering med råge, och samtidigt är helt anpassningsbar.

Bli av med din smutsiga uppmärkning med den kostnadsfria HTML Cleaner online. Det är väldigt enkelt att komponera, redigera, formatera och förminska webbkoden med detta onlineverktyg. Konvertera Word-dokument till snygg HTML och andra visuella dokument som Excel, PDF, Google Docs etc. Det är extremt enkelt och effektivt att arbeta med de två bifogade visuella och källredigerare som reagerar direkt på dina handlingar.

HTML Cleaner är utrustad med många användbara funktioner för att göra HTML-rensning och redigering så enkelt som möjligt. Klistra bara in din kod i textområdet, ställ in rengöringsinställningarna och tryck på Ren HTML knapp. Den kan hantera alla dokument som skapats med Microsoft Excel, PowerPoint, Google docs eller någon annan kompositör. Det hjälper dig att enkelt bli av med alla inline-stilar och onödiga koder som läggs till av Microsoft Word eller andra WYSIWYG-redigerare. Det här HTML-redigeringsverktyget är användbart när du migrerar innehållet från en webbplats till den andra och du vill rensa upp alla främmande klasser och ID:n som källsidan tillämpar. Använd verktyget Sök och ersätt för dina anpassade kommandon. Generatorn för skratttext låter dig enkelt lägga till dummytext i redigeraren.

Överst på sidan kan du se den visuella redigeraren och källkodsredigeraren bredvid varandra. Oavsett vilken du ändrar kommer ändringarna att reflekteras på den andra i realtid. Den visuella HTML-editorn låter nybörjare enkelt komponera sitt innehåll precis som när de använder vilket ordbehandlare som helst, medan källredigeraren med markerad koduppmärkning till höger hjälper de avancerade användarna att justera koden. Detta gör detta onlineprogram till ett bra verktyg för att lära sig HTML-kodning.

Konvertera Word-dokument till ren HTML

För att publicera online PDF-filer, Microsoft Word, Excel, PowerPoint eller andra dokument som består av olika ordredigeringsprogram eller bara för att kopiera innehållet som kopierats från en annan webbplats, klistra in det formaterade innehållet i den visuella redigeraren. HTML-källan för dokumentet kommer också att synas omedelbart i källredigeraren. Kontrollfältet ovanför WYSIWYG-redigeraren styr detta fält medan alla andra källrensningsinställningar är till för att redigera källkoden. Klicka på Ren HTML knappen efter att ha ställt in rengöringsinställningarna. Kopiera den rensade koden och publicera den på din webbplats.

Det finns ingen garanti för att programmet korrigerar alla fel i din kod precis som du vill, så försök att ange en syntaktisk giltig HTML.

Konvertera HTML-tabellerna till strukturerade div-element genom att aktivera motsvarande kryssruta.

Rensa HTML-kod från Microsoft Word-taggar (2000-2007)?

Tidigare brukade webbdesigners bygga sina webbplatser med hjälp av tabeller för att organisera sidlayout, men i en tid med responsiv webbdesign är tabeller föråldrade och DIV:s tar deras plats. Detta onlineverktyg hjälper dig att förvandla dina tabeller till strukturerade div-element med några enkla klick.

Du kan göra din källkod mer läsbar genom att organisera flikhierarkin i en trädvy.

Bli medlem

Denna webbplats är ett fullt fungerande verktyg för att rensa och komponera HTML-kod men du har möjlighet att köpa ett HTML G-medlemskap och få tillgång till ännu mer professionella funktioner. Genom att använda gratisversionen av HTML Cleaner samtycker du till att inkludera länkar i de redigerade dokumenten. Detta rensningsverktyg kan lägga till en kampanjlänk från tredje part i slutet av de rensade dokumenten och du måste lämna denna kod oförändrad så länge du använder den kostnadsfria versionen.

Cleaner är en tjänst för att rensa taggar från "skräp" som finns kvar i dokumentet efter att sidan sparats i formatet från programmet.
För länge sedan skrev jag ett liknande plugin, men det gjordes i all hast, nu har mekanismen skrivits om helt.
Kodrensning sker genom att söka igenom den inmatade raden från vilken en ny bildas, innehållande en "ren". Insticksprogrammet tar bort absolut allt från taggar, inklusive . I oparade taggar infogas symbolen / (snedstreck). Tomma taggar tas bort, till exempel kommer konstruktionen att tas bort eftersom den inte innehåller något.
Hur fungerar html cleaner?
Det finns två sätt:
I MS Word, välj de data du vill rensa, för att markera alla, tryck på Ctrl + A. Klistra in den kopierade texten i fältet nedan (fliken "Klistra in MS Office Data" måste vara markerad), klicka på knappen "Slutför".
Innan du optimerar koden, välj "Spara som..." i Word, välj sedan filtypen "Webbsida med filter", öppna sedan den sparade filen i en textredigerare, kopiera koden och klistra in den i fältet nedan (den Fliken "Infoga HTML" måste vara markerad "), klicka på knappen "Klar".

Som ett resultat kommer du att få orörd html-kod.
Följande attribut förblir orörda:
"colspan", "rowspan", "href", "src", "typ", "value", "lang", "tabindex", "title", "code", "alt", "target", "dir ", "span", "action", "metod"