Odstráňte html značky. Vymazať text z html značiek. Ako funguje čistič html?

Ahoj!

Pri písaní vlastného WYSIWYG editora som narazil na problém s kopírovaním textu z Wordu. V skutočnosti existujú tri problémy:

  • Word vkladá veľa nevyžiadanej pošty html kód ktoré je potrebné vyčistiť
  • Z nejakého dôvodu používa Word na prezentáciu zoznamov odseky namiesto značiek UL a LI
  • V skutočnosti, ako zistiť, že vložený text je vložený z programu Word.
Vo všeobecnosti bol na vyriešenie týchto problémov napísaný doplnok jquery zdroj ktorý je dostupný na konci článku. Príklad použitia:

$('#editor'). msword_html_filter();
Doplnok je zavesený na udalosti klávesnica a skontroluje, či je zdrojový kód v editore vložený z Wordu, ak áno, spustí sa funkcia čistenia. Vo výslednom html je pribité všetko možné - neprerušiteľné priestory, atribúty štýl A zarovnať, značky rozpätie, Všetky Mso-triedy, prázdne odseky.

Detaily realizácie pod strihom.

Väčšina použitých štamgastov bola prevzatá z TinyMCE.

Ako zistiť, či riadok obsahuje html kód vložený z Wordu:

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

Funkcia čistenia kódu (prenesená do funkcie objekt jquery editor):

Funkcia word_filter(editor)( var content = editor.html(); // Komentáre programu Word, ako sú podmienené komentáre atď. content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|odkaz|štýl|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertovať do <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, funkcia(str, medzery) ( return (medzery.dĺžka > "; if (/^\s*\w+\./.test(txt)) (var sa zhoduje = /()\./.exec(txt) ); if (zhody) ( var start = parseInt(zhody, 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( "zarovnať" $("rozpätie", editor).replaceWith(funkcia() (návrat $(toto).obsah();)); , editor).removeAttr("trieda" $("p:empty", editor).remove();

Celý zdrojový text pluginu je pod spojlerom, uložte ho do súboru jquery.msword_html_filter.js

zdrojový text doplnku

(function($) ( $.fn.msword_html_filter = function(options) (var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // komentáre programu Word ako podmienené komentáre atď. obsah = content.replace(//gi, ""); // Odstráňte komentáre, skripty (napr. msoShowComment), značku XML, obsah VML, // značky s priestorom názvov MS Office a niekoľko ďalších značiek content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|odkaz|štýl|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertovať do pre riadkový obsah = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Nahraďte entity nbsp znakom, pretože sa s ním ľahšie manipuluje //obsah = content.replace(/ /gi, "\u00a0"); content = content.replace(/ /gi, " "); // Konvertovať ___ na reťazec striedajúcich sa // deliacich/nedeliteľných medzier s rovnakou dĺžkou content = content.replace(/ ([\s\u00a0]*)<\/span>/gi, function(str, spaces) ( return (spaces.length > 0) ? spaces.replace(/./, " ").slice(Math.floor(spaces.length/2)).split("") .join("\u00a0") : "" )); editor.html(obsah); // Analýza úrovne odsadenia zoznamu pre zoznamy $("p", editor).each(function())( var str = $(this).attr("style"); var zhody = /mso-list:\w+ \ w+(+)/.exec(str, if (zhoda) ( $(this).data("_listLevel", parseInt(zhody, 10)); ) )); // Analýza zoznamov 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 sa zhoduje = /()\./.exec(txt); if (zhoduje sa) ( var start = parseInt ( zhoda, 10 značka_zoznamu = začiatok>1 ? "" : ""; cur_level " + $(this).html() + "") $(this).remove(); last_level = cur_level; )else( last_level = 0; ) )) $("", editor).removeAttr("style"); $("", editor).removeAttr( "zarovnať" $("rozpätie", editor).replaceWith(funkcia() (návrat $(toto).obsah();)); , editor).removeAttr("trieda" $("p:empty", editor).remove() return this.each(function() ( $(this).on("keyup", function ()(); var content = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/ i.test(obsah)) (filter_slova($(toto)); ) ));


Výkon bol testovaný iba v najnovšom Firefoxe.

Excel/Word to HTML je ideálny nástroj na úpravu zdrojového kódu WordPress článkov alebo akéhokoľvek iného redakčného systému, keď ich vstavaný skladateľ neposkytuje všetky funkcie, ktoré potrebujeme. Vytvárajte obsah priamo v okne prehliadača bez inštalácie rozšírenia alebo doplnku, aby ste zvládli zvýrazňovanie syntaxe a ďalšie funkcie na úpravu textu.

Ako použiť?

Vložte dokument, ktorý chcete konvertovať, do editora Word, potom prejdite do prehliadača HTML pomocou veľkých kariet v hornej časti stránky na vygenerovanie kódu.

Vyčistite špinavé značky pomocou veľkého tlačidla, ktoré vykoná aktívne (začiarknuté) možnosti v zozname. Tieto funkcie môžete použiť aj jednu po druhej pomocou ikony CLEAN.

Problémy s konverziou, ktoré ľahko vyrieši náš online prevodník HTML

Problém prevodu slova do html pravdepodobne vždy existoval spolu s programom Microsoft Word. Obrovské množstvo štýlov priradených k textom, ako napríklad mso-spacerun:yes, a tried, ako napríklad MsoNormal, ako aj spleť najrôznejších span style="font-size:10.0pt" značne zahlcuje kód. A často prerušujú natívne štýly špecifikované na stránke. Ak stále dokážete spracovať jednoduchý text vložením textu cez tlačidlo editora „Vložiť iba text“, potom táto metóda nebude fungovať s tabuľkami. Náš konvertor je schopný jednoducho vyčistiť všetky nepotrebné komentáre a štýly z budúceho html súboru jednoduchým kliknutím na tlačidlá.


Online čistenie HTML od nepotrebných CSS štýlov
  • Odstráňte všetky nepotrebné štýly z celého textu alebo vybratého fragmentu
  • Odstraňujeme nepotrebné odsadzovacie kódy, symboly a iné kódy Unicode
  • Vyčistite kód od nadbytočných medzier a duplicitných značiek
  • V prípade potreby úplne odstráňte označenie HTML.

Preveďte súbory Word, Excel, TxT do čistého zdrojového kódu HTML. Bez zbytočných štýlov a komentárov pre priame, správne vkladanie do stránok webu.

Podporované formáty pre online konverziu:

  • 97–2004 a novšie DOC do HTML, DOCX do HTML;
  • XLS do HTML, XLSX do HTML;
  • PPT do HTML, PPTX do HTML;
  • TXT do HTML a mnoho ďalších formátov.

Ďalšie užitočné využitie služby, namiesto toho, aby ste strávili hodiny tvorbou tabuľky v HTML, vytvorte ju za 15 minút v Exceli alebo Worde a preveďte ju na čistý, krásny HTML kód na vloženie na stránku.

Dobrý deň, milí čitatelia! Dúfam, že sa máte rovnako dobre ako my - slnko svieti, vtáky spievajú, je teplo a prišlo leto! Stále pracujem na diplomovej práci, takže posledný mesiac a pol píšem len raz týždenne, fyzicky nemám čas. Ale nehovorme o smutných veciach, poďme na vec!

Kedysi dávno som na internete hľadal skript, ktorý vyčistí HTML kód od odpadu, ktorý nás všetkých v tomto ohľade zanechá „milovaných“ Microsoft Word. Predtým som používal Čistenie kódu pomocou programu Adobe Dreamweaver ale mal dve nevýhody:

    Niekedy nevyčistí všetko, čo by sme chceli.

    Ak je k dispozícii veľmi veľké množstvo kódu, čistiaci skript vyvolá chybu.

Druhý bod sa pre mňa stal kritickým, keďže som musel pracovať s veľkými html tabuľkami, z ktorých sa nedalo odísť z jednej stránky a všetky informácie poskytovali vo Worde.

Po dlhom blúdení po internete som teda našiel skript, ktorý si so všetkým týmto riadením poradí s hrou a zároveň je úplne prispôsobiteľný.

Zbavte sa špinavých značiek pomocou bezplatného online čističa HTML. Pomocou tohto online nástroja je veľmi jednoduché skladať, upravovať, formátovať a minimalizovať webový kód. Preveďte dokumenty programu Word na prehľadný HTML a akékoľvek iné vizuálne dokumenty, ako sú Excel, PDF, Dokumenty Google atď. Je mimoriadne jednoduché a efektívne pracovať s dvoma pripojenými vizuálnymi a zdrojovými editormi, ktoré okamžite reagujú na vaše akcie.

HTML Cleaner je vybavený mnohými užitočnými funkciami na čo najjednoduchšie čistenie a úpravy HTML. Stačí vložiť kód do textovej oblasti, nastaviť predvoľby čistenia a stlačiť Čisté HTML tlačidlo. Dokáže spracovať akýkoľvek dokument vytvorený pomocou programov Microsoft Excel, PowerPoint, Dokumenty Google alebo akéhokoľvek iného skladateľa. Pomôže vám ľahko zbaviť sa všetkých vložených štýlov a nepotrebných kódov, ktoré pridáva Microsoft Word alebo iné WYSIWYG editory. Tento nástroj HTML editor je užitočný, keď migrujete obsah z jednej webovej stránky na druhú a chcete vyčistiť všetky mimozemské triedy a ID, ktoré používa zdrojová stránka. Pre svoje vlastné príkazy použite nástroj nájsť a nahradiť. Generátor nezmyselného textu vám umožňuje jednoducho pridať fiktívny text do editora.

V hornej časti stránky môžete vidieť vedľa seba vizuálny editor a editor zdrojového kódu. Akékoľvek zmeny sa prejavia na ostatných v reálnom čase. Vizuálny editor HTML umožňuje začiatočníkom jednoducho zostavovať svoj obsah rovnako ako pri použití akéhokoľvek iného programu textového procesora, zatiaľ čo editor zdrojového kódu so zvýrazneným označením kódu napravo pomáha pokročilým používateľom upraviť kód. Vďaka tomu je tento online program pekným nástrojom na učenie sa kódovania HTML.

Prevod dokumentov programu Word na čisté HTML

Ak chcete publikovať online súbory PDF, Microsoft Word, Excel, PowerPoint alebo akékoľvek iné dokumenty vytvorené pomocou rôznych programov na úpravu slov alebo len skopírovať obsah skopírovaný z inej webovej lokality, prilepte naformátovaný obsah do vizuálneho editora. Zdrojový kód HTML dokumentu bude okamžite viditeľný aj v editore zdrojového kódu. Ovládací panel nad editorom WYSIWYG ovláda toto pole, zatiaľ čo všetky ostatné nastavenia čistenia zdroja slúžia na úpravu zdrojového kódu. Kliknite na Čisté HTML po nastavení predvolieb čistenia. Skopírujte vyčistený kód a zverejnite ho na svojej webovej stránke.

Neexistuje žiadna záruka, že program opraví všetky chyby vo vašom kóde presne tak, ako chcete, takže skúste zadať syntakticky platný kód HTML.

Preveďte HTML tabuľky na štruktúrované prvky div aktivovaním príslušného začiarkavacieho políčka.

Čistenie HTML kódu zo značiek Microsoft Word (2000-2007)?

V minulosti weboví dizajnéri vytvárali svoje webové stránky pomocou tabuliek na usporiadanie rozloženia stránky, ale v ére responzívneho webového dizajnu sú tabuľky zastarané a nahrádzajú ich DIV. Tento online nástroj vám pomôže zmeniť tabuľky na štruktúrované prvky div pomocou niekoľkých jednoduchých kliknutí.

Usporiadaním hierarchie kariet v stromovom prehľade môžete zlepšiť čitateľnosť zdrojového kódu.

Stať sa členom

Táto webová stránka je plne funkčný nástroj na čistenie a tvorbu HTML kódu, ale máte možnosť zakúpiť si členstvo HTML G a získať prístup k ešte profesionálnejším funkciám. Používaním bezplatnej verzie HTML Cleaner súhlasíte so zahrnutím odkazov do upravených dokumentov. Tento nástroj na čistenie môže pridať propagačný odkaz tretej strany na koniec vyčistených dokumentov a tento kód musíte ponechať nezmenený, pokiaľ používate bezplatnú verziu.

Cleaner je služba na vyčistenie značiek od „odpadu“, ktorý zostane v dokumente po uložení stránky vo formáte z programu.

Už dávno som napísal podobný plugin, ale bol vyrobený narýchlo, teraz je mechanizmus úplne prepísaný.

Čistenie kódu prebieha prehľadávaním zadaného riadku, z ktorého sa vytvorí nový, obsahujúci „čistý“ . Doplnok odstráni zo značiek úplne všetko, vrátane . V nepárových značkách sa vkladá symbol / (lomka). Prázdne značky sú odstránené, napríklad konštrukcia bude vymazaná, pretože nič neobsahuje.

Ako funguje čistič html?

Existujú dva spôsoby:

  1. V MS Word vyberte údaje, ktoré chcete vymazať, ak chcete vybrať všetky, stlačte Ctrl + A. Skopírovaný text vložte do poľa nižšie (musí byť vybratá záložka „Prilepiť údaje MS Office“), kliknite na tlačidlo „Dokončiť“.
  2. Pred optimalizáciou kódu vyberte vo Worde „Uložiť ako...“, potom vyberte typ súboru „Webová stránka s filtrom“, potom otvorte uložený súbor v textovom editore, skopírujte kód a vložte ho do poľa nižšie ( Musí byť vybratá karta „Vložiť HTML“, kliknite na tlačidlo „Hotovo“.

V dôsledku toho dostanete pôvodný html kód.
Nasledujúce atribúty zostávajú nedotknuté:

"colspan", "rowspan", "href", "src", "type", "value", "lang", "tabindex", "title", "code", "alt", "target", "dir" ", "span", "akcia", "metóda"