Noņemiet html tagus. Notīrīt tekstu no html tagiem. Kā darbojas html tīrītājs?

Sveiki!

Rakstot savu WYSIWYG redaktoru, es saskāros ar problēmu, kopējot tekstu no Word. Patiesībā ir trīs problēmas:

  • Word ievieto daudz nevēlama html koda, kas ir jāiztīra
  • Kādu iemeslu dēļ, lai parādītu sarakstus, Word izmanto rindkopas, nevis UL un LI tagus
  • Faktiski, kā noteikt, vai ievietotais teksts ir ievietots no Word.
Kopumā, lai atrisinātu šīs problēmas, tika uzrakstīts jquery spraudnis, pilnīgs avots kas ir pieejams raksta beigās. Lietošanas piemērs:

$('#editor'). msword_html_filter();
Spraudnis ir pakārts notikumam taustiņu pieslēgšana un pārbauda, ​​vai avota kods redaktorā ir ielīmēts no Word; ja tā, tad tiek palaista tīrīšanas funkcija. Iegūtajā html ir iekļauts viss iespējamais - neplīstošās atstarpes, atribūti stils Un izlīdzināt, tagi span, Viss Mso-klases, tukšas rindkopas.

Īstenošanas detaļas zem griezuma.

Lielākā daļa izmantoto regulāro lietotāju tika ņemti no TinyMCE.

Kā noteikt, vai rindā ir html kods, kas ievietots no Word:

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

Koda tīrīšanas funkcija (nodota funkcijai jquery objekts redaktors):

Funkcija word_filter(editor)( var saturs = editor.html(); // Word komentāri, piemēram, nosacījuma komentāri utt content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertēt iekšā <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, funkcija(str, atstarpes) ( return (spaces.length > "; if (/^\s*\w+\./.test(txt)) ( var atbilst = /()\./.exec(txt ); if (atbilst) ( var start = parseInt(matches, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level> " + $(this).html() + "") $(this).remove(); pēdējais_līmenis = cur_level; )else( pēdējais_līmenis = 0; ) )) $("", redaktors).removeAttr("stils"); $("", redaktors).removeAttr( "līdzināt"); $("span", redaktors).replaceWith(function() (atgriezt $(this).contents();)); $("span:empty", redaktors).remove(); $( "", redaktors).removeAttr("klase"); $("p:empty", redaktors).remove(); )

Pilns spraudņa avota teksts ir zem spoilera, saglabājiet to failā jquery.msword_html_filter.js

spraudņa avota teksts

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), opcijas); function word_filter(editor)( var content = editor.html(); // Vārdu komentāri, piemēram, nosacīti komentāri utt saturs = content.replace(//gi, ""); // Noņemiet komentārus, skriptus (piem., msoShowComment), XML tagus, VML saturu, // MS Office nosaukumtelpas tagus un dažus citus tagus content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konvertēt iekšā rindas saturam = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Aizstāt nbsp entites ar char, jo to ir vieglāk apstrādāt //content = content.replace(/ /gi, "\u00a0"); saturs = saturs.replace(/ /gi, " "); // Konvertēt ___ uz virkni mainīgām // vienāda garuma atstarpēm saturs = content.replace(/ ([\s\u00a0]*)<\/span>/gi, funkcija(str, atstarpes) ( return (spaces.length > 0) ? spaces.replace(/./, " ").slice(Math.floor(spaces.length/2)).split("") .join("\u00a0") : ""; )); redaktors.html(saturs); // Parsēt sarakstu atkāpes līmeni sarakstiem $("p", redaktors).each(function())( var str = $(this).attr("style"); var atbilst = /mso-list:\w+ \ w+(+)/.exec(str); if (atbilst) ( $(this).data("_listLevel", parseInt(atbilst, 10)); ) )); // Parsēt sarakstus var last_level=0; var pnt = null; $("p", redaktors).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 atbilst = /()\./.exec(txt); if (atbilst) ( var start = parseInt ( atbilst, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level>pēdējais_līmenis)( if(pēdējais_līmenis==0)( $(this).before( list_tag ); pnt = $(this).prev(); )else( pnt = $(list_tag).appendTo(pnt; ) ) if(cur_level " + $(this).html() + "") $(this).remove(); pēdējais_līmenis = cur_level; )else( pēdējais_līmenis = 0; ) )) $("", redaktors).removeAttr("stils"); $("", redaktors).removeAttr( "līdzināt"); $("span", redaktors).replaceWith(function() (atgriezt $(this).contents();)); $("span:empty", redaktors).remove(); $( "", redaktors).removeAttr("klase"); $("p:empty", redaktors).remove(); ) atgriež this.each(function() ( $(this).on("taustiņš", funkcija ()( var saturs = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/i.test(saturs)) (word_filter($(tas)); ) )); )); ); ))(jQuery)


Veiktspēja tika pārbaudīta tikai jaunākajā Firefox.

Excel/Word to HTML ir ideāls rīks WordPress rakstu avota koda rediģēšanai vai jebkurai citai satura pārvaldības sistēmai, kad to iebūvētais komponists nenodrošina visas mums nepieciešamās funkcijas. Veidojiet saturu tieši pārlūkprogrammas logā, neinstalējot paplašinājumu vai spraudni, lai apstrādātu sintakses izcelšanu un citas teksta rediģēšanas funkcijas.

Kā izmantot?

Ielīmējiet dokumentu, kuru vēlaties konvertēt Word redaktorā, pēc tam dodieties uz HTML skatītāju, izmantojot lielās cilnes lapas augšdaļā, lai ģenerētu kodu.

Notīriet netīros marķējumus, izmantojot lielu pogu, kas sarakstā izpilda aktīvās (atzīmētās) opcijas. Varat arī lietot šīs funkcijas pa vienam, izmantojot ikonu CLEAN.

Konversijas problēmas, kuras var viegli atrisināt, izmantojot mūsu tiešsaistes HTML pārveidotāju

Problēma par Word konvertēšanu uz html, iespējams, vienmēr ir pastāvējusi kopā ar Microsoft Word. Milzīgs tekstiem piešķirto stilu skaits, piemēram, mso-spacerun:yes, un klases, piemēram, MsoNormal, kā arī visa veida span style="font-size:10.0pt" ļoti pārblīvē kodu. Un tie bieži pārtrauc vietnē norādītos vietējos stilus. Ja joprojām varat apstrādāt vienkāršu tekstu, ievietojot tekstu, izmantojot redaktora pogu "Ievietot tikai tekstu", šī metode nedarbosies ar tabulām. Mūsu pārveidotājs var viegli notīrīt visus nevajadzīgos komentārus un stilus no topošā html faila, vienkārši noklikšķinot uz pogām.


Tiešsaistes HTML tīrīšana no nevajadzīgiem CSS stiliem
  • Noņemiet visus nevajadzīgos stilus no visa teksta vai atlasītā fragmenta
  • Mēs noņemam nevajadzīgos atkāpju kodus, simbolus un citus Unikoda kodus
  • Notīriet kodu no papildu atstarpēm un dublētiem tagiem
  • Ja nepieciešams, pilnībā noņemiet HTML marķējumu.

Konvertējiet Word, Excel, TxT failus tīrā HTML avota kodā. Bez liekiem stiliem un komentāriem tiešai, pareizai ievietošanai vietnes lapās.

Atbalstītie tiešsaistes konvertēšanas formāti:

  • 97–2004 un jaunāki DOC uz HTML, DOCX uz HTML;
  • XLS uz HTML, XLSX uz HTML;
  • PPT uz HTML, PPTX uz HTML;
  • TXT uz HTML un daudziem citiem formātiem.

Vēl viena noderīga pakalpojuma izmantošana, tā vietā, lai pavadītu stundas, veidojot tabulu HTML valodā, izveidojiet to 15 minūtēs programmā Excel vai Word un pārveidojiet to tīrā, skaistā HTML kodā ievietošanai vietnē.

Laba diena, dārgie lasītāji! Ceru, ka jums iet tikpat labi kā mums - spīd saule, dzied putni, ir silts un vasara ir klāt! Es joprojām strādāju pie disertācijas, tāpēc pēdējo pusotru mēnesi rakstu tikai reizi nedēļā, man fiziski nav laika. Bet nerunāsim par bēdīgām lietām, ķersimies pie lietas!

Reiz rakņājos internetā, lai atrastu skriptu, kas attīra HTML kodu no atkritumiem, kas jo īpaši atstāj mūs visus šajā ziņā “mīļotu”, Microsoft Word. Iepriekš izmantoju Koda tīrīšana, izmantojot Adobe Dreamweaver bet viņam bija divi trūkumi:

    Dažreiz tas neattīra visu, ko mēs vēlētos.

    Ja ir ļoti liels koda daudzums, tīrīšanas skripts rada kļūdu.

Otrais punkts man kļuva kritisks, jo man bija jāstrādā ar lielām html tabulām, no kurām nebija iespējams attālināties no vienas vietnes, un tās sniedza visu informāciju programmā Word.

Tā, ilgāku laiku klaiņojot pa internetu, atradu skriptu, kas ar visu šo menedžmentu tiek galā ar uzviju, un tajā pašā laikā ir pilnībā pielāgojams.

Atbrīvojieties no netīrajiem marķējumiem, izmantojot bezmaksas tiešsaistes HTML Cleaner. Izmantojot šo tiešsaistes rīku, ir ļoti viegli izveidot, rediģēt, formatēt un samazināt tīmekļa kodu. Konvertējiet Word dokumentus par sakārtotu HTML un jebkurus citus vizuālos dokumentus, piemēram, Excel, PDF, Google dokumentus utt. Ir ārkārtīgi vienkārši un efektīvi strādāt ar diviem pievienotajiem vizuālajiem un avota redaktoriem, kas nekavējoties reaģē uz jūsu darbībām.

HTML Cleaner ir aprīkots ar daudzām noderīgām funkcijām, lai padarītu HTML tīrīšanu un rediģēšanu pēc iespējas vienkāršāku. Vienkārši ielīmējiet savu kodu teksta apgabalā, iestatiet tīrīšanas preferences un nospiediet Tīrs HTML pogu. Tas var apstrādāt jebkuru dokumentu, kas izveidots, izmantojot Microsoft Excel, PowerPoint, Google dokumentus vai jebkuru citu komponistu. Tas palīdz viegli atbrīvoties no visiem iekļautajiem stiliem un nevajadzīgajiem kodiem, ko pievieno Microsoft Word vai citi WYSIWYG redaktori. Šis HTML redaktora rīks ir noderīgs, ja migrējat saturu no vienas vietnes uz otru un vēlaties notīrīt visas svešzemju klases un ID, ko piemēro avota vietne. Izmantojiet meklēšanas un aizstāšanas rīku savām pielāgotajām komandām. Muļķīga teksta ģenerators ļauj redaktoram viegli pievienot fiktīvu tekstu.

Lapas augšpusē varat redzēt vizuālo redaktoru un avota koda redaktoru blakus viens otram. Neatkarīgi no tā, kuru modificētu, izmaiņas tiks atspoguļotas citā reāllaikā. Vizuālais HTML redaktors ļauj iesācējiem viegli izveidot savu saturu tāpat kā izmantojot jebkuru citu tekstapstrādes programmu, savukārt labajā pusē esošais avota redaktors ar izceltu koda marķējumu palīdz pieredzējušiem lietotājiem pielāgot kodu. Tas padara šo tiešsaistes programmu par jauku rīku HTML kodēšanas apguvei.

Konvertējiet Word dokumentus uz tīru HTML

Lai tiešsaistē publicētu PDF, Microsoft Word, Excel, PowerPoint vai citus dokumentus, kas sastādīti ar dažādām Word redaktora programmām vai vienkārši kopētu saturu, kas kopēts no citas vietnes, ielīmējiet formatēto saturu vizuālajā redaktorā. Dokumenta HTML avots būs uzreiz redzams arī avota redaktorā. Vadības josla virs WYSIWYG redaktora kontrolē šo lauku, savukārt visi pārējie avota tīrīšanas iestatījumi ir paredzēti avota koda rediģēšanai. Noklikšķiniet uz Tīrs HTML pogu pēc tīrīšanas preferenču iestatīšanas. Nokopējiet notīrīto kodu un publicējiet to savā vietnē.

Nav garantijas, ka programma izlabos visas kļūdas jūsu kodā tieši tā, kā vēlaties, tāpēc, lūdzu, mēģiniet ievadīt sintaktiski derīgu HTML.

Konvertējiet HTML tabulas par strukturētiem div elementiem, aktivizējot atbilstošo izvēles rūtiņu.

Vai tīrīt HTML kodu no Microsoft Word tagiem (2000-2007)?

Agrāk tīmekļa dizaineri savas vietnes veidoja, izmantojot tabulas, lai organizētu lapu izkārtojumu, taču adaptīvā tīmekļa dizaina laikmetā tabulas ir novecojušas, un to vietu ieņem DIV. Šis tiešsaistes rīks palīdz ar dažiem vienkāršiem klikšķiem pārvērst tabulas par strukturētiem div elementiem.

Varat padarīt avota kodu lasāmāku, organizējot ciļņu hierarhiju koka skatā.

Kļūt par biedru

Šī vietne ir pilnībā funkcionāls rīks HTML koda tīrīšanai un sastādīšanai, taču jums ir iespēja iegādāties HTML G abonementu un piekļūt vēl profesionālākām funkcijām. Izmantojot HTML Cleaner bezmaksas versiju, jūs piekrītat iekļaut saites rediģētajos dokumentos. Šis tīrīšanas rīks var pievienot trešās puses reklāmas saiti tīrīto dokumentu beigās, un jums ir jāatstāj šis kods nemainīgs, kamēr izmantojat bezmaksas versiju.

Cleaner ir pakalpojums tagu tīrīšanai no “atkritumiem”, kas paliek dokumentā pēc lapas saglabāšanas formātā no programmas.

Jau sen rakstīju līdzīgu spraudni, bet tas tapa steigā, tagad mehānisms ir pilnībā pārrakstīts.

Koda tīrīšana notiek, pārmeklējot ievadīto rindiņu, no kuras veidojas jauna, kurā ir “tīrs” . Spraudnis no tagiem noņem pilnīgi visu, tostarp . Nesapārotajos tagos tiek ievietots simbols / (slīpsvītra). Tukšie tagi tiek noņemti, piemēram, konstrukcija tiks dzēsta, jo tajā nav nekā.

Kā darbojas html tīrītājs?

Ir divi veidi:

  1. Programmā MS Word atlasiet datus, kurus vēlaties notīrīt, lai atlasītu visus, nospiediet Ctrl + A. Ielīmējiet kopēto tekstu zemāk esošajā laukā (jāatlasa cilne "Paste MS Office Data"), noklikšķiniet uz pogas "Pabeigt".
  2. Pirms koda optimizēšanas programmā Word atlasiet “Saglabāt kā...”, pēc tam atlasiet Faila tipu “Tīmekļa lapa ar filtru”, pēc tam atveriet saglabāto failu teksta redaktorā, nokopējiet kodu un ielīmējiet to tālāk esošajā laukā ( Jāizvēlas cilne "Ievietot HTML"), noklikšķiniet uz pogas "Gatavs".

Tā rezultātā jūs saņemsit senatnīgu html kodu.
Tālāk norādītie atribūti paliek neskarti:

"colspan", "rowspan", "href", "src", "type", "value", "lang", "tabindex", "title", "code", "alt", "target", "dir ", "span", "darbība", "metode"