Κατάργηση ετικετών html. Διαγραφή κειμένου από ετικέτες html. Πώς λειτουργεί το πρόγραμμα καθαρισμού html;

Γειά σου!

Όταν έγραφα το δικό μου πρόγραμμα επεξεργασίας WYSIWYG, αντιμετώπισα πρόβλημα κατά την αντιγραφή κειμένου από το Word. Στην πραγματικότητα υπάρχουν τρία προβλήματα:

  • Το Word εισάγει πολύ ανεπιθύμητο κώδικα html που πρέπει να καθαριστεί
  • Για κάποιο λόγο, το Word χρησιμοποιεί παραγράφους αντί για ετικέτες UL και LI για την παρουσίαση λιστών
  • Στην πραγματικότητα, πώς να προσδιορίσετε ότι το εισαγόμενο κείμενο έχει εισαχθεί από το Word.
Γενικά, για την επίλυση αυτών των προβλημάτων, γράφτηκε ένα πρόσθετο jquery, ολοκληρωμένο πηγήτο οποίο είναι διαθέσιμο στο τέλος του άρθρου. Παράδειγμα χρήσης:

$('#editor'). msword_html_filter();
Η προσθήκη είναι αναρτημένη σε ένα συμβάν keyupκαι ελέγχει εάν ο πηγαίος κώδικας μέσα στο πρόγραμμα επεξεργασίας έχει επικολληθεί από το Word. Εάν ναι, τότε εκκινείται η λειτουργία εκκαθάρισης. Στο html που προκύπτει, όλα τα δυνατά είναι καρφωμένα - αδιάσπαστοι χώροι, ιδιότητες στυλΚαι ευθυγραμμίζω, ετικέτες σπιθαμή, Ολα Mso-τάξεις, κενές παράγραφοι.

Λεπτομέρειες εφαρμογής κάτω από το κόψιμο.

Τα περισσότερα από τα κανονικά που χρησιμοποιήθηκαν προήλθαν από το TinyMCE.

Πώς να προσδιορίσετε εάν μια γραμμή περιέχει κώδικα html που έχει εισαχθεί από το Word:

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

Λειτουργία καθαρισμού κωδικού (μεταβιβάστηκε στη λειτουργία αντικείμενο jqueryσυντάκτης):

Συνάρτηση word_filter(editor)( var content = editor.html(); // Σχόλια λέξεων όπως σχόλια υπό όρους κ.λπ. περιεχόμενο = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Μετατροπή σε <(\/?)s>/gi,"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, function(str, spaces) ( return (spaces.length > "; if (/^\s*\w+\./.test(txt)) ( var matches = /()\./.exec(txt ); if (ταιριάζει) ( var start = parseInt(ταιριάζει, 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() (return $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("class"); $("p:empty", editor).remove(); )

Το πλήρες κείμενο προέλευσης της προσθήκης βρίσκεται κάτω από το spoiler, αποθηκεύστε το σε ένα αρχείο jquery.msword_html_filter.js

κείμενο πηγής προσθήκης

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // Σχόλια λέξεων όπως σχόλια υπό όρους κ.λπ. περιεχόμενο = content.replace(//gi, ""); // Κατάργηση σχολίων, σεναρίων (π.χ. msoShowComment), ετικέτα XML, περιεχόμενο VML, // ετικέτες με χώρο ονομάτων MS Office και μερικές άλλες ετικέτες περιεχόμενο = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>gi, ""); // Μετατροπή σε for line-though content = content.replace(/<(\/?)s>/gi,"<$1strike>"); // Αντικαταστήστε τις οντότητες nbsp σε χαρακτήρες, καθώς είναι ευκολότερος ο χειρισμός //content = content.replace(/ /gi, "\u00a0"); content = content.replace(/ /gi, " "); // Μετατροπή ___σε συμβολοσειρά εναλλασσόμενων // breaking/non-breaking spaces ίδιου μήκους περιεχόμενο = 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(περιεχόμενο); // Ανάλυση επιπέδου εσοχής λίστας για λίστες $("p", editor).each(function())( var str = $(this).attr("style"); var matches = /mso-list:\w+ \ w+(+)/.exec(str); if (ταιριάζει) ( $(this).data("_listLevel", parseInt(ταιριάζει, 10)); ) )); // Ανάλυση λιστών 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 (ταιριάζει) ( var start = parseInt ( αντιστοιχίζει, 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() (return $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("class"); $("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(περιεχόμενο)) ( word_filter($(this)); ) )); )); ))(jQuery)


Η απόδοση δοκιμάστηκε μόνο στον πιο πρόσφατο Firefox.

Το Excel/Word σε HTML είναι ένα ιδανικό εργαλείο για την επεξεργασία του πηγαίου κώδικα των άρθρων του WordPress ή οποιουδήποτε άλλου συστήματος διαχείρισης περιεχομένου όταν ο ενσωματωμένος συνθέτης τους δεν παρέχει όλες τις λειτουργίες που χρειαζόμαστε. Συνθέστε περιεχόμενο απευθείας στο παράθυρο του προγράμματος περιήγησής σας χωρίς να εγκαταστήσετε μια επέκταση ή μια προσθήκη για να χειριστείτε την επισήμανση σύνταξης και άλλες λειτουργίες επεξεργασίας κειμένου.

Πώς να χρησιμοποιήσετε;

Επικολλήστε το έγγραφο που θέλετε να μετατρέψετε στο πρόγραμμα επεξεργασίας του Word και, στη συνέχεια, μεταβείτε στο πρόγραμμα προβολής HTML χρησιμοποιώντας τις μεγάλες καρτέλες στο επάνω μέρος της σελίδας για να δημιουργήσετε τον κώδικα.

Καθαρίστε τη βρώμικη σήμανση με ένα μεγάλο κουμπί που εκτελεί ενεργές (επιλεγμένες) επιλογές σε μια λίστα. Μπορείτε επίσης να εφαρμόσετε αυτές τις λειτουργίες μία προς μία χρησιμοποιώντας το εικονίδιο CLEAN.

Προβλήματα μετατροπής που επιλύονται εύκολα από τον διαδικτυακό μας μετατροπέα HTML

Το πρόβλημα της μετατροπής λέξης σε html πιθανότατα υπήρχε πάντα μαζί με το Microsoft Word. Ένας τεράστιος αριθμός στυλ που έχουν εκχωρηθεί σε κείμενα, όπως το mso-spacerun:yes, και τάξεις, όπως το MsoNormal, καθώς και μια ακαταστασία όλων των ειδών span style="font-size:10.0pt" γεμίζουν σε μεγάλο βαθμό τον κώδικα. Και συχνά διακόπτουν τα εγγενή στυλ που καθορίζονται στον ιστότοπο. Εάν εξακολουθείτε να μπορείτε να χειρίζεστε απλό κείμενο εισάγοντας κείμενο μέσω του κουμπιού "Εισαγωγή μόνο κειμένου" του προγράμματος επεξεργασίας, τότε αυτή η μέθοδος δεν θα λειτουργήσει με πίνακες. Ο μετατροπέας μας είναι σε θέση να καθαρίσει εύκολα τυχόν περιττά σχόλια και στυλ από το μελλοντικό αρχείο html, κάνοντας απλά κλικ στα κουμπιά.


Διαδικτυακός καθαρισμός HTML από περιττά στυλ CSS
  • Αφαιρέστε τυχόν περιττά στυλ από όλο το κείμενο ή ένα επιλεγμένο τμήμα
  • Καταργούμε τους περιττούς κωδικούς εσοχών, τα σύμβολα και άλλους κωδικούς Unicode
  • Καθαρίστε τον κώδικα από επιπλέον κενά και διπλότυπες ετικέτες
  • Εάν είναι απαραίτητο, αφαιρέστε εντελώς τη σήμανση HTML.

Μετατρέψτε αρχεία Word, Excel, TxT σε καθαρό πηγαίο κώδικα HTML. Χωρίς περιττά στυλ και σχόλια για άμεση, σωστή εισαγωγή στις σελίδες του ιστότοπου.

Υποστηριζόμενες μορφές για διαδικτυακή μετατροπή:

  • 97–2004 και νεότερα DOC σε HTML, DOCX σε HTML.
  • XLS σε HTML, XLSX σε HTML.
  • PPT σε HTML, PPTX σε HTML.
  • TXT σε HTML και πολλές άλλες μορφές.

Μια άλλη χρήσιμη χρήση της υπηρεσίας, αντί να ξοδεύετε ώρες για τη δημιουργία ενός πίνακα σε HTML, φτιάξτε τον σε 15 λεπτά σε Excel ή Word και μετατρέψτε τον σε καθαρό, όμορφο κώδικα HTML για εισαγωγή στον ιστότοπο.

Καλημέρα, αγαπητοί αναγνώστες! Ελπίζω να τα πάτε καλά όπως εμείς - ο ήλιος λάμπει, τα πουλιά τραγουδούν, είναι ζεστό και ήρθε το καλοκαίρι! Εξακολουθώ να εργάζομαι στη διατριβή μου, οπότε τον τελευταίο ενάμιση μήνα γράφω μόνο μία φορά την εβδομάδα, φυσικά δεν έχω χρόνο. Αλλά ας μην μιλάμε για θλιβερά πράγματα, ας ασχοληθούμε!

Μια φορά κι έναν καιρό, έψαχνα στο Διαδίκτυο για να βρω ένα σενάριο που καθαρίζει τον κώδικα HTML από τα σκουπίδια, το οποίο, συγκεκριμένα, αφήνει όλους εμάς «αγαπημένο» από αυτή την άποψη, το Microsoft Word. Παλαιότερα χρησιμοποιούσα Εκκαθάριση κώδικα χρησιμοποιώντας το Adobe Dreamweaverαλλά είχε δύο μειονεκτήματα:

    Μερικές φορές δεν καθαρίζει όλα όσα θα θέλαμε.

    Εάν υπάρχει πολύ μεγάλος αριθμός κώδικα, το σενάριο εκκαθάρισης παρουσιάζει σφάλμα.

Το δεύτερο σημείο έγινε κρίσιμο για μένα, αφού έπρεπε να δουλέψω με μεγάλους πίνακες html, από τους οποίους ήταν αδύνατο να απομακρυνθώ από έναν ιστότοπο και παρείχαν όλες τις πληροφορίες στο Word.

Έτσι, μετά από αρκετή περιπλάνηση στο Διαδίκτυο, βρήκα ένα σενάριο που αντιμετωπίζει όλη αυτή τη διαχείριση με πάταγο και ταυτόχρονα είναι πλήρως προσαρμόσιμο.

Απαλλαγείτε από τη βρώμικη σήμανση με το δωρεάν online HTML Cleaner. Είναι πολύ εύκολο να συνθέσετε, να επεξεργαστείτε, να μορφοποιήσετε και να ελαχιστοποιήσετε τον κώδικα ιστού με αυτό το διαδικτυακό εργαλείο. Μετατρέψτε τα έγγραφα του Word σε τακτοποιημένο HTML και οποιαδήποτε άλλα οπτικά έγγραφα όπως Excel, PDF, Έγγραφα Google κ.λπ. Είναι εξαιρετικά απλό και αποτελεσματικό να εργάζεστε με τα δύο συνημμένα οπτικά και πηγαία προγράμματα επεξεργασίας που ανταποκρίνονται άμεσα στις ενέργειές σας.

Το HTML Cleaner είναι εξοπλισμένο με πολλές χρήσιμες λειτουργίες για να κάνει τον καθαρισμό και την επεξεργασία HTML όσο το δυνατόν πιο εύκολη. Απλώς επικολλήστε τον κωδικό σας στην περιοχή κειμένου, ορίστε τις προτιμήσεις καθαρισμού και πατήστε το Καθαρίστε το HTMLκουμπί. Μπορεί να χειριστεί οποιοδήποτε έγγραφο που δημιουργείται με το Microsoft Excel, το PowerPoint, τα έγγραφα Google ή οποιονδήποτε άλλο συνθέτη. Σας βοηθά να απαλλαγείτε εύκολα από όλα τα ενσωματωμένα στυλ και τους περιττούς κωδικούς που προστίθενται από το Microsoft Word ή άλλους επεξεργαστές WYSIWYG. Αυτό το εργαλείο επεξεργασίας HTML είναι χρήσιμο όταν μεταφέρετε το περιεχόμενο από τον έναν ιστότοπο στον άλλο και θέλετε να καθαρίσετε όλες τις κλάσεις και τα αναγνωριστικά αλλοδαπών που εφαρμόζει ο ιστότοπος προέλευσης. Χρησιμοποιήστε το εργαλείο εύρεσης και αντικατάστασης για τις προσαρμοσμένες εντολές σας. Η γεννήτρια ασυναρτησίας κειμένου σάς επιτρέπει να προσθέτετε εύκολα εικονικό κείμενο στο πρόγραμμα επεξεργασίας.

Στο επάνω μέρος της σελίδας μπορείτε να δείτε τον οπτικό επεξεργαστή και τον επεξεργαστή πηγαίου κώδικα το ένα δίπλα στο άλλο. Όποια και αν τροποποιήσετε τις αλλαγές θα αντικατοπτρίζονται στην άλλη σε πραγματικό χρόνο. Το οπτικό πρόγραμμα επεξεργασίας HTML επιτρέπει στους αρχάριους να συνθέτουν εύκολα το περιεχόμενό τους όπως όταν χρησιμοποιούν οποιοδήποτε άλλο πρόγραμμα επεξεργασίας κειμένου, ενώ στα δεξιά το πρόγραμμα επεξεργασίας πηγής με επισημασμένη σήμανση κώδικα βοηθά τους προχωρημένους χρήστες να προσαρμόσουν τον κώδικα. Αυτό καθιστά αυτό το διαδικτυακό πρόγραμμα ένα ωραίο εργαλείο για την εκμάθηση κωδικοποίησης HTML.

Μετατροπή εγγράφων Word σε καθαρό HTML

Για να δημοσιεύσετε ηλεκτρονικά αρχεία PDF, Microsoft Word, Excel, PowerPoint ή άλλα έγγραφα που έχουν συνταχθεί με διαφορετικά προγράμματα επεξεργασίας λέξεων ή απλώς για να αντιγράψετε το περιεχόμενο που αντιγράφηκε από άλλο ιστότοπο, επικολλήστε το μορφοποιημένο περιεχόμενο στο οπτικό πρόγραμμα επεξεργασίας. Η πηγή HTML του εγγράφου θα είναι άμεσα ορατή και στο πρόγραμμα επεξεργασίας πηγής. Η γραμμή ελέγχου πάνω από το πρόγραμμα επεξεργασίας WYSIWYG ελέγχει αυτό το πεδίο ενώ όλες οι άλλες ρυθμίσεις καθαρισμού πηγών προορίζονται για την επεξεργασία του πηγαίου κώδικα. Κάντε κλικ στο Καθαρίστε το HTMLκουμπί μετά τη ρύθμιση των προτιμήσεων καθαρισμού. Αντιγράψτε τον καθαρισμένο κώδικα και δημοσιεύστε τον στον ιστότοπό σας.

Δεν υπάρχει καμία εγγύηση ότι το πρόγραμμα διορθώνει όλα τα σφάλματα στον κώδικά σας ακριβώς με τον τρόπο που θέλετε, επομένως προσπαθήστε να εισαγάγετε ένα συντακτικά έγκυρο HTML.

Μετατρέψτε τους πίνακες HTML σε δομημένα στοιχεία div ενεργοποιώντας το αντίστοιχο πλαίσιο ελέγχου.

Καθαρισμός κώδικα HTML από ετικέτες Microsoft Word (2000-2007);

Στο παρελθόν οι σχεδιαστές ιστοσελίδων συνήθιζαν να κατασκευάζουν τους ιστότοπούς τους χρησιμοποιώντας πίνακες για να οργανώσουν τη διάταξη σελίδων, αλλά στην εποχή του responsive σχεδιασμού ιστοσελίδων οι πίνακες σχεδίασης ιστοσελίδων είναι ξεπερασμένοι και τα DIV παίρνουν τη θέση τους. Αυτό το διαδικτυακό εργαλείο σάς βοηθά να μετατρέψετε τους πίνακές σας σε δομημένα στοιχεία div με μερικά απλά κλικ.

Μπορείτε να κάνετε τον πηγαίο κώδικα σας πιο ευανάγνωστο οργανώνοντας την ιεραρχία των καρτελών σε μια προβολή δέντρου.

Γίνομαι μέλος

Αυτός ο ιστότοπος είναι ένα πλήρως λειτουργικό εργαλείο για τον καθαρισμό και τη σύνθεση κώδικα HTML, αλλά έχετε τη δυνατότητα να αγοράσετε μια συνδρομή HTML G και να αποκτήσετε πρόσβαση σε ακόμα περισσότερες επαγγελματικές λειτουργίες. Χρησιμοποιώντας τη δωρεάν έκδοση του HTML Cleaner, συναινείτε να συμπεριλάβετε συνδέσμους στα επεξεργασμένα έγγραφα. Αυτό το εργαλείο εκκαθάρισης μπορεί να προσθέσει έναν προωθητικό σύνδεσμο τρίτου μέρους στο τέλος των καθαρισμένων εγγράφων και πρέπει να αφήσετε αυτόν τον κωδικό αμετάβλητο όσο χρησιμοποιείτε τη δωρεάν έκδοση.

Το Cleaner είναι μια υπηρεσία καθαρισμού ετικετών από «σκουπίδια» που παραμένουν στο έγγραφο μετά την αποθήκευση της σελίδας στη μορφή από το πρόγραμμα.

Πριν από πολύ καιρό είχα γράψει ένα παρόμοιο πρόσθετο, αλλά έγινε βιαστικά, τώρα ο μηχανισμός έχει ξαναγραφεί εντελώς.

Ο καθαρισμός του κώδικα πραγματοποιείται με αναζήτηση μέσω της εισαγόμενης γραμμής από την οποία σχηματίζεται μια νέα, η οποία περιέχει ένα "καθαρό" . Η προσθήκη αφαιρεί απολύτως τα πάντα από τις ετικέτες, συμπεριλαμβανομένων των . Σε μη ζευγαρωμένες ετικέτες, εισάγεται το σύμβολο / (κάθετο). Οι κενές ετικέτες αφαιρούνται, για παράδειγμα η κατασκευή θα διαγραφεί επειδή δεν περιέχει τίποτα.

Πώς λειτουργεί το πρόγραμμα καθαρισμού html;

Υπάρχουν δύο τρόποι:

  1. Στο MS Word, επιλέξτε τα δεδομένα που θέλετε να διαγράψετε, για να επιλέξετε όλα, πατήστε Ctrl + A. Επικολλήστε το αντιγραμμένο κείμενο στο παρακάτω πεδίο (πρέπει να επιλέξετε την καρτέλα "Επικόλληση δεδομένων MS Office"), κάντε κλικ στο κουμπί "Τέλος".
  2. Πριν βελτιστοποιήσετε τον κώδικα, επιλέξτε "Αποθήκευση ως..." στο Word και, στη συνέχεια, επιλέξτε τον τύπο αρχείου "Ιστοσελίδα με φίλτρο", στη συνέχεια ανοίξτε το αποθηκευμένο αρχείο σε ένα πρόγραμμα επεξεργασίας κειμένου, αντιγράψτε τον κώδικα και επικολλήστε τον στο παρακάτω πεδίο (το Η καρτέλα "Εισαγωγή HTML" πρέπει να είναι επιλεγμένη "), κάντε κλικ στο κουμπί "Τέλος".

Ως αποτέλεσμα, θα λάβετε παρθένο κώδικα html.
Τα ακόλουθα χαρακτηριστικά παραμένουν ανέγγιχτα:

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