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

function replacer(el){
  var i, node, span;
  if(el.hasChildNodes()) {
    for(i=0; i<el.childNodes.length; i++) {
      node = el.childNodes[i];
      if(node.nodeType === Node.ELEMENT_NODE) {
        if( !!~['SCRIPT','NOSCRIPT'].indexOf(node.nodeName)) continue;
        replacer(node);
      } else if( node.nodeType === Node.TEXT_NODE) {
        if(node.nodeValue.match(/^\s+$/)) continue;
        span = document.createElement("span");
        span.innerHTML = node.nodeValue.replace(/([а-яА-Я]+)/ug, '<i>$1</i>');
        el.insertBefore(span, node);
        el.removeChild(node);
      }
    }
  }
}

replacer(document.body);

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(' ');
});

const STATE_SELECT = 1;
const STATE_CHECK = 2;
var state = STATE_SELECT;

var rrr = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("red");
};
var ggg = function() {
  if(state === STATE_CHECK) return;
  $(this).toggleClass("green");
};
var yyy = function() {
  $(".green").toggleClass("yellow");
  if(state === STATE_CHECK) {
    state = STATE_SELECT;
  } else {
    state = STATE_CHECK;  
  }
};

$("div").hover(rrr);
$("div").click(ggg);
$("button").click(yyy);

var player = {x:200, y:200, el:document.getElementById('player')};
player.el.style.left = '' + Math.round(player.x) + 'px';
player.el.style.top  = '' + Math.round(player.y) + 'px';

var delta = {x:0, y:0};

document.addEventListener('keydown', function(e){
  if(     e.key == 'ArrowRight') delta.x = 1;
  else if(e.key == 'ArrowLeft')  delta.x = -1;
  else if(e.key == 'ArrowUp')    delta.y = -1;
  else if(e.key == 'ArrowDown')  delta.y = 1;
});

document.addEventListener('keyup', function(e){
  if(     e.key == 'ArrowRight') delta.x = 0;
  else if(e.key == 'ArrowLeft')  delta.x = 0;
  else if(e.key == 'ArrowUp')    delta.y = 0;
  else if(e.key == 'ArrowDown')  delta.y = 0;
});

var ts = null;
function step(timestamp) {
  if(!ts) ts = timestamp;
  var passed = timestamp - ts;
  //if(passed < 200) return window.requestAnimationFrame(step);
  ts = timestamp;
  if(delta.x || delta.y) {
    player.x += delta.x * passed / 10;
    player.y += delta.y * passed / 10;
    player.el.style.left = '' + Math.round(player.x) + 'px';
    player.el.style.top  = '' + Math.round(player.y) + 'px';
  };
  window.requestAnimationFrame(step);
}

window.requestAnimationFrame(step);