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.
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:
- Recensione In Fuga. Ciclo Le Cronache dell’Ultimo Druido di Kevin Hearne
- Recensione Fool Moon di Jim Butcher
- Recensione Storm Front di Jim Butcher
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web