🔒 100% Private & Secure • Even our servers can't read your files
HTML & Code Cleaner & Minifier Studio
Clean messy markup, strip inline styles, purge specific classes or attributes, remove empty tags, sanitize Word-pasted HTML, and minify with zero server transmission.
⚙️ Selective Elimination & Cleaning Rules
Ready to process
`;
function loadSampleHtml() {
document.getElementById('rawHtmlInput').value = SAMPLE_DIRTY_HTML;
processHtmlClean();
}
function selectAllRules(val) {
document.querySelectorAll('.clean-toggle-grid input[type="checkbox"]').forEach(c => c.checked = val);
}
function setWordPreset() {
document.getElementById('ruleStripStyles').checked = true;
document.getElementById('ruleStripClasses').checked = true;
document.getElementById('ruleStripIds').checked = true;
document.getElementById('ruleStripComments').checked = true;
document.getElementById('ruleStripEvents').checked = true;
document.getElementById('ruleStripDataAttrs').checked = true;
document.getElementById('ruleStripScripts').checked = true;
document.getElementById('ruleStripEmptyTags').checked = true;
document.getElementById('ruleCleanWordJunk').checked = true;
document.getElementById('ruleStripSpanDivs').checked = true;
document.getElementById('ruleConvertBoldItalic').checked = true;
document.getElementById('ruleMinifyOutput').checked = false;
processHtmlClean();
}
function processHtmlClean() {
let input = document.getElementById('rawHtmlInput').value;
if (!input.trim()) {
document.getElementById('cleanHtmlOutput').value = '';
document.getElementById('cleanStats').textContent = '0 bytes';
return;
}
const initialSize = new Blob([input]).size;
// 1. Comments
if (document.getElementById('ruleStripComments').checked) {
input = input.replace(//g, '');
}
// 2. Scripts
if (document.getElementById('ruleStripScripts').checked) {
input = input.replace(/)<[^<]*)*<\/script>/gi, '');
}
// Parse with DOMParser
const parser = new DOMParser();
const doc = parser.parseFromString(input, 'text/html');
const body = doc.body;
// Blacklisted tags
const tagBlacklistInput = document.getElementById('tagBlacklist').value;
if (tagBlacklistInput) {
const tags = tagBlacklistInput.split(',').map(t => t.trim().toLowerCase()).filter(Boolean);
tags.forEach(tag => {
body.querySelectorAll(tag).forEach(el => el.remove());
});
}
// Whitelist attributes
const whitelistInput = document.getElementById('attrWhitelist').value;
const allowedAttrs = whitelistInput ? whitelistInput.split(',').map(a => a.trim().toLowerCase()).filter(Boolean) : null;
// Traversal cleaning
const allElements = body.querySelectorAll('*');
allElements.forEach(el => {
const tag = el.tagName.toLowerCase();
// Convert b -> strong, i -> em
if (document.getElementById('ruleConvertBoldItalic').checked) {
if (tag === 'b') replaceTag(el, 'strong');
if (tag === 'i') replaceTag(el, 'em');
}
// Clean attributes
const attrs = Array.from(el.attributes);
attrs.forEach(attr => {
const name = attr.name.toLowerCase();
if (allowedAttrs) {
if (!allowedAttrs.includes(name)) {
el.removeAttribute(attr.name);
return;
}
}
if (document.getElementById('ruleStripStyles').checked && name === 'style') el.removeAttribute(attr.name);
if (document.getElementById('ruleStripClasses').checked && name === 'class') el.removeAttribute(attr.name);
if (document.getElementById('ruleStripIds').checked && name === 'id') el.removeAttribute(attr.name);
if (document.getElementById('ruleStripEvents').checked && name.startsWith('on')) el.removeAttribute(attr.name);
if (document.getElementById('ruleStripDataAttrs').checked && name.startsWith('data-')) el.removeAttribute(attr.name);
if (document.getElementById('ruleCleanWordJunk').checked && (name.startsWith('mso-') || name.startsWith('v:') || name.startsWith('o:'))) el.removeAttribute(attr.name);
});
// Unwrap spans and font tags if enabled
if (document.getElementById('ruleStripSpanDivs').checked) {
if (['span', 'font'].includes(tag)) {
const parent = el.parentNode;
while (el.firstChild) parent.insertBefore(el.firstChild, el);
parent.removeChild(el);
}
}
});
// Remove Empty Tags
if (document.getElementById('ruleStripEmptyTags').checked) {
let foundEmpty = true;
while (foundEmpty) {
foundEmpty = false;
body.querySelectorAll('p, div, span, b, i, strong, em, h1, h2, h3, h4, h5, h6').forEach(el => {
if (!el.textContent.trim() && el.children.length === 0 && !['img', 'br', 'hr', 'input'].includes(el.tagName.toLowerCase())) {
el.remove();
foundEmpty = true;
}
});
}
}
let result = body.innerHTML;
// Minify or Prettify
if (document.getElementById('ruleMinifyOutput').checked) {
result = result.replace(/\s+/g, ' ').replace(/> <').trim();
} else {
result = formatHtmlString(result);
}
document.getElementById('cleanHtmlOutput').value = result;
const finalSize = new Blob([result]).size;
const saved = initialSize > 0 ? Math.round(((initialSize - finalSize) / initialSize) * 100) : 0;
document.getElementById('cleanStats').textContent = `${initialSize}B → ${finalSize}B (${saved}% reduction)`;
}
function replaceTag(el, newTagName) {
const newEl = document.createElement(newTagName);
while (el.firstChild) newEl.appendChild(el.firstChild);
Array.from(el.attributes).forEach(attr => newEl.setAttribute(attr.name, attr.value));
el.parentNode.replaceChild(newEl, el);
}
function formatHtmlString(html) {
let formatted = '';
let indent = 0;
const tab = ' ';
html.split(/>\s* {
if (node.match(/^\/\w/)) indent--;
formatted += tab.repeat(Math.max(0, indent)) + '<' + node + '>\n';
if (node.match(/^]*[^\/]$/) && !node.startsWith('input') && !node.startsWith('img') && !node.startsWith('br') && !node.startsWith('hr')) indent++;
});
return formatted.substring(1, formatted.length - 2);
}
function prettifyOnly() {
document.getElementById('ruleMinifyOutput').checked = false;
processHtmlClean();
}
function minifyOnly() {
document.getElementById('ruleMinifyOutput').checked = true;
processHtmlClean();
}
function copyCleanOutput() {
const out = document.getElementById('cleanHtmlOutput').value;
navigator.clipboard.writeText(out).then(() => alert('Cleaned HTML copied to clipboard!'));
}
function clearBoth() {
document.getElementById('rawHtmlInput').value = '';
document.getElementById('cleanHtmlOutput').value = '';
document.getElementById('cleanStats').textContent = 'Cleared';
}
document.querySelectorAll('.clean-toggle-grid input').forEach(input => {
input.addEventListener('change', processHtmlClean);
});
document.getElementById('attrWhitelist').addEventListener('input', processHtmlClean);
document.getElementById('tagBlacklist').addEventListener('input', processHtmlClean);
document.getElementById('rawHtmlInput').addEventListener('input', processHtmlClean);
document.addEventListener('DOMContentLoaded', () => {
loadSampleHtml();
});
