ลบแท็ก html ล้างข้อความจากแท็ก html เครื่องมือทำความสะอาด html ทำงานอย่างไร

สวัสดี!

เมื่อเขียนโปรแกรมแก้ไขแบบ WYSIWYG ของตัวเอง ฉันประสบปัญหาในการคัดลอกข้อความจาก Word จริงๆ แล้วมีปัญหาสามประการ:

  • Word แทรกโค้ด html ขยะจำนวนมากที่ต้องทำความสะอาด
  • ด้วยเหตุผลบางประการ Word ใช้ย่อหน้าแทนแท็ก UL และ LI เพื่อแสดงรายการ
  • ที่จริงแล้วจะตรวจสอบได้อย่างไรว่าข้อความที่แทรกนั้นถูกแทรกจาก Word
โดยทั่วไป เพื่อแก้ไขปัญหาเหล่านี้ ปลั๊กอิน jquery จึงถูกเขียนเสร็จสมบูรณ์ แหล่งที่มาซึ่งมีอยู่ท้ายบทความ ตัวอย่างการใช้งาน:

$('#บรรณาธิการ'). msword_html_filter();
ปลั๊กอินค้างอยู่ในกิจกรรม คีย์อัพและตรวจสอบว่าซอร์สโค้ดภายในตัวแก้ไขถูกวางจาก Word หรือไม่ หากเป็นเช่นนั้น ฟังก์ชันการล้างข้อมูลจะเริ่มขึ้น ในผลลัพธ์ html ทุกอย่างที่เป็นไปได้จะถูกตอกย้ำ - ช่องว่างที่ไม่ทำลาย, คุณลักษณะ สไตล์และ จัดตำแหน่ง, แท็ก ช่วง, ทั้งหมด นางสาว-classes ย่อหน้าว่าง

รายละเอียดการใช้งานภายใต้การตัด

ลูกค้าประจำส่วนใหญ่นำมาจาก TinyMCE

วิธีตรวจสอบว่าบรรทัดมีโค้ด html ที่แทรกจาก Word หรือไม่:

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

ฟังก์ชั่นทำความสะอาดโค้ด (ส่งผ่านไปยังฟังก์ชั่น วัตถุเจคิวรี่บรรณาธิการ):

ฟังก์ชั่น word_filter(editor)( var content = editor.html(); // ความคิดเห็นของ Word เช่น ความคิดเห็นแบบมีเงื่อนไข ฯลฯ content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>จีไอ ""); // แปลง เข้าไปข้างใน <(\/?)s>/กิ"<$1strike> ___ ([\s\u00a0]*)<\/span>/gi, function(str, spaces) ( return (spaces.length > "; if (/^\s*\w+\./.test(txt)) ( var ตรงกัน = /()\./.exec(txt ); if (ตรงกัน) ( var start = parseInt(matches, 10); list_tag = start>1 ? "" : ""; )else( list_tag = ""; ) ) if(cur_level> " + $(นี้).html() + "") $(this).remove(); Last_level = cur_level; )else( Last_level = 0; ) )) $("", ตัวแก้ไข).removeAttr("style"); $("", ตัวแก้ไข).removeAttr( "align"); $("span", editor).replaceWith(function() (return $(this).contents();)); $("span:empty", editor).remove(); $( "", ตัวแก้ไข).removeAttr("class"); $("p:empty", ตัวแก้ไข).remove(); )

ข้อความต้นฉบับแบบเต็มของปลั๊กอินอยู่ใต้สปอยเลอร์ บันทึกเป็นไฟล์ jquery.msword_html_filter.js

ข้อความต้นฉบับของปลั๊กอิน

(function($) ( $.fn.msword_html_filter = function(options) ( var settings = $.extend((), options); function word_filter(editor)( var content = editor.html(); // ความคิดเห็นของ Word เช่น ความคิดเห็นแบบมีเงื่อนไข ฯลฯ content = content.replace(//gi, ""); // ลบความคิดเห็น สคริปต์ (เช่น msoShowComment), แท็ก XML, เนื้อหา VML, // แท็กเนมสเปซ MS Office และแท็กอื่นๆ อีกสองสามรายการ content = content.replace(/<(!|script[^>]*>.*?<\/script(?=[>\s])|\/?(\?xml(:\w+)?|img|meta|link|style|\w:\w+)(?=[\s\/>]))[^>]* >>จีไอ ""); // แปลง เข้าไปข้างใน สำหรับเนื้อหาแบบบรรทัด = content.replace(/<(\/?)s>/กิ"<$1strike>"); // แทนที่ nbsp entites เป็น char เนื่องจากจัดการได้ง่ายกว่า //content = content.replace(/ /gi, "\u00a0"); content = content.replace(/ /gi, " "); // แปลง ___เป็นสตริงของการสลับ // ทำลาย/ไม่ทำลายช่องว่างของเนื้อหาที่มีความยาวเท่ากัน = 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"); varmatch = /mso-list:\w+ \ w+(+)/.exec(str); if (ตรงกัน) ( $(this).data("_listLevel", parseInt(matches, 10)); ) )); // แยกรายการ var Last_level=0; var pnt = null; $("p", editor).each(function())( var cur_level = $(this).data("_listLevel"); if(cur_level != undefinition)( var txt = $(this).text() ; var list_tag = ""; if (/^\s*\w+\./.test(txt)) ( varmatch = /()\./.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 = $(นี้).prev(); )else( pnt = $(list_tag).appendTo(pnt); ) ) ถ้า(cur_level " + $(นี้).html() + "") $(this).remove(); Last_level = cur_level; )else( Last_level = 0; ) )) $("", ตัวแก้ไข).removeAttr("style"); $("", ตัวแก้ไข).removeAttr( "align"); $("span", editor).replaceWith(function() (return $(this).contents();)); $("span:empty", editor).remove(); $( "", editor).removeAttr("class"); $("p:empty", editor).remove(); ) ส่งคืน this.each(function() ( $(this).on("keyup", function ()( var content = $(this).html(); if (/class="?Mso|style="[^"]*\bmso-|style="[^""]*\bmso-|w :WordDocument/i.test(เนื้อหา)) ( word_filter($(นี้)); ) )); )); ); ))(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 ให้สร้างตารางใน Excel หรือ Word ภายใน 15 นาที แล้วแปลงเป็นโค้ด HTML ที่สะอาดและสวยงามสำหรับการแทรกลงในไซต์

ขอให้เป็นวันที่ดีผู้อ่านที่รัก! ฉันหวังว่าคุณจะสบายดีเหมือนเรา ดวงอาทิตย์ส่องแสง นกร้องเพลง อากาศอบอุ่น และฤดูร้อนมาถึงแล้ว! ฉันยังคงทำวิทยานิพนธ์อยู่ ดังนั้นในช่วงเดือนครึ่งที่ผ่านมาฉันเขียนสัปดาห์ละครั้งเท่านั้น จริงๆ แล้วฉันไม่มีเวลาเลย แต่อย่าพูดถึงเรื่องน่าเศร้า ลงมือทำธุรกิจกันดีกว่า!

กาลครั้งหนึ่ง ฉันกำลังขุดค้นบนอินเทอร์เน็ตเพื่อค้นหาสคริปต์ที่ล้างโค้ด HTML ของขยะ ซึ่งทำให้พวกเราทุกคน "เป็นที่รัก" ในเรื่องนี้ Microsoft Word เมื่อก่อนผมใช้ การล้างโค้ดโดยใช้ Adobe Dreamweaverแต่เขามี ข้อเสียสองประการ:

    บางครั้งมันไม่ได้ทำความสะอาดทุกสิ่งที่เราต้องการ

    หากมีรหัสจำนวนมาก สคริปต์การล้างข้อมูลจะแสดงข้อผิดพลาด

จุดที่สองกลายเป็นเรื่องสำคัญสำหรับฉันเนื่องจากฉันต้องทำงานกับตาราง html ขนาดใหญ่ซึ่งเป็นไปไม่ได้ที่จะย้ายออกจากไซต์เดียวและพวกเขาก็ให้ข้อมูลทั้งหมดใน Word

ดังนั้นหลังจากท่องอินเทอร์เน็ตเป็นเวลานานฉันพบสคริปต์ที่จัดการกับการจัดการทั้งหมดนี้ได้อย่างยอดเยี่ยมและในขณะเดียวกันก็ปรับแต่งได้อย่างสมบูรณ์

กำจัดมาร์กอัปสกปรกของคุณด้วย HTML Cleaner ออนไลน์ฟรี การเขียน แก้ไข จัดรูปแบบ และย่อขนาดโค้ดเว็บเป็นเรื่องง่ายมากด้วยเครื่องมือออนไลน์นี้ แปลงเอกสาร Word เป็น HTML ที่เป็นระเบียบเรียบร้อยและเอกสารภาพอื่นๆ เช่น Excel, PDF, Google Docs เป็นต้น มันง่ายและมีประสิทธิภาพอย่างยิ่งในการทำงานกับโปรแกรมแก้ไขภาพและแหล่งที่มาสองตัวที่แนบมาซึ่งตอบสนองต่อการกระทำของคุณทันที

HTML Cleaner มาพร้อมกับคุณสมบัติที่มีประโยชน์มากมายเพื่อทำให้การล้างและแก้ไข HTML เป็นเรื่องง่ายที่สุด เพียงวางรหัสของคุณลงในพื้นที่ข้อความ ตั้งค่ากำหนดการทำความสะอาด แล้วกดปุ่ม ทำความสะอาด HTMLปุ่ม. สามารถจัดการเอกสารใด ๆ ที่สร้างด้วย Microsoft Excel, PowerPoint, Google docs หรือผู้แต่งอื่น ๆ ช่วยให้คุณกำจัดรูปแบบอินไลน์และโค้ดที่ไม่จำเป็นซึ่งเพิ่มโดย Microsoft Word หรือโปรแกรมแก้ไขแบบ WYSIWYG อื่นๆ ได้อย่างง่ายดาย เครื่องมือแก้ไข HTML นี้มีประโยชน์เมื่อคุณย้ายเนื้อหาจากเว็บไซต์หนึ่งไปยังอีกเว็บไซต์หนึ่ง และคุณต้องการล้างคลาสและ ID ต่างด้าวทั้งหมดที่ไซต์ต้นทางใช้ ใช้เครื่องมือค้นหาและแทนที่สำหรับคำสั่งที่คุณกำหนดเอง เครื่องมือสร้างข้อความซึ่งพูดพล่อยๆ ช่วยให้คุณสามารถเพิ่มข้อความจำลองลงในโปรแกรมแก้ไขได้อย่างง่ายดาย

ที่ด้านบนของหน้า คุณจะเห็นโปรแกรมแก้ไขภาพและโปรแกรมแก้ไขซอร์สโค้ดที่อยู่ติดกัน ไม่ว่าคุณจะแก้ไขการเปลี่ยนแปลงใดจะส่งผลต่อการเปลี่ยนแปลงแบบเรียลไทม์ โปรแกรมแก้ไข HTML แบบภาพช่วยให้ผู้เริ่มต้นเขียนเนื้อหาได้อย่างง่ายดายเหมือนกับเมื่อใช้โปรแกรมประมวลผลคำอื่นๆ ในขณะที่ทางด้านขวา โปรแกรมแก้ไขต้นฉบับที่มีมาร์กอัปโค้ดที่ไฮไลต์จะช่วยให้ผู้ใช้ขั้นสูงสามารถปรับโค้ดได้ ทำให้โปรแกรมออนไลน์นี้เป็นเครื่องมือที่ดีในการเรียนรู้การเขียนโค้ด HTML

แปลงเอกสาร Word เพื่อล้าง HTML

หากต้องการเผยแพร่ PDF ออนไลน์, Microsoft Word, Excel, PowerPoint หรือเอกสารอื่นใดที่ประกอบด้วยโปรแกรมแก้ไขคำที่แตกต่างกัน หรือเพียงเพื่อคัดลอกเนื้อหาที่คัดลอกมาจากเว็บไซต์อื่น ให้วางเนื้อหาที่จัดรูปแบบแล้วในโปรแกรมแก้ไขภาพ ซอร์ส HTML ของเอกสารจะปรากฏทันทีในตัวแก้ไขซอร์สเช่นกัน แถบควบคุมเหนือตัวแก้ไขแบบ WYSIWYG จะควบคุมฟิลด์นี้ ในขณะที่การตั้งค่าการทำความสะอาดซอร์สอื่นๆ ทั้งหมดใช้สำหรับการแก้ไขซอร์สโค้ด คลิก ทำความสะอาด HTMLหลังจากตั้งค่ากำหนดการทำความสะอาดแล้ว คัดลอกโค้ดที่ล้างแล้วและเผยแพร่บนเว็บไซต์ของคุณ

ไม่มีการรับประกันว่าโปรแกรมจะแก้ไขข้อผิดพลาดทั้งหมดในโค้ดของคุณตามที่คุณต้องการ ดังนั้นโปรดลองป้อน HTML ที่ถูกต้องตามหลักไวยากรณ์

แปลงตาราง HTML เป็นองค์ประกอบ div ที่มีโครงสร้างซึ่งเปิดใช้งานช่องทำเครื่องหมายที่เกี่ยวข้อง

ทำความสะอาดโค้ด HTML จากแท็ก Microsoft Word (2000-2007) หรือไม่

ในอดีต นักออกแบบเว็บไซต์เคยสร้างเว็บไซต์โดยใช้ตารางเพื่อจัดระเบียบเค้าโครงหน้า แต่ในยุคของการออกแบบเว็บไซต์แบบตอบสนอง ตารางนั้นล้าสมัย และ DIV ก็เข้ามาแทนที่ เครื่องมือออนไลน์นี้ช่วยให้คุณเปลี่ยนตารางของคุณให้เป็นองค์ประกอบ div ที่มีโครงสร้างได้ด้วยการคลิกง่ายๆ เพียงไม่กี่ครั้ง

คุณสามารถทำให้ซอร์สโค้ดของคุณอ่านได้ง่ายขึ้นโดยการจัดลำดับชั้นของแท็บในมุมมองแบบต้นไม้

กลายเป็นสมาชิก

เว็บไซต์นี้เป็นเครื่องมือที่ใช้งานได้เต็มรูปแบบในการล้างและเขียนโค้ด HTML แต่คุณมีความเป็นไปได้ที่จะซื้อการเป็นสมาชิก HTML G และเข้าถึงคุณสมบัติระดับมืออาชีพเพิ่มเติมได้ การใช้ HTML Cleaner เวอร์ชันฟรีแสดงว่าคุณยินยอมที่จะรวมลิงก์ในเอกสารที่แก้ไข เครื่องมือล้างข้อมูลนี้อาจเพิ่มลิงก์ส่งเสริมการขายของบุคคลที่สามที่ส่วนท้ายของเอกสารที่ล้าง และคุณต้องคงรหัสนี้ไว้โดยไม่มีการเปลี่ยนแปลงตราบใดที่คุณใช้เวอร์ชันฟรี

Cleaner คือบริการทำความสะอาดแท็กจาก "ขยะ" ที่ค้างอยู่ในเอกสารหลังจากบันทึกหน้าในรูปแบบจากโปรแกรม

เมื่อนานมาแล้วฉันเขียนปลั๊กอินที่คล้ายกัน แต่มันรีบเร่งตอนนี้กลไกได้ถูกเขียนใหม่ทั้งหมดแล้ว

การล้างโค้ดเกิดขึ้นโดยการค้นหาผ่านบรรทัดที่ป้อนซึ่งมีการสร้างบรรทัดใหม่ซึ่งมีคำว่า "clean" ปลั๊กอินจะลบทุกอย่างออกจากแท็ก รวมถึง . ในแท็กที่ไม่ได้จับคู่ สัญลักษณ์ / (สแลช) จะถูกแทรก แท็กที่ว่างเปล่าจะถูกลบออก ตัวอย่างเช่น โครงสร้างจะถูกลบเนื่องจากไม่มีอะไรเลย

เครื่องมือทำความสะอาด 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 ", "ช่วง", "การกระทำ", "วิธีการ"