Odstranite oznake html. Počisti besedilo iz oznak html. Kako deluje čistilec html?

Zdravo!

Ko sem pisal svoj urejevalnik WYSIWYG, sem naletel na težavo pri kopiranju besedila iz Worda. Dejansko obstajajo tri težave:

  • Word vstavi veliko neželene kode html, ki jo je treba očistiti
  • Iz nekega razloga Word za predstavitev seznamov uporablja odstavke namesto oznak UL in LI
  • Pravzaprav, kako ugotoviti, da je vstavljeno besedilo vstavljeno iz Worda.
Na splošno je bil za rešitev teh težav napisan vtičnik jquery, dokončan vir ki je na voljo na koncu članka. Primer uporabe:

$('#urejevalnik'). msword_html_filter();
Vtičnik je obešen na dogodek keyup in preveri, ali je izvorna koda v urejevalniku prilepljena iz Worda; če je tako, se zažene funkcija čiščenja. V nastalem html-ju je zabito vse mogoče - neprekinjeni prostori, lastnosti stil in poravnati, oznake razpon, Vse Mso-razredi, prazni odstavki.

Podrobnosti izvedbe pod rezom.

Večina uporabljenih običajnih programov je bila vzeta iz TinyMCE.

Kako ugotoviti, ali vrstica vsebuje kodo html, vstavljeno iz Worda:

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

Funkcija čiščenja kode (prenesena na funkcijo jquery objekt urednik):

Funkcija word_filter(editor)( var content = editor.html(); // Wordovi komentarji, kot so pogojni komentarji itd. content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|povezava|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Pretvorba v <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, function(str, presledki) ( return (spaces.length > "; if (/^\s*\w+\./.test(txt)) ( var matches = /()\./.exec(txt ); if (ujema se) ( var start = parseInt(matches, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level> " + $(to).html() + "") $(this).remove(); last_level = cur_level; )else( last_level = 0; ) )) $("", editor).removeAttr("style"); $("", editor).removeAttr( "poravnaj"); $("span", editor).replaceWith(function() (vrni $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("razred"); $("p:prazno", editor).remove(); )

Celotno izvorno besedilo vtičnika je pod spojlerjem, shranite ga v datoteko jquery.msword_html_filter.js

izvorno besedilo vtičnika

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // Wordovi komentarji, kot so pogojni komentarji itd. content = content.replace(//gi, ""); // Odstranite komentarje, skripte (npr. msoShowComment), oznako XML, vsebino VML, // oznake imenskega prostora MS Office in nekaj drugih oznak content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|povezava|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Pretvorba v za line-though content = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Zamenjaj nbsp entitete v char, ker je lažje rokovati //content = content.replace(/ /gi, "\u00a0"); vsebina = vsebina.zamenjaj(/ /gi, " "); // Pretvorba ___ v niz izmeničnih // prelomnih/neprekinljivih presledkov enake dolžine content = content.replace(/ ([\s\u00a0]*)<\/span>/gi, function(str, presledki) ( return (spaces.length > 0) ? spaces.replace(/./, " ").slice(Math.floor(spaces.length/2)).split("") .join("\u00a0") : ""; )); editor.html(vsebina); // Razčleni raven zamika seznama za sezname $("p", editor).each(function())( var str = $(this).attr("style"); var matches = /mso-list:\w+ \ w+(+)/.exec(str); if (ujema se) ( $(this).data("_listLevel", parseInt(ujema se, 10)); ) )); // Razčleni sezname 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 = ""; če (/^\s*\w+\./.test(txt)) ( var se ujema = /()\./.exec(txt); če (ujema) ( var start = parseInt ( ujema se, 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 " + $(to).html() + "") $(this).remove(); last_level = cur_level; )else( last_level = 0; ) )) $("", editor).removeAttr("style"); $("", editor).removeAttr( "poravnaj"); $("span", editor).replaceWith(function() (vrni $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("razred"); $("p:empty", editor).remove(); ) vrni this.each(function() ( $(this).on("keyup", funkcija ()( var content = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/i.test(content)) (word_filter($(this)); ) )); )); ))(jQuery)


Učinkovitost je bila preizkušena samo v najnovejšem Firefoxu.

Excel/Word to HTML je idealno orodje za urejanje izvorne kode člankov WordPress ali katerega koli drugega sistema za upravljanje vsebine, kadar njihov vgrajeni sestavljalnik ne ponuja vseh funkcij, ki jih potrebujemo. Sestavite vsebino neposredno v oknu brskalnika brez namestitve razširitve ali vtičnika za upravljanje označevanja sintakse in drugih funkcij za urejanje besedila.

Kako uporabiti?

Prilepite dokument, ki ga želite pretvoriti, v urejevalnik Word, nato pa pojdite v pregledovalnik HTML z uporabo velikih zavihkov na vrhu strani, da ustvarite kodo.

Počistite umazane oznake z velikim gumbom, ki izvaja aktivne (preverjene) možnosti na seznamu. Te funkcije lahko uporabite tudi eno za drugo z uporabo ikone CLEAN.

Težave s pretvorbo, ki jih zlahka reši naš spletni pretvornik HTML

Problem pretvorbe worda v html je verjetno vedno obstajal skupaj z Microsoft Wordom. Ogromno število slogov, dodeljenih besedilom, kot je mso-spacerun:yes, in razredov, kot je MsoNormal, kot tudi nered vseh vrst span style="font-size:10.0pt" močno zamašijo kodo. In pogosto prekinejo izvorne sloge, določene na spletnem mestu. Če še vedno lahko obravnavate preprosto besedilo z vstavljanjem besedila prek gumba »Vstavi samo besedilo« v urejevalniku, ta metoda ne bo delovala s tabelami. Naš pretvornik lahko preprosto počisti vse nepotrebne komentarje in sloge iz prihodnje datoteke html s preprostim klikom na gumbe.


Spletno čiščenje HTML-ja pred nepotrebnimi stili CSS
  • Odstranite vse nepotrebne sloge iz celotnega besedila ali izbranega fragmenta
  • Odstranimo nepotrebne kode za zamik, simbole in druge kode Unicode
  • Očistite kodo iz odvečnih presledkov in podvojenih oznak
  • Po potrebi popolnoma odstranite oznako HTML.

Pretvorite datoteke Word, Excel, TxT v čisto izvorno kodo HTML. Brez nepotrebnih slogov in komentarjev za neposredno, pravilno vstavljanje na strani spletnega mesta.

Podprti formati za spletno pretvorbo:

  • 97–2004 in novejši DOC v HTML, DOCX v HTML;
  • XLS v HTML, XLSX v HTML;
  • PPT v HTML, PPTX v HTML;
  • TXT v HTML in številne druge formate.

Druga uporabna uporaba storitve: namesto da porabite ure za ustvarjanje tabele v HTML, jo naredite v 15 minutah v Excelu ali Wordu in jo pretvorite v čisto, lepo kodo HTML za vstavljanje na spletno mesto.

Dober dan, dragi bralci! Upam, da vam gre tako dobro kot nam - sonce sije, ptički pojejo, toplo je in poletje je prišlo! Še vedno delam na diplomski nalogi, tako da zadnji mesec in pol pišem le enkrat na teden, fizično nimam časa. A da ne govorimo o žalostnih stvareh, pojdimo k poslu!

Nekoč sem brskal po spletu, da bi našel skripto, ki očisti HTML kodo smeti, ki še posebej pušča vsem nam v tem pogledu “ljubi” Microsoft Word. Prej sem uporabljal Čiščenje kode z uporabo programa Adobe Dreamweaver ampak je imel dve pomanjkljivosti:

    Včasih ne očisti vsega, kar bi želeli.

    Če je kode zelo veliko, čistilni skript vrže napako.

Druga točka je zame postala kritična, saj sem moral delati z velikimi html tabelami, iz katerih se je bilo nemogoče premakniti z enega mesta, vse informacije pa so zagotovili v Wordu.

Tako sem po dolgotrajnem tavanju po internetu našel skripto, ki se z vsem tem upravljanjem spopade z velikim udarcem, hkrati pa je popolnoma prilagodljiva.

Znebite se umazanih oznak z brezplačnim spletnim čistilnikom HTML. S tem spletnim orodjem je zelo enostavno sestaviti, urediti, oblikovati in zmanjšati spletno kodo. Pretvorite Wordove dokumente v urejen HTML in druge vizualne dokumente, kot so Excel, PDF, Google Dokumenti itd. Delo z dvema priloženima vizualnim in izvornim urejevalnikom, ki se takoj odzove na vaša dejanja, je izjemno preprosto in učinkovito.

HTML Cleaner je opremljen s številnimi uporabnimi funkcijami, ki olajšajo čiščenje in urejanje HTML. Samo prilepite kodo v besedilno območje, nastavite nastavitve čiščenja in pritisnite Čisti HTML gumb. Lahko obravnava kateri koli dokument, ustvarjen z Microsoft Excelom, PowerPointom, Google dokumenti ali katerim koli drugim skladateljem. Pomaga vam, da se enostavno znebite vseh vgrajenih slogov in nepotrebnih kod, ki jih doda Microsoft Word ali drugi urejevalnik WYSIWYG. To orodje za urejanje HTML je uporabno, ko preselite vsebino z enega spletnega mesta na drugo in želite počistiti vse tuje razrede in ID-je, ki jih uporablja izvorno spletno mesto. Za ukaze po meri uporabite orodje za iskanje in zamenjavo. Generator blebetanja vam omogoča enostavno dodajanje navideznega besedila v urejevalnik.

Na vrhu strani lahko drug poleg drugega vidite vizualni urejevalnik in urejevalnik izvorne kode. Ne glede na to, kaj spremenite, se bodo spremembe odražale na drugem v realnem času. Vizualni urejevalnik HTML omogoča začetnikom enostavno sestavljanje svoje vsebine tako kot pri uporabi katerega koli drugega urejevalnika besedil, medtem ko na desni urejevalnik vira z označeno oznako kode naprednim uporabnikom pomaga pri prilagajanju kode. Zaradi tega je ta spletni program lepo orodje za učenje kodiranja HTML.

Pretvorite Wordove dokumente v čisti HTML

Če želite objaviti spletne datoteke PDF, Microsoft Word, Excel, PowerPoint ali katere koli druge dokumente, sestavljene z različnimi urejevalniki besedil, ali samo kopirati vsebino, kopirano z drugega spletnega mesta, prilepite oblikovano vsebino v vizualni urejevalnik. Vir HTML dokumenta bo takoj viden tudi v urejevalniku vira. Nadzorna vrstica nad urejevalnikom WYSIWYG nadzoruje to polje, medtem ko so vse druge nastavitve čiščenja vira namenjene urejanju izvorne kode. Kliknite na Čisti HTML po nastavitvi nastavitev čiščenja. Kopirajte očiščeno kodo in jo objavite na svojem spletnem mestu.

Nobenega zagotovila ni, da program popravi vse napake v vaši kodi točno tako, kot želite, zato poskusite vnesti sintaktično veljaven HTML.

Pretvorite tabele HTML v strukturirane elemente div z aktiviranjem ustreznega potrditvenega polja.

Čiščenje kode HTML iz oznak Microsoft Word (2000-2007)?

V preteklosti so spletni oblikovalci svoja spletna mesta gradili s tabelami za organizacijo postavitve strani, vendar so v dobi odzivnega spletnega oblikovanja tabele zastarele in njihovo mesto prevzemajo DIV-ji. To spletno orodje vam pomaga spremeniti tabele v strukturirane elemente div z nekaj preprostimi kliki.

Svojo izvorno kodo lahko naredite bolj berljivo tako, da organizirate hierarhijo zavihkov v drevesnem pogledu.

Postani član

To spletno mesto je popolnoma funkcionalno orodje za čiščenje in sestavljanje kode HTML, vendar imate možnost kupiti članstvo v HTML G in dostopati do še več profesionalnih funkcij. Z uporabo brezplačne različice HTML Cleanerja soglašate z vključitvijo povezav v urejene dokumente. To orodje za čiščenje lahko doda promocijsko povezavo tretje osebe na konec očiščenih dokumentov in to kodo morate pustiti nespremenjeno, dokler uporabljate brezplačno različico.

Cleaner je storitev za čiščenje oznak iz "smeti", ki ostanejo v dokumentu po shranjevanju strani v obliki iz programa.

Pred časom sem napisal podoben vtičnik, vendar je bil narejen na hitro, zdaj je mehanizem popolnoma prepisan.

Čiščenje kode se izvede z iskanjem po vneseni vrstici, iz katere se oblikuje nova, ki vsebuje "clean" . Vtičnik odstrani absolutno vse iz oznak, vključno z . V neparnih oznakah je vstavljen simbol / (poševnica). Prazne oznake se odstranijo, na primer konstrukt bo izbrisan, ker ne vsebuje ničesar.

Kako deluje čistilec html?

Obstajata dva načina:

  1. V MS Word izberite podatke, ki jih želite počistiti, za izbiro vseh pritisnite Ctrl + A. Kopirano besedilo prilepite v spodnje polje (izbran mora biti zavihek »Prilepi podatke MS Office«), kliknite gumb »Dokončaj«.
  2. Pred optimizacijo kode v Wordu izberite »Shrani kot...«, nato izberite vrsto datoteke »Spletna stran s filtrom«, nato odprite shranjeno datoteko v urejevalniku besedil, kopirajte kodo in jo prilepite v spodnje polje ( Izbran mora biti zavihek »Vstavi HTML«), kliknite gumb »Končano«.

Kot rezultat boste prejeli neokrnjeno kodo html.
Naslednji atributi ostanejo nedotaknjeni:

"colspan", "rowspan", "href", "src", "type", "value", "lang", "tabindex", "title", "code", "alt", "target", "dir ", "razpon", "dejanje", "metoda"