HTML Minifier
⚙️ মিনিফাই অপশন
কমেন্ট রিমুভ করুন
HTML কমেন্ট মুছে ফেলবে
💡
টিপস: বড় HTML ফাইল মিনিফাই করলে ২০-৪০% পর্যন্ত সাইজ কমানো সম্ভব। মিনিফাই করার আগে অরিজিনাল ফাইল ব্যাকআপ রাখুন!
`;
function loadSampleHTML() {
document.getElementById('htmlInput').value = sampleHTML;
updateOriginalStats();
showNotification('স্যাম্পল HTML লোড হয়েছে!', 'info');
}
function minifyHTML() {
let html = document.getElementById('htmlInput').value;
if (!html.trim()) {
showNotification('দয়া করে HTML কোড ইনপুট দিন!', 'error');
return;
}
const options = {
removeComments: document.getElementById('removeComments').checked,
removeWhitespace: document.getElementById('removeWhitespace').checked,
removeEmptyAttributes: document.getElementById('removeEmptyAttributes').checked,
removeOptionalTags: document.getElementById('removeOptionalTags').checked,
collapseBooleanAttributes: document.getElementById('collapseBooleanAttributes').checked,
minifyCSS: document.getElementById('minifyCSS').checked,
minifyJS: document.getElementById('minifyJS').checked,
removeQuotes: document.getElementById('removeQuotes').checked
};
try {
let minified = html;
// Step 1: Remove HTML comments (except conditional comments)
if (options.removeComments) {
minified = minified.replace(//g, '');
}
// Step 2: Minify CSS in style tags
if (options.minifyCSS) {
minified = minified.replace(/
([\s\S]*?)<\/style>/gi, function(match, css) {
let minifiedCSS = css
.replace(/\/\*[\s\S]*?\*\//g, '') // Remove CSS comments
.replace(/\s+/g, ' ') // Collapse whitespace
.replace(/\s*([{}:;,])\s*/g, '$1') // Remove spaces around punctuation
.replace(/;\}/g, '}') // Remove last semicolon
.replace(/^\s+|\s+$/g, '') // Trim
.replace(/\s*>\s*/g, '>') // Remove spaces around >
.replace(/\s*~\s*/g, '~') // Remove spaces around ~
.replace(/\s*\+\s*/g, '+') // Remove spaces around +
.replace(/\s*!\s*important/g, '!important'); // Fix !important
return '';
});
}
// Step 3: Minify JavaScript in script tags
if (options.minifyJS) {
minified = minified.replace(/([\s\S]*?)<\/script>/gi, function(match, js) {
let minifiedJS = js
.replace(/\/\/.*$/gm, '') // Remove single-line comments
.replace(/\/\*[\s\S]*?\*\//g, '') // Remove multi-line comments
.replace(/\s+/g, ' ') // Collapse whitespace
.replace(/\s*([{}();,:])\s*/g, '$1') // Remove spaces around punctuation
.replace(/^\s+|\s+$/g, ''); // Trim
return '';
});
}
// Step 4: Collapse boolean attributes
if (options.collapseBooleanAttributes) {
const booleanAttrs = ['checked', 'disabled', 'readonly', 'required', 'multiple',
'autofocus', 'selected', 'hidden', 'async', 'defer',
'autoplay', 'controls', 'loop', 'muted', 'playsinline',
'default', 'ismap', 'reversed', 'scoped', 'seamless'];
booleanAttrs.forEach(attr => {
const regex = new RegExp(attr + '=["\']?' + attr + '["\']?', 'gi');
minified = minified.replace(regex, attr);
});
}
// Step 5: Remove empty attributes
if (options.removeEmptyAttributes) {
minified = minified.replace(/\s+\w+=["']\s*["']/g, '');
}
// Step 6: Remove optional tags
if (options.removeOptionalTags) {
minified = minified.replace(/<\/li>\s*/gi, '');
// This is a simplified version - full implementation would be more complex
}
// Step 7: Remove quotes from attributes where possible
if (options.removeQuotes) {
minified = minified.replace(/(\w+)=["']([\w-]+)["']/g, function(match, attr, value) {
// Don't remove quotes if value contains special characters
if (/^[\w-]+$/.test(value)) {
return attr + '=' + value;
}
return match;
});
}
// Step 8: Remove whitespace between tags
if (options.removeWhitespace) {
minified = minified
.replace(/>\s+<') // Remove whitespace between tags
.replace(/\s{2,}/g, ' ') // Collapse multiple spaces
.replace(/^\s+|\s+$/gm, '') // Trim each line
.replace(/\n\s*/g, '\n') // Remove spaces after newlines
.replace(/\n+/g, '') // Remove newlines completely
.replace(/\s+/g, ' ') // Final collapse
.trim();
}
// Step 9: Remove spaces around = in attributes
minified = minified.replace(/\s*=\s*/g, '=');
// Step 10: Remove spaces before />
minified = minified.replace(/\s*\/>/g, '/>');
// Step 11: Remove spaces after < and before >
minified = minified.replace(/<\s+/g, '<').replace(/\s+>/g, '>');
// Step 12: Final cleanup
minified = minified
.replace(/\s+/g, ' ')
.trim();
document.getElementById('htmlOutput').value = minified;
updateStats();
// Animate the stats
animateStats();
showNotification('✅ HTML সফলভাবে মিনিফাই হয়েছে!', 'success');
} catch (error) {
showNotification('❌ মিনিফাই করতে সমস্যা হয়েছে: ' + error.message, 'error');
}
}
function beautifyHTML() {
const html = document.getElementById('htmlInput').value;
if (!html.trim()) {
showNotification('দয়া করে HTML কোড ইনপুট দিন!', 'error');
return;
}
try {
let beautified = html
.replace(//g, '>\n')
.replace(/\n\s*\n/g, '\n')
.trim();
let indentLevel = 0;
const lines = beautified.split('\n');
const result = [];
lines.forEach(line => {
line = line.trim();
if (!line) return;
// Decrease indent for closing tags
if (line.match(/^<\/\w/)) {
indentLevel = Math.max(0, indentLevel - 1);
}
// Add indentation
if (indentLevel > 0) {
line = ' '.repeat(indentLevel) + line;
}
// Increase indent for opening tags (but not self-closing)
if (line.match(/^<\w[^>]*[^/]>$/) && !line.match(/^<(?:br|hr|img|input|link|meta|area|base|col|embed|source|track|wbr)[^>]*>$/)) {
indentLevel++;
}
result.push(line);
});
document.getElementById('htmlOutput').value = result.join('\n');
updateStats();
showNotification('💎 HTML প্রিটিফাই সম্পন্ন!', 'success');
} catch (error) {
showNotification('❌ প্রিটিফাই করতে সমস্যা হয়েছে!', 'error');
}
}
function updateOriginalStats() {
const input = document.getElementById('htmlInput').value;
document.getElementById('originalSize').textContent = formatBytes(input.length);
}
function updateStats() {
const input = document.getElementById('htmlInput').value;
const output = document.getElementById('htmlOutput').value;
const originalBytes = input.length;
const minifiedBytes = output.length;
const savedBytes = originalBytes - minifiedBytes;
const savedPercent = originalBytes > 0 ? ((savedBytes / originalBytes) * 100).toFixed(1) : 0;
document.getElementById('originalSize').textContent = formatBytes(originalBytes);
document.getElementById('minifiedSize').textContent = formatBytes(minifiedBytes);
document.getElementById('savedSize').textContent = formatBytes(savedBytes);
document.getElementById('savedPercent').textContent = savedPercent + '%';
}
function formatBytes(bytes) {
if (bytes === 0) return '0 B';
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}
function animateStats() {
const statCards = document.querySelectorAll('.stat-card');
statCards.forEach(card => {
card.style.transform = 'scale(1.05)';
card.style.transition = 'transform 0.3s ease';
setTimeout(() => {
card.style.transform = 'scale(1)';
}, 300);
});
}
function copyToClipboard() {
const output = document.getElementById('htmlOutput').value;
if (!output) {
showNotification('কপি করার মতো কোনো কন্টেন্ট নেই!', 'error');
return;
}
navigator.clipboard.writeText(output).then(() => {
showNotification('✅ ক্লিপবোর্ডে কপি হয়েছে!', 'success');
}).catch(() => {
const textarea = document.getElementById('htmlOutput');
textarea.select();
document.execCommand('copy');
showNotification('✅ ক্লিপবোর্ডে কপি হয়েছে!', 'success');
});
}
function downloadMinified() {
const output = document.getElementById('htmlOutput').value;
if (!output) {
showNotification('ডাউনলোড করার মতো কোনো কন্টেন্ট নেই!', 'error');
return;
}
const blob = new Blob([output], { type: 'text/html' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'minified_' + new Date().getTime() + '.html';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
showNotification('💾 ফাইল ডাউনলোড শুরু হয়েছে!', 'success');
}
function compareCode() {
const input = document.getElementById('htmlInput').value;
const output = document.getElementById('htmlOutput').value;
if (!input || !output) {
showNotification('তুলনা করার জন্য উভয় প্যানেলে কন্টেন্ট প্রয়োজন!', 'error');
return;
}
const originalBytes = input.length;
const minifiedBytes = output.length;
const savedBytes = originalBytes - minifiedBytes;
const savedPercent = ((savedBytes / originalBytes) * 100).toFixed(1);
alert(`📊 তুলনা রিপোর্ট:\n\n` +
`📄 অরিজিনাল: ${formatBytes(originalBytes)}\n` +
`📦 মিনিফাইড: ${formatBytes(minifiedBytes)}\n` +
`💾 সাশ্রয়: ${formatBytes(savedBytes)} (${savedPercent}%)\n\n` +
`মোট ${savedPercent}% সাইজ কমানো হয়েছে!`);
}
function clearAll() {
document.getElementById('htmlInput').value = '';
document.getElementById('htmlOutput').value = '';
document.getElementById('originalSize').textContent = '0';
document.getElementById('minifiedSize').textContent = '0';
document.getElementById('savedSize').textContent = '0';
document.getElementById('savedPercent').textContent = '0%';
showNotification('🗑️ সব ক্লিয়ার করা হয়েছে!', 'info');
}
function showNotification(message, type) {
const notification = document.createElement('div');
notification.className = `notification notification-${type}`;
notification.textContent = message;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.opacity = '0';
notification.style.transform = 'translateX(100%)';
notification.style.transition = 'all 0.3s ease';
setTimeout(() => {
document.body.removeChild(notification);
}, 300);
}, 3000);
}
// Live character count update
document.getElementById('htmlInput').addEventListener('input', function() {
updateOriginalStats();
});
// Keyboard shortcut: Ctrl+Enter to minify
document.getElementById('htmlInput').addEventListener('keydown', function(e) {
if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
e.preventDefault();
minifyHTML();
}
});
// Auto-load sample on page load
window.addEventListener('load', function() {
loadSampleHTML();
updateOriginalStats();
});
