HTML Minifier Generator
Styled Page
\nThis is styled
\n \n" }, { name: "Form", text: "\n\n \n\n \n" } ];function minifyHTML() { const htmlCode = document.getElementById('html-code').value.trim(); const removeComments = document.getElementById('removeComments').checked; const removeWhitespace = document.getElementById('removeWhitespace').checked; const resultDiv = document.getElementById('result');if (!htmlCode) { resultDiv.textContent = 'Please enter HTML code to minify.'; return; }let minified = htmlCode;// Remove HTML comments if (removeComments) { minified = minified.replace(//g, ''); }// Remove unnecessary whitespace if (removeWhitespace) { minified = minified .replace(/\s+/g, ' ') // Replace multiple spaces with single space .replace(/>\s+<') // Remove space between tags .replace(/\s*([{}[\]()=<>])\s*/g, '$1') // Remove space around special characters .trim(); // Trim leading/trailing space }resultDiv.textContent = minified; }function copyMinified() { const resultText = document.getElementById('result').textContent; if (resultText && resultText !== 'Please enter HTML code to minify.') { navigator.clipboard.writeText(resultText).then(() => { alert('Minified HTML copied to clipboard!'); }).catch(() => { alert('Failed to copy minified HTML.'); }); } else { alert('Please minify some HTML first.'); } }function resetTool() { document.getElementById('html-code').value = ''; document.getElementById('result').textContent = ''; document.getElementById('removeComments').checked = true; document.getElementById('removeWhitespace').checked = true; }function showSuggestions() { const suggestionsDiv = document.getElementById('suggestions'); const content = document.getElementById('html-code').value.trim();if (content) { suggestionsDiv.style.display = 'none'; return; }suggestionsDiv.innerHTML = sampleHTML.map(sample => `${sample.name}
`
).join('');
suggestionsDiv.style.display = 'block';
}function selectSuggestion(text) {
document.getElementById('html-code').value = text;
document.getElementById('suggestions').style.display = 'none';
minifyHTML();
}document.getElementById('html-code').addEventListener('focus', showSuggestions);
document.getElementById('html-code').addEventListener('input', () => {
document.getElementById('suggestions').style.display = 'none';
});document.addEventListener('click', (e) => {
if (!e.target.closest('#html-code') && !e.target.closest('.suggestions')) {
document.getElementById('suggestions').style.display = 'none';
}
});document.getElementById('html-code').addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 'Enter') {
minifyHTML();
}
});