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

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!


Share this Post

Commentami!