Comparare due testi carattere per carattere in Javascript

Mattepuffo's logo
Comparare due testi carattere per carattere in Javascript

Comparare due testi carattere per carattere in Javascript

Programmazione, Javascript - AJAX

Quello che vogliamo fare oggi, non è una comparazione "secca" tra due testi.

Ma vogliamo compararli carattere per carattere, per verificare se ogni carattere del primo testo è uguale al carattere del secondo testo.

Prendendo, ovviamente, in considerazione la posizione del carattere all'interno deo testi.

Tutto questo usando Javascript!

Cominciamo dalla pagina HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>TEST</title>
        <script src="script.js"></script>
        <script>
            var testo1 = 'Tc0WychTF6YyRGkab4e6';
            var testo2 = 'Tc0WychTF7YyGhkab7e6';
        </script>
        <style>
            div {
                width: 40%;
                float: left;
                border: 1px solid black;
                margin-right: 10px;
            }
        </style>
    </head>
    <body onload="diffText(testo1, testo2);">
        <div id="res1"></div>
        <div id="res2"></div>
    </body>
</html>

In pratica abbiamo due div nei queli visualizzaremo i risultati; i testi da comparare li ho messi fissi, ma potreste prenderli da caselle di input o textarea.

Al caricamento della pagina richiamiamo questa funzione (che sta nel file script.js):

function diffText(testo1, testo2) {
    let arr1 = Array.from(testo1);
    let arr2 = Array.from(testo2);
    var res1 = '';
    var res2 = '';

    for (var i = 0; i < arr1.length; i++) {
        if (arr1[i] != arr2[i]) {
            res1 += '<b>' + arr1[i] + '</b>';
            res2 += '<b>' + arr2[i] + '</b>';
        } else {
            res1 += arr1[i];
            res2 += arr2[i];
        }
    }

    document.getElementById('res1').innerHTML = res1;
    document.getElementById('res2').innerHTML = res2;
}

In pratica:

  • trasforiamo i due testi in array con Array.from
  • poi iteriamo sul primo
  • ad ogni iterazione controlliamo che il carattere del primo array sia uguale al carattere del secondo array
  • in base al risultato dell'uguaglianza creiamo la stringa mettendo il carattere in grassetto o meno
  • infine mettiamo nei rispettivi div i rispettivi risultati

Ovviamente questo codice può essere migliorato in base alle vostre esigenze; ad esempio non tiene in considerazione la lunghezza delle stringhe, e compara solo il primo testo con il secondo (e non viceversa).

Dipende da quello che vi serve.

Enjoy!

Condividi

Commentami!