Как выделить слово с цветом?

Question

[kikosko]

Подскажите как выделить слово красным в «div», после нажатия пробела, если оно неправильно введено с input или зеленый, если правильно ?

<div id="text">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium alias aperiam commodi
    consequatur corporis cum dolores eaque in labore molestias nam odio optio quas, quis voluptates!
    Architecto fuga impedit voluptatum.
</div>      
<form action="" id="form">
    <input type="text" id="text_input" onkeydown="getChar(this);">
</form>

var arr = [];
var i = 0;
window.onload = function () {
    var text = document.getElementById("text");
    txt = text.textContent || text.innerText;
    arr = txt.split(' ');
    console.log(arr);
    //alert(txt.substring(0,3));
};
function getChar(e) {

    if (event.which == 32) {
        if (e.value == arr[i]){
  i++;
            document.getElementById('form').reset();
            event.preventDefault();
        }
    }
}

Comments

[Сергей Соколов]

Ожидается, что будут набивать текст 1:1 как в div'е?

[kikosko]

Сергей Соколов, да, как бы тренажер

[Манучехр Жалолов]

Так вопрос:
У вас там фильтр слов есть либо какой та алгоритм есть что бы проверят!? (хочу помочь но не как не понял суд вашего вопроса)

[kikosko]

Манучехр Жалолов, if (e.value == arr[i]){

i++;
document.getElementById('form').reset();
event.preventDefault();
}
Эта строчка срабатывает, когда слово вводиться верно и оно пропадает с инпута при этом условии, если был нажат пробел, нужно что бы еще слово в диве после правильного ввода окрашивалось в зеленый цвет, так же при ошибке, слово становилось красным

[kikosko]

arr[i].style.color = 'green'; когда добавлю в условие правильного слова, то не работает

Answer 1

[Сергей Соколов]

Вместо клавишных событий можно слушать событие input – когда значение меняется.

Две строки – образец и введённый текст – бить на слова по пробелам. Если последний введённый символ не пробел, то последнее введенное слово проверять пока рано. Несовпавшее слово заменяется на обёрнутое в тег.

примерно так

const dGet = document.getElementById.bind(document);
const reSpace = /\s+/;
const div = dGet('text');
const text = div.innerText;
const words = text.trim().split(reSpace);
dGet('text_input').addEventListener('input', function(e){
  var i, myWords = e.target.value.trim().split(reSpace),
  theWords = words.slice();
  var toCheck = e.target.value.substr(-1) === ' ';
  if(!toCheck) myWords.length--;
  for(i=0; i<Math.min(myWords.length, words.length); i++) {
    if(words[i] !== myWords[i]) {
      theWords[i] = '<i>' + words[i] + '</i>';
    } else {
      theWords[i] = '<b>' + words[i] + '</b>';
    }
  }
  div.innerHTML = theWords.join(' ');
});

Fiddle

Answer 2

[Манучехр Жалолов]

if (e.value == arr[i]){
i++;
document.getElementById('form').reset();
event.preventDefault();
}
Эта строчка срабатывает, когда слово вводиться верно и оно пропадает с инпута при этом условии, если был нажат пробел, нужно что бы еще слово в диве после правильного ввода окрашивалось в зеленый цвет, так же при ошибке, слово становилось красным

ну типо раскрасит и всё?

нужно что бы еще слово в диве после правильного ввода окрашивалось в зеленый цвет, так же при ошибке, слово становилось красным

if (e.value == arr[i]){
$("#text").style.background = "green";
i++;
document.getElementById('form').reset();
event.preventDefault();
} else $("#text").style.background = "red"