Corrispondenza tra due frasi con JavaScript

Come verificare la corrispondenza o similarità tra due frasi in percentuale con JavaScript.

In questa guida ti spiegherò in che modo poter trovare e verificare la corrispondenza tra 2 stringhe con codice JavaScript. In dettaglio, faremo in modo che lo script esegua una verifica di similarità tra due stringhe e restituisca un valore in punti percentuale (0 – 100%) in base alla loro uguaglianza.

Come verificare la corrispondenza tra due stringhe con JavaScript

La nostra funzione di corrispondenza tra due frasi o stringhe ha diversi campi d’uso, principalmente utilizzato per verifica o controllo (se il valore in percentuale è uguale a 100%, applicabile anche alle strutture condizionali come “if”).

Questo script si divide in 3 passaggi:

  • Calcolo della differenza tra le due stringhe, restituisce un valore numerico.
  • Calcolo corrispondenza, valuta la differenza tra i valori e calcola il punteggio in base alla loro somiglianza (può essere impostata come Case-Sensitive o Case-Insensitive, si consiglia case-sensitive per una corrispondenza completa).
  • Restituzione del valore numerico (0 per nessuna similarità, 1 per stringhe identiche); convertito in percentuale.

Tutto questo in una singola funzione, integrabile facilmente all’interno di una pagina HTML.

corrispondenza completa tra 2 frasi
Corrispondenza 100%
corrispondenza parziale case sensitive
Corrispondenza parziale (case sensitive)
Bassa corrispondenza tra 2 frasi
Bassa corrispondenza

Codice (solo JS)

function controlloCorr(val1, val2) {
   var inp1 = val1;
   var inp2 = val2;

 //Per case-insensitive:
   // inp1 = inp1.toLowerCase();
   // inp2 = inp2.toLowerCase();

 var ccVal = new Array();
   for (var i = 0; i <= inp1.length; i++) {     
            var ultimoValore = i;    
            for (var j = 0; j <= inp2.length; j++) {       
                  if (i == 0)         
                      ccVal[j] = j;      
                        else {         
                          if (j > 0) {
                            var nuovoValore = ccVal[j - 1];
                            if (inp1.charAt(i - 1) != inp2.charAt(j - 1))
                                nuovoValore = Math.min(Math.min(nuovoValore, ultimoValore),   ccVal[j]) + 1;
                                ccVal[j - 1] = ultimoValore;
                                ultimoValore = nuovoValore;
         }
       }
     }
     if (i > 0)
       ccVal[inp2.length] = ultimoValore;
   }
   var cDiff = ccVal[inp2.length];
 var mag = inp1;
   var min = inp2;
   if (inp1.length < inp2.length) {
     mag = inp2;
     min = inp1;
   }
   var magLength = mag.length;
   if (magLength == 0) {
     return " - ";
   }
   var perc = ((magLength - cDiff) / parseFloat(magLength))*100;
   var result =  perc.toFixed(2) + "%";
   console.log(result);
 }

Note:

  • Il valore “val1” e “val2” equivalgono alle stringhe originali da verificare;
  • Per trasformare i valori in case-insensitive, applicare il metodo toLowerCase() ad entrami i valori (come scritto nei commenti iniziali del codice) (non si faranno distinzioni tra maiuscole e minuscole);
  • La percentuale di differenza non fa distinzioni di lunghezza tra le due stringhe. Il codice funziona sia se “val1” contiene più caratteri di “val2“, sia viceversa.

Codice (integrato HTML)

Il seguente listato è integrabile facilmente in una pagina HTML, poiché è già provvisto di tag e indentazione (copialo e incollalo nella tua pagina web, nella posizione che preferisci tra <body> e </body> ).

Prova il codice su codewith.it – vedi l’anteprima interattiva del codice.

Frase 1: <input type="text" id="primoInput" oninput="controlloCorr()" /><br>
Frase 2: <input type="text" id="secondoInput" oninput="controlloCorr()" /><br>
Corrispondenza (%): <span id="output">-</span>

<script>
function controlloCorr() {
   var inp1 = document.getElementById("primoInput").value;
   var inp2 = document.getElementById("secondoInput").value;
 //Per case-insensitive:
   // inp1 = inp1.toLowerCase();
   // inp2 = inp2.toLowerCase();
 var ccVal = new Array();
   for (var i = 0; i <= inp1.length; i++) {     var ultimoValore = i;     for (var j = 0; j <= inp2.length; j++) {       if (i == 0)         ccVal[j] = j;       else {         if (j > 0) {
           var nuovoValore = ccVal[j - 1];
           if (inp1.charAt(i - 1) != inp2.charAt(j - 1))
             nuovoValore = Math.min(Math.min(nuovoValore, ultimoValore),
                                    ccVal[j]) + 1;
           ccVal[j - 1] = ultimoValore;
           ultimoValore = nuovoValore;
         }
       }
     }
     if (i > 0)
       ccVal[inp2.length] = ultimoValore;
   }
   var cDiff = ccVal[inp2.length];
 var mag = inp1;
   var min = inp2;
   if (inp1.length < inp2.length) {
     mag = inp2;
     min = inp1;
   }
   var magLength = mag.length;
   if (magLength == 0) {
     return " - ";
   }
   var perc = ((magLength - cDiff) / parseFloat(magLength))*100;
   var result =  perc.toFixed(2) + "%";
   document.getElementById("output").innerHTML = result;
 }
</script>

Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!


Articoli recenti:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

CAPTCHA