`; // Inicializar la aplicación function init() { setupEventListeners(); } // Configurar event listeners function setupEventListeners() { minifyBtn.addEventListener('click', minifyHTML); compareBtn.addEventListener('click', compareCode); previewBtn.addEventListener('click', showPreview); resetBtn.addEventListener('click', resetAll); clearOriginalBtn.addEventListener('click', clearOriginal); loadExampleBtn.addEventListener('click', loadExample); copyMinifiedBtn.addEventListener('click', copyMinified); downloadMinifiedBtn.addEventListener('click', downloadMinified); closePreviewBtn.addEventListener('click', closePreview); // Upload de archivos uploadArea.addEventListener('click', () => fileInput.click()); uploadArea.addEventListener('dragover', handleDragOver); uploadArea.addEventListener('drop', handleFileDrop); fileInput.addEventListener('change', handleFileSelect); } // Manejar arrastre de archivos function handleDragOver(e) { e.preventDefault(); uploadArea.style.borderColor = '#3da97a'; uploadArea.style.background = 'linear-gradient(135deg, rgba(72, 199, 142, 0.1) 0%, rgba(72, 199, 142, 0.05) 100%)'; } function handleFileDrop(e) { e.preventDefault(); uploadArea.style.borderColor = '#48c78e'; uploadArea.style.background = 'linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%)'; const files = e.dataTransfer.files; if (files.length > 0) { loadFile(files[0]); } } function handleFileSelect(e) { const files = e.target.files; if (files.length > 0) { loadFile(files[0]); } } // Cargar archivo function loadFile(file) { const validExtensions = ['.html', '.htm']; const fileExtension = file.name.toLowerCase().substring(file.name.lastIndexOf('.')); if (!validExtensions.includes(fileExtension)) { showError('Por favor, selecciona un archivo HTML (.html o .htm)'); return; } if (file.size > 5 * 1024 * 1024) { showError('El archivo es demasiado grande. Máximo 5MB permitido.'); return; } const reader = new FileReader(); reader.onload = function(e) { originalCode.value = e.target.result; showSuccess(`Archivo "${file.name}" cargado correctamente`); }; reader.onerror = function() { showError('Error al leer el archivo'); }; reader.readAsText(file); } // Cargar ejemplo function loadExample() { originalCode.value = htmlExample; showSuccess('Ejemplo de HTML cargado correctamente'); } // Limpiar código original function clearOriginal() { originalCode.value = ''; showSuccess('HTML original limpiado'); } // Minificar código HTML function minifyHTML() { const html = originalCode.value.trim(); if (!html) { showError('Por favor, ingresa algún código HTML para minificar'); return; } try { const minified = performHTMLMinification(html); minifiedCode.value = minified; updateStats(html, minified); showSuccess('HTML minificado correctamente'); } catch (error) { showError('Error durante la minificación: ' + error.message); } } // Realizar minificación HTML function performHTMLMinification(html) { let minified = html; // Obtener configuraciones const removeComments = document.getElementById('hmRemoveComments').checked; const removeWhitespace = document.getElementById('hmRemoveWhitespace').checked; const removeAttributeQuotes = document.getElementById('hmRemoveAttributeQuotes').checked; const collapseWhitespace = document.getElementById('hmCollapseWhitespace').checked; const removeOptionalTags = document.getElementById('hmRemoveOptionalTags').checked; const preserveLineBreaks = document.getElementById('hmPreserveLineBreaks').checked; // Paso 1: Eliminar comentarios HTML if (removeComments) { minified = removeHTMLComments(minified); } // Paso 2: Eliminar espacios en blanco entre tags if (removeWhitespace) { minified = removeWhitespaceBetweenTags(minified); } // Paso 3: Colapsar espacios múltiples if (collapseWhitespace) { minified = collapseMultipleSpaces(minified); } // Paso 4: Remover comillas de atributos (cuando es seguro) if (removeAttributeQuotes) { minified = removeAttributeQuotesSafely(minified); } // Paso 5: Remover tags opcionales if (removeOptionalTags) { minified = removeOptionalHTMLTags(minified); } // Paso 6: Preservar saltos de línea si está configurado if (!preserveLineBreaks) { minified = removeLineBreaks(minified); } return minified.trim(); } // Eliminar comentarios HTML function removeHTMLComments(html) { return html.replace(//g, ''); } // Eliminar espacios entre tags function removeWhitespaceBetweenTags(html) { html = html.replace(/>\s+<'); html = html.replace(/^\s+/, ''); html = html.replace(/\s+$/, ''); return html; } // Colapsar espacios múltiples function collapseMultipleSpaces(html) { html = html.replace(/[ \t]+/g, ' '); html = html.replace(/>\s+/g, '>'); html = html.replace(/\s+/g, ''); html = html.replace(/<\/p>/g, ''); html = html.replace(/<\/td>/g, ''); html = html.replace(/<\/th>/g, ''); html = html.replace(/<\/tr>/g, ''); html = html.replace(/<\/option>/g, ''); return html; } // Remover saltos de línea function removeLineBreaks(html) { return html.replace(/\n/g, ' ').replace(/\r/g, ''); } // Actualizar estadísticas function updateStats(original, minified) { const originalSize = new Blob([original]).size; const minifiedSize = new Blob([minified]).size; const savings = originalSize > 0 ? ((originalSize - minifiedSize) / originalSize * 100).toFixed(1) : 0; const ratio = originalSize > 0 ? (minifiedSize / originalSize * 100).toFixed(1) : 0; document.getElementById('hmOriginalSize').textContent = (originalSize / 1024).toFixed(2) + ' KB'; document.getElementById('hmMinifiedSize').textContent = (minifiedSize / 1024).toFixed(2) + ' KB'; document.getElementById('hmSavings').textContent = savings + '%'; document.getElementById('hmCompressionRatio').textContent = ratio + '%'; statsContainer.style.display = 'grid'; } // Comparar códigos function compareCode() { if (!originalCode.value || !minifiedCode.value) { showError('Primero debes minificar algún código para comparar'); return; } const originalLines = originalCode.value.split('\n').length; const minifiedLines = minifiedCode.value.split('\n').length; const originalChars = originalCode.value.length; const minifiedChars = minifiedCode.value.length; const message = `Comparación HTML:\n` + `- Líneas: ${originalLines} → ${minifiedLines} (${((1 - minifiedLines/originalLines) * 100).toFixed(1)}% reducción)\n` + `- Caracteres: ${originalChars} → ${minifiedChars} (${((1 - minifiedChars/originalChars) * 100).toFixed(1)}% reducción)`; showSuccess(message); } // Mostrar vista previa function showPreview() { if (!minifiedCode.value) { showError('No hay HTML minificado para previsualizar'); return; } const previewHTML = ` `; const blob = new Blob([previewHTML], { type: 'text/html' }); const url = URL.createObjectURL(blob); previewFrame.src = url; previewSection.classList.add('show'); showSuccess('Vista previa generada correctamente'); } // Cerrar vista previa function closePreview() { previewSection.classList.remove('show'); if (previewFrame.src) { URL.revokeObjectURL(previewFrame.src); previewFrame.src = ''; } } // Copiar código minificado function copyMinified() { if (!minifiedCode.value) { showError('No hay HTML minificado para copiar'); return; } minifiedCode.select(); navigator.clipboard.writeText(minifiedCode.value).then(() => { showSuccess('HTML minificado copiado al portapapeles'); }).catch(() => { // Fallback para navegadores antiguos document.execCommand('copy'); showSuccess('HTML minificado copiado al portapapeles'); }); } // Descargar código minificado function downloadMinified() { if (!minifiedCode.value) { showError('No hay HTML minificado para descargar'); return; } const blob = new Blob([minifiedCode.value], { type: 'text/html' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'html_minificado.html'; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); showSuccess('HTML minificado descargado correctamente'); } // Reiniciar todo function resetAll() { originalCode.value = ''; minifiedCode.value = ''; statsContainer.style.display = 'none'; previewSection.classList.remove('show'); hideMessages(); showSuccess('Todo ha sido reiniciado correctamente'); } // Mostrar mensaje de error function showError(message) { errorDiv.textContent = message; errorDiv.classList.add('show'); successDiv.classList.remove('show'); setTimeout(() => errorDiv.classList.remove('show'), 5000); } // Mostrar mensaje de éxito function showSuccess(message) { successDiv.textContent = message; successDiv.classList.add('show'); errorDiv.classList.remove('show'); setTimeout(() => successDiv.classList.remove('show'), 3000); } // Ocultar mensajes function hideMessages() { errorDiv.classList.remove('show'); successDiv.classList.remove('show'); } // Inicializar la aplicación init(); })();