Fjern html-koder. Slett tekst fra html-tagger. Hvordan fungerer html-renser?

Hallo!

Da jeg skrev min egen WYSIWYG-editor, fikk jeg problemer med å kopiere tekst fra Word. Det er faktisk tre problemer:

  • Word setter inn mye søppel html-kode som må rengjøres
  • Av en eller annen grunn bruker Word avsnitt i stedet for UL- og LI-koder for å presentere lister
  • Faktisk, hvordan finne ut at den innsatte teksten er satt inn fra Word.
Generelt, for å løse disse problemene, ble en jquery-plugin skrevet, komplett kilde som er tilgjengelig på slutten av artikkelen. Brukseksempel:

$('#editor'). msword_html_filter();
Programtillegget henger på en hendelse tastetrykk og sjekker om kildekoden inne i editoren er limt inn fra Word; i så fall startes oppryddingsfunksjonen. I den resulterende html-en er alt mulig spikret inn - ikke-brytende mellomrom, attributter stil Og tilpasse, tags span, Alle Mso-klasser, tomme avsnitt.

Gjennomføringsdetaljer under kuttet.

De fleste gjengangere som ble brukt var hentet fra TinyMCE.

Hvordan finne ut om en linje inneholder html-kode satt inn fra Word:

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

Koderengjøringsfunksjon (overført til funksjonen jquery objekt redaktør):

Funksjon word_filter(editor)( var content = editor.html(); // Word-kommentarer som betingede kommentarer etc content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|stil|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konverter inn i <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, function(str, mellomrom) ( return (mellomrom.lengde > "; if (/^\s*\w+\./.test(txt)) ( var matches = /()\./.exec(txt) ); if (matches) ( 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("klasse"); $("p:tom", editor).remove(); )

Den fullstendige kildeteksten til pluginet er under spoileren, lagre i en fil jquery.msword_html_filter.js

plugin-kildetekst

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // Word-kommentarer som betingede kommentarer etc content = content.replace(//gi, ""); // Fjern kommentarer, skript (f.eks. msoShowComment), XML-tag, VML-innhold, // MS Office-tagger med navneavstand og noen få andre tagger content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|stil|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Konverter inn i for line-though content = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Erstatt nbsp entites til char siden det er lettere å håndtere //content = content.replace(/ /gi, "\u00a0"); content = content.replace(/ /gi, " "); // Konverter ___ til streng med vekslende // brytende/ikke-brytende mellomrom med innhold av samme lengde = 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(innhold); // Parse ut listeinnrykksnivå for lister $("p", editor).each(function())( var str = $(this).attr("style"); var matches = /mso-list:\w+ \ w+(+)/.exec(str); if (matches) ( $(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 (matches) ( var start = parseInt ( matches, 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("class"); $("p:empty", editor).remove(); ) returner this.each(function() ( $(this).on("keyup", funksjon ()( var innhold = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/i.test(content)) ( word_filter($(this)); ) )); )); ); ))(jQuery)


Ytelsen ble testet kun i den nyeste Firefox.

Excel/Word til HTML er et ideelt verktøy for å redigere kildekoden til WordPress-artikler eller et hvilket som helst annet innholdsstyringssystem når deres innebygde komponist ikke gir alle funksjonene vi trenger. Komponer innhold direkte i nettleservinduet uten å installere en utvidelse eller plugin for å håndtere syntaksutheving og andre tekstredigeringsfunksjoner.

Hvordan å bruke?

Lim inn dokumentet du vil konvertere til Word-editoren, og gå deretter til HTML-visningen ved å bruke de store fanene øverst på siden for å generere koden.

Rydd opp i skitten markering med en stor knapp som kjører aktive (avkryssede) alternativer i en liste. Du kan også bruke disse funksjonene én etter én ved å bruke CLEAN-ikonet.

Konverteringsproblemer som enkelt løses av vår online HTML-konvertering

Problemet med å konvertere word til html har sannsynligvis alltid eksistert sammen med Microsoft Word. Et stort antall stiler tilordnet tekster, for eksempel mso-spacerun:yes, og klasser, for eksempel MsoNormal, samt et rot av alle slags span style="font-size:10.0pt" roter koden kraftig. Og de avbryter ofte de opprinnelige stilene som er spesifisert på nettstedet. Hvis du fortsatt kan håndtere enkel tekst ved å sette inn tekst gjennom editorens "Sett inn kun tekst"-knapp, vil denne metoden ikke fungere med tabeller. Konverteren vår er i stand til enkelt å fjerne unødvendige kommentarer og stiler fra den fremtidige html-filen ved å klikke på knappene.


Online rensing av HTML fra unødvendige CSS-stiler
  • Fjern eventuelle unødvendige stiler fra all tekst eller et valgt fragment
  • Vi fjerner unødvendige innrykkskoder, symboler og andre Unicode-koder
  • Rengjør koden fra ekstra mellomrom og dupliserte tagger
  • Fjern om nødvendig HTML-koden helt.

Konverter Word, Excel, TxT-filer til ren HTML-kildekode. Uten unødvendige stiler og kommentarer for direkte, korrekt innsetting på nettstedssider.

Støttede formater for online konvertering:

  • 97–2004 og nyere DOC til HTML, DOCX til HTML;
  • XLS til HTML, XLSX til HTML;
  • PPT til HTML, PPTX til HTML;
  • TXT til HTML og mange andre formater.

En annen nyttig bruk av tjenesten, i stedet for å bruke timer på å lage en tabell i HTML, lag den på 15 minutter i Excel eller Word og konverter den til ren, vakker HTML-kode for innsetting på nettstedet.

God dag, kjære lesere! Jeg håper dere har det like bra som oss - solen skinner, fuglene synger, det er varmt og sommeren har kommet! Jeg jobber fortsatt med avhandlingen min, så den siste halvannen måneden har jeg bare skrevet en gang i uken, jeg har fysisk ikke tid. Men la oss ikke snakke om triste ting, la oss sette i gang!

En gang i tiden gravde jeg på Internett for å finne et skript som fjerner HTML-koden for søppel, noe som spesielt etterlater oss alle "elskede" i denne forbindelse, Microsoft Word. Tidligere brukte jeg Kodeopprydding ved hjelp av Adobe Dreamweaver men det hadde han to ulemper:

    Noen ganger renser det ikke alt vi ønsker.

    Hvis det er en veldig stor mengde kode, gir oppryddingsskriptet en feil.

Det andre punktet ble kritisk for meg, siden jeg måtte jobbe med store html-tabeller, som det var umulig å flytte fra ett nettsted fra, og de ga all informasjon i Word.

Derfor, etter å ha vandret rundt på Internett i lang tid, fant jeg et script som takler all denne ledelsen med et smell, og som samtidig er fullstendig tilpassbart.

Bli kvitt din skitne markering med den gratis online HTML Cleaner. Det er veldig enkelt å komponere, redigere, formatere og forminske nettkoden med dette nettbaserte verktøyet. Konverter Word-dokumenter til ryddig HTML og andre visuelle dokumenter som Excel, PDF, Google Docs etc. Det er ekstremt enkelt og effektivt å jobbe med de to vedlagte visuelle og kilderedigererne som reagerer umiddelbart på handlingene dine.

HTML Cleaner er utstyrt med mange nyttige funksjoner for å gjøre HTML-rensing og redigering så enkelt som mulig. Bare lim inn koden i tekstområdet, konfigurer rengjøringspreferansene og trykk på Ren HTML knapp. Den kan håndtere ethvert dokument som er opprettet med Microsoft Excel, PowerPoint, Google docs eller en hvilken som helst annen komponist. Det hjelper deg enkelt å bli kvitt alle innebygde stiler og unødvendige koder som er lagt til av Microsoft Word eller andre WYSIWYG-redigerere. Dette HTML-redigeringsverktøyet er nyttig når du migrerer innholdet fra et nettsted til et annet og du vil rydde opp i alle fremmede klasser og ID-er som kildenettstedet bruker. Bruk finn og erstatt-verktøyet for dine egendefinerte kommandoer. Gibberish-tekstgeneratoren lar deg enkelt legge til dummy-tekst i editoren.

Øverst på siden kan du se den visuelle editoren og kildekodeeditoren ved siden av hverandre. Uansett hva du endrer, vil endringene reflekteres på den andre i sanntid. Den visuelle HTML-editoren lar nybegynnere enkelt komponere innholdet sitt akkurat som når de bruker et hvilket som helst annet tekstbehandlingsprogram, mens til høyre hjelper kilderedigeringsprogrammet med markert kodeoppmerking de avanserte brukerne med å justere koden. Dette gjør dette nettbaserte programmet til et fint verktøy for å lære HTML-koding.

Konverter Word-dokumenter til ren HTML

For å publisere online PDF-er, Microsoft Word, Excel, PowerPoint eller andre dokumenter sammensatt med forskjellige ordredigeringsprogrammer eller bare for å kopiere innholdet som er kopiert fra et annet nettsted, lim inn det formaterte innholdet i det visuelle redigeringsprogrammet. HTML-kilden til dokumentet vil også være umiddelbart synlig i kilderedigeringsprogrammet. Kontrolllinjen over WYSIWYG-editoren kontrollerer dette feltet mens alle andre kilderenseinnstillinger er for å redigere kildekoden. Klikk på Ren HTML knappen etter at du har konfigurert rengjøringspreferansene. Kopier den rensede koden og publiser den på nettstedet ditt.

Det er ingen garanti for at programmet retter alle feil i koden din akkurat slik du vil, så prøv å skrive inn en syntaktisk gyldig HTML.

Konverter HTML-tabellene til strukturerte div-elementer ved å aktivere den tilsvarende avmerkingsboksen.

Rense HTML-kode fra Microsoft Word-koder (2000-2007)?

Tidligere pleide webdesignere å bygge nettsidene sine ved å bruke tabeller for å organisere sidelayout, men i en tid med responsive webdesign er tabeller utdaterte og DIV-er tar deres plass. Dette nettbaserte verktøyet hjelper deg å gjøre tabellene dine til strukturerte div-elementer med noen få enkle klikk.

Du kan gjøre kildekoden mer lesbar ved å organisere fanehierarkiet i en trevisning.

Bli medlem

Denne nettsiden er et fullt funksjonelt verktøy for å rense og komponere HTML-kode, men du har muligheten til å kjøpe et HTML G-medlemskap og få tilgang til enda flere profesjonelle funksjoner. Ved å bruke gratisversjonen av HTML Cleaner samtykker du til å inkludere lenker i de redigerte dokumentene. Dette oppryddingsverktøyet kan legge til en salgsfremmende tredjepartskobling på slutten av de rensede dokumentene, og du må la denne koden være uendret så lenge du bruker gratisversjonen.

Cleaner er en tjeneste for å rense tagger fra "søppel" som blir liggende i dokumentet etter å ha lagret siden i formatet fra programmet.

For lenge siden skrev jeg en lignende plugin, men den ble laget i en hast, nå er mekanismen skrevet helt om.

Koderengjøring skjer ved å søke gjennom den angitte linjen som en ny er dannet fra, som inneholder en "ren" . Programtillegget fjerner absolutt alt fra tagger, inkludert . I ikke-parede tagger er symbolet / (skråstrek) satt inn. Tomme tagger fjernes, for eksempel vil konstruksjonen bli slettet fordi den ikke inneholder noe.

Hvordan fungerer html-renser?

Det er to måter:

  1. I MS Word, velg dataene du vil slette, for å velge alle, trykk Ctrl + A. Lim inn den kopierte teksten i feltet nedenfor (fanen "Lim inn MS Office-data" må være valgt), klikk på "Fullfør"-knappen.
  2. Før du optimerer koden, velg "Lagre som..." i Word, velg deretter filtypen "Webside med filter", åpne den lagrede filen i et tekstredigeringsprogram, kopier koden og lim den inn i feltet under (den "Sett inn HTML"-fanen må være valgt "), klikk på "Ferdig"-knappen.

Som et resultat vil du motta uberørt html-kode.
Følgende attributter forblir urørt:

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