تنظيف كود HTML وتحويل الوورد إلى HTML أون لاين (مجاناً)

أداة تنظيف كود HTML (محول الوورد إلى HTML)

هل تعاني من الأكواد المعقدة والتنسيقات المزعجة عند نسخ المقالات من Microsoft Word أو Google Docs إلى موقعك؟ أداة HTML Cleaner من “دنيا التقنية” هي الحل السحري. صممنا هذه الأداة خصيصاً لمساعدتك على تنظيف كود HTML، إزالة الكلاسات والتنسيقات المضمنة (Inline Styles)، وتحويل أي نص إلى كود ويب نقي ومتوافق مع معايير السيو (SEO) بضغطة زر واحدة مجاناً.

\n`; const blob = new Blob([htmlDoc], {type: "text/html;charset=utf-8"}); const link = document.createElement("a"); link.href = URL.createObjectURL(blob); link.download = "techdonia-document.html"; link.click(); } else if (type === 'word') { const header = `${commonStyle}`; const footer = ""; const sourceHTML = header + htmlContent + footer; const source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML); const fileDownload = document.createElement("a"); fileDownload.href = source; fileDownload.download = 'techdonia-document.doc'; fileDownload.click(); } else if (type === 'pdf') { const element = document.createElement('div'); // إضافة التنسيق للعنصر الذي سيتم تحويله element.innerHTML = commonStyle + htmlContent; element.style.direction = 'rtl'; element.style.fontFamily = 'Tajawal, sans-serif'; element.style.padding = '20px'; // 🌟 إصلاح: إضافة خيار pagebreak لمنع قطع الصور 🌟 const opt = { margin: 10, filename: 'techdonia-document.pdf', image: { type: 'jpeg', quality: 0.98 }, html2canvas: { scale: 2, useCORS: true }, jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }, pagebreak: { mode: 'avoid-all', avoid: ['img', 'table', 'iframe'] } }; html2pdf().set(opt).from(element).save(); } } function copySourceCode(btnElement) { const html = aceEditor.getValue(); navigator.clipboard.writeText(html).then(() => { const originalHTML = btnElement.innerHTML; btnElement.classList.add('success'); btnElement.innerHTML = ' تم النسخ ✓'; setTimeout(() => { btnElement.classList.remove('success'); btnElement.innerHTML = originalHTML; }, 2000); }); } function clearVisual() { if(confirm("هل أنت متأكد من مسح كل المحتوى والبدء بمستند جديد؟")) { visualEditor.innerHTML = ''; aceEditor.setValue('', -1); } } function toggleEditorFullscreen() { const app = document.getElementById("html-cleaner-pro"); if (!document.fullscreenElement) { app.requestFullscreen().catch(err => console.error(err)); } else { document.exitFullscreen(); } } document.addEventListener("fullscreenchange", function() { setTimeout(() => { aceEditor.resize(); }, 100); }); // النوافذ المنبثقة والمعاينة function openPopupPreview() { const html = aceEditor.getValue(); const previewHTML = ` `; const newWindow = window.open('', '_blank', 'width=900,height=700,scrollbars=yes'); newWindow.document.write(previewHTML); newWindow.document.close(); } function openResponsivePreview() { const modal = document.getElementById('responsive-modal'); const iframe = document.getElementById('preview-iframe'); const htmlContent = aceEditor.getValue(); const previewHTML = ` ${htmlContent} `; modal.style.display = "flex"; iframe.style.width = "100%"; const doc = iframe.contentDocument || iframe.contentWindow.document; doc.open(); doc.write(previewHTML); doc.close(); } function closeResponsivePreview() { document.getElementById('responsive-modal').style.display = "none"; } function setPreviewWidth(width, btnElem) { document.getElementById('preview-iframe').style.width = width; document.querySelectorAll('.device-btn').forEach(b => b.classList.remove('active')); btnElem.classList.add('active'); } // 🌟 التنظيف السحري 🌟 function executeCleaning() { let html = aceEditor.getValue(); if (document.getElementById('opt-strip-all').checked) { const tempDiv = document.createElement('div'); tempDiv.innerHTML = html; html = tempDiv.textContent || tempDiv.innerText || ""; finalizeClean(html); return; } let parser = new DOMParser(); let doc = parser.parseFromString(html, 'text/html'); let body = doc.body; const oInline = document.getElementById('opt-inline').checked; const oClasses = document.getElementById('opt-classes').checked; const oEmpty = document.getElementById('opt-empty').checked; const oComments = document.getElementById('opt-comments').checked; const oSpan = document.getElementById('opt-span').checked; const oTable2Div = document.getElementById('opt-table2div').checked; if (oComments) { const removeComments = (node) => { for (let i = node.childNodes.length - 1; i >= 0; i--) { let child = node.childNodes[i]; if (child.nodeType === 8) node.removeChild(child); else if (child.nodeType === 1) removeComments(child); } }; removeComments(body); } if (oTable2Div) { const tables = body.querySelectorAll('table'); tables.forEach(table => { const wrapper = doc.createElement('div'); wrapper.className = "table-responsive-div"; wrapper.style.display = "table"; wrapper.style.width = "100%"; wrapper.style.marginBottom = "15px"; const rows = table.querySelectorAll('tr'); rows.forEach(row => { const rowDiv = doc.createElement('div'); rowDiv.style.display = "table-row"; const cells = row.querySelectorAll('td, th'); cells.forEach(cell => { const cellDiv = doc.createElement('div'); cellDiv.style.display = "table-cell"; cellDiv.style.padding = "10px"; cellDiv.style.border = "1px solid #e2e8f0"; if(cell.tagName === 'TH') { cellDiv.style.fontWeight = "bold"; cellDiv.style.background = "#f8fafc"; } cellDiv.innerHTML = cell.innerHTML; rowDiv.appendChild(cellDiv); }); wrapper.appendChild(rowDiv); }); table.parentNode.replaceChild(wrapper, table); }); } let elements = body.getElementsByTagName("*"); for (let i = elements.length - 1; i >= 0; i--) { let el = elements[i]; let tag = el.tagName.toUpperCase(); // حفظ المحاذاة الحالية let textAlign = el.style.textAlign; let display = el.style.display; let marginLeft = el.style.marginLeft; let marginRight = el.style.marginRight; let dirAttr = el.getAttribute('dir') || el.style.direction; let alignAttr = el.getAttribute('align'); if (oEmpty && el.innerHTML.trim() === "" && !['IMG','BR','HR','INPUT','IFRAME','VIDEO','AUDIO','SOURCE','TRACK'].includes(tag)) { el.parentNode.removeChild(el); continue; } if (oSpan && tag === 'SPAN') { el.outerHTML = el.innerHTML; continue; } // التنظيف الآمن للستايل if (oInline) { let isCentered = (textAlign === 'center') || (alignAttr === 'center'); let isRight = (textAlign === 'right') || (alignAttr === 'right'); let isLeft = (textAlign === 'left') || (alignAttr === 'left'); let isBlockCentered = (display === 'block' && (el.style.margin.includes('auto') || (marginLeft === 'auto' && marginRight === 'auto'))); if (!['IMG', 'IFRAME', 'VIDEO', 'AUDIO', 'FIGURE'].includes(tag)) { el.removeAttribute('style'); if (isCentered) el.style.textAlign = 'center'; else if (isRight) el.style.textAlign = 'right'; else if (isLeft) el.style.textAlign = 'left'; if (isBlockCentered) { el.style.display = 'block'; el.style.margin = 'auto'; } if (dirAttr) el.setAttribute('dir', dirAttr); } } if (oClasses) { if (!['IMG', 'IFRAME', 'VIDEO', 'AUDIO', 'FIGURE', 'I', 'SVG'].includes(tag)) { el.removeAttribute('class'); el.removeAttribute('id'); } } if(alignAttr && oInline) { el.removeAttribute('align'); if (tag !== 'IMG' && tag !== 'IFRAME' && tag !== 'VIDEO') { el.style.textAlign = alignAttr; } } } let cleaned = body.innerHTML; if (document.getElementById('opt-nbsp').checked) { cleaned = cleaned.replace(/ /g, ' '); cleaned = cleaned.replace(/\s{2,}/g, ' '); } finalizeClean(cleaned); } function finalizeClean(html) { html = html_beautify(html, { indent_size: 2, wrap_line_length: 0 }); isSyncingFromVisual = true; aceEditor.setValue(html, -1); visualEditor.innerHTML = html; isSyncingFromVisual = false; const btn = document.querySelector('.btn-magic-clean'); const orig = btn.innerHTML; btn.innerHTML = ' تم التنظيف والاحتفاظ بالتوسيط والميديا!'; setTimeout(() => btn.innerHTML = orig, 2500); } // 🌟 إصلاح: زر تنسيق الكود المصدري 🌟 function formatSource() { let html = aceEditor.getValue(); let b = html_beautify(html, { indent_size: 2, wrap_line_length: 0 }); // إزالة الحماية لكي يتم تشغيل الـ event (change) الخاص بـ Ace // وبالتالي يتم تحديث المحرر المرئي تلقائياً. aceEditor.setValue(b, -1); } function runReplace() { const find = document.getElementById('find-txt').value; const rep = document.getElementById('replace-txt').value; if(!find) return; let html = aceEditor.getValue(); let regex = new RegExp(find, 'g'); html = html.replace(regex, rep); isSyncingFromVisual = true; aceEditor.setValue(html, -1); visualEditor.innerHTML = html; isSyncingFromVisual = false; } function generateLorem() { const lang = document.getElementById('lorem-lang').value; const count = parseInt(document.getElementById('lorem-para').value) || 1; const arLorem = "هذا النص هو مثال لنص يمكن أن يستبدل في نفس المساحة، لقد تم توليد هذا النص من مولد النص العربى، حيث يمكنك أن تولد مثل هذا النص أو العديد من النصوص الأخرى."; const enLorem = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."; let text = lang === 'ar' ? arLorem : enLorem; let output = ""; for(let i=0; i${text}

\n`; formatDoc('insertHTML', output); }

كيف تنظف كود HTML في 3 خطوات؟

1. قم بنسخ النص من ملف الوورد أو الموقع الآخر والصقه في خانة “Visual Editor” (المحرر المرئي).
2. انزل إلى أسفل الأداة، وحدد خيارات التنظيف التي ترغب بها (مثل: إزالة الكلاسات، إزالة الأوسام الفارغة، إلخ).
3. اضغط على زر “تنظيف الكود (Clean)” الأخضر في الأعلى، وانسخ النتيجة الصافية من خانة “Source Code”.

محرر الأكواد الشامل

محرر HTML/CSS/JS أون لاين لبناء المواقع.

عداد الكلمات والحروف

احسب طول مقالاتك بدقة قبل نشرها.

تم تطوير HTML Cleaner Tool لتكون الأداة الأفضل لمنشئي المحتوى العربي على دنيا التقنية.