JS función no cambia el color del texto HTML si se repite

Oleg Gulevskyy:

Luché para seleccionar un título para esta pregunta, pero haré mi mejor esfuerzo para explicar a continuación.

Tengo este comprobador de hecho, que comprueba palabras de una entrada de uno y si la palabra de entrada correctamente - que cambia el color a verde. Lo hace por la entrada de división en palabras separadas y colocarlo en la matriz.

Lo que veo es que aunque si hay una palabra repeatitive en el texto que estoy comparando palabras de entrada en contra, eso no cambia el color. ¿Por qué sería? La forma en que veo mi función de cambiar el color toma posición palabras en la matriz, no su valor, y luego simplemente añade el color de un elemento HTML.

let text = document.querySelector('.card-body').innerHTML;
let splitText = text.split(' ');

let userInput = document.querySelector('.form-control');
userInput.addEventListener('input', acceptInput)

let correctWords = [];
let mistakes = 0;
let words = [];


function acceptInput() {
    userInput.onkeydown = function(e){
        if(e.keyCode == 32){
            words = userInput.value.split(' ');        
            console.log(words); 
            console.log(splitText);
            let position = words.length-1;
            compareWordsArrays(position);
        }
    }
}

function compareWordsArrays(position) {
    
    for(i = position; i < words.length; i++) {
        if(words[i] === splitText[i]) {
            console.log(`Correct word detected: ${words[i]}`);
            let wordIndex = words.indexOf(words[i]);
            changeColor(wordIndex);

        } else {
            console.log('Incorrect word;');
            mistakes += 1;
            console.log(mistakes);
            
        }
    }
    
}

function changeColor(pos) {
    splitText[pos]="<font color=green>"+splitText[pos]+"</font>";
    let c = splitText.join(' ');
    document.querySelector('.card-body').innerHTML = c;
}

 <div class="card">
    <div class="card-body">Random text that appears from some generator or some stuff. But it needs to have quite few text, actually.
     </div>
</div>
<input type="text" class="form-control">

En mi ejemplo se puede ver la palabra "algunos" repest dos veces en la oración, y la segunda palabra "algunos" no está siendo cambiado a pesar de que no cuenta segunda palabra como un error ni espero que sea lo suficientemente claro.

Laurent S.:

Sólo el cambio

if(words[i] === splitText[i]) {
        console.log(`Correct word detected: ${words[i]}`);
        let wordIndex = words.indexOf(words[i]);
        changeColor(wordIndex);

    }

A

if(words[i] === splitText[i]) {
        console.log(`Correct word detected: ${words[i]}`);
        changeColor(i);

    }

Como:

• No tiene sentido buscar un índice que ya conoce ( ien este caso)
• indexOf sólo devuelve el primer índice de ocurrencia, por lo tanto, la secuencia de comandos de trabajo sólo para la primera aparición ...