Construyamos una Herramienta de Comparación de Texto (Usando HTML, CSS, JS)

En este tutorial, vamos a crear nuestra propia herramienta de comparación de texto desde cero. Esta herramienta permitirá a los usuarios comparar dos textos y ver las diferencias de manera clara y visual.

Estructura HTML Básica

Primero, creemos la estructura básica de nuestra herramienta:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comparador de Texto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>Comparador de Texto</h1>
        <div class="input-section">
            <div class="input-group">
                <label for="originalText">Texto Original</label>
                <textarea id="originalText"></textarea>
            </div>
            <div class="input-group">
                <label for="modifiedText">Texto Modificado</label>
                <textarea id="modifiedText"></textarea>
            </div>
        </div>
        <button id="compareBtn">Comparar Textos</button>
        <div id="result" class="result-section"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Estilizando con CSS

Ahora, vamos a añadir estilos para hacer que nuestra herramienta se vea profesional:

/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f5f5f5;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Estilos de entrada */
.input-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

.input-group {
    flex: 1;
}

textarea {
    width: 100%;
    height: 300px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    resize: vertical;
}

/* Estilos de botón */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #45a049;
}

/* Estilos de resultado */
.result-section {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.diff-added {
    background-color: #e6ffe6;
    color: #006600;
}

.diff-removed {
    background-color: #ffe6e6;
    color: #cc0000;
}

Implementando la Lógica con JavaScript

Finalmente, vamos a implementar la lógica de comparación:

document.getElementById('compareBtn').addEventListener('click', function() {
    const originalText = document.getElementById('originalText').value;
    const modifiedText = document.getElementById('modifiedText').value;
    
    const diff = findDifferences(originalText, modifiedText);
    displayDifferences(diff);
});

function findDifferences(original, modified) {
    const originalLines = original.split('\n');
    const modifiedLines = modified.split('\n');
    const differences = [];
    
    let i = 0, j = 0;
    while (i < originalLines.length || j < modifiedLines.length) {
        if (i >= originalLines.length) {
            differences.push({ type: 'added', line: modifiedLines[j] });
            j++;
        } else if (j >= modifiedLines.length) {
            differences.push({ type: 'removed', line: originalLines[i] });
            i++;
        } else if (originalLines[i] === modifiedLines[j]) {
            differences.push({ type: 'unchanged', line: originalLines[i] });
            i++;
            j++;
        } else {
            differences.push({ type: 'removed', line: originalLines[i] });
            differences.push({ type: 'added', line: modifiedLines[j] });
            i++;
            j++;
        }
    }
    
    return differences;
}

function displayDifferences(differences) {
    const resultDiv = document.getElementById('result');
    resultDiv.innerHTML = '';
    
    differences.forEach(diff => {
        const line = document.createElement('div');
        line.textContent = diff.line;
        line.className = `diff-${diff.type}`;
        resultDiv.appendChild(line);
    });
}

Mejorando la Herramienta

Para hacer nuestra herramienta más robusta, podemos añadir varias mejoras:

**Soporte para Comparación de Palabras:** Implementar comparación a nivel de palabra en lugar de solo líneas.
**Modo de Comparación Dividida:** Añadir una opción para ver los textos lado a lado.
**Resaltado de Sintaxis:** Añadir resaltado de sintaxis para código fuente.
**Exportación de Resultados:** Permitir exportar las diferencias en varios formatos.
**Historial de Comparaciones:** Guardar comparaciones recientes para referencia futura.

Consideraciones de Rendimiento

Al trabajar con textos grandes, es importante considerar el rendimiento:

**Procesamiento por Lotes:** Procesar el texto en lotes para evitar bloqueos de la interfaz.
**Memoización:** Almacenar en caché resultados de comparaciones frecuentes.
**Lazy Loading:** Cargar resultados gradualmente para textos muy grandes.
**Web Workers:** Usar Web Workers para procesar comparaciones en segundo plano.

Conclusión

Hemos creado una herramienta de comparación de texto funcional usando HTML, CSS y JavaScript. Esta implementación básica puede ser extendida y mejorada según tus necesidades específicas. Algunas ideas para futuras mejoras incluyen:

Añadir soporte para diferentes algoritmos de comparación
Implementar comparación de archivos
Añadir opciones de personalización de la visualización
Integrar con sistemas de control de versiones

¡Espero que este tutorial te haya sido útil! Si tienes alguna pregunta o sugerencia, no dudes en dejarla en los comentarios.