Как в данном случае реализовать замену с помощью метода replace()?

Question

Цель : когда я ввожу текст в <textarea>, он сравнивается с текстом в блоке <p> если текст совпадает, то текст в <p> блоке окрашивается в зелёный буква за буквой НО если появляется хотя-бы одна буква, которая отличается от того, что есть в <p> текст в <p> блоке начиная с этого символа окрашивается в красный цвет! В принципи реализация уже работает, НО никак не могу придумать, как можно сделать, чтобы при вводе "касячного текста" помимо того, что текст в блоке <p> начинал окрашиваться в красный цвет, предшествующий ему текст оставался зелёным, в общем для тех, кто недопонял, вот код, попробуйте попечатайте, и всё сами поймете, наверное!

let _o = document.querySelector('.out');
let input = document.querySelector('.input');
let outStart = _o.innerHTML;
let cS; // переменная нужна для сохранения ПРАВИЛЬНОГО состояния т.е. до ошибки

input.addEventListener('keyup', function(evt) {
  _o.innerHTML = outStart;
  _o.innerHTML = _o.innerHTML.replace(evt.target.value, function(m) {
    return '<span class="sp" style="background:green">' + m + '</span>';
  })
  if (document.querySelector('.sp')) // только тогда когда текст в блоке <p> содержит <span> мы сохраняем его содержимое в переменную "правильного" состояния
    cS = document.querySelector('.sp');

  if (evt.target.value !== _o.textContent.slice(0, evt.target.value.length)) {

    _o.innerHTML = _o.textContent.replace(
      _o.textContent.slice(cS.textContent.length, (evt.target.value.length - cS.textContent.length + cS.textContent.length)),
      function(m) {
        return '<span style="background:red">' + m + '</span>';
      }
    )
  };
});

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.input {
  width: 300px;
  height: 200px;
}

.out {
  font-size: 24px;
  font-family: 'Arial';
}

<p class='out'>Javascript still strong</p>
<textarea class='input'></textarea>

Ещё раз для тех, кто недопонял, печатаю в <textarea> текст, схожий с блоком <p>, если текст совпадает, в блоке <p> он подсвечивается зелёным, если допускаю ошибку НУЖНО чтобы правильный отрезок текста остался зелёным, а то, что я уже написал сверх него (неправильные буквы) становились красными! Просьба отталкиваться от моей реализации, изменив по по звожмности (добавив) что-либо именно в мой скрипт!

Answer 1

Если не совсем отталкиваться от вашей реализации:

let _o = document.querySelector('.out');
let input = document.querySelector('.input');
let text = _o.textContent;

input.addEventListener('input', function(evt) {
  let pos = 0;
  let len = Math.min(input.value.length, text.length);

  for (let i = 0; i < len; i++) {
    if (text[i] != input.value[i]) {
      break;
    }
    pos++;
  }

  if (!len) {
    _o.innerHTML = text;
  } else {
    _o.innerHTML = '<span style="background:green">' + text.substring(0, pos) + '</span>';
    _o.innerHTML += '<span style="background:red">' + text.substring(pos, len) + '</span>';
    _o.innerHTML += text.substring(len);
  }
});

.input {
  width: 300px;
  height: 200px;
}

.out {
  font-size: 24px;
  font-family: 'Arial';
}

.out span {
  color: white;
}

<p class='out'>Javascript still strong</p>
<textarea class='input'></textarea>

Answer 2

let _o = document.querySelector('.out');
let input = document.querySelector('.input');
let outStart = _o.innerHTML;

input.addEventListener('keyup', colors);

function colors(evt) {
  let green = "";
  let red = "";
  for (let i = 0; i < input.value.length; ++i) {
    if (input.value[i] == outStart[i]) green += input.value[i];
    else{ 
        red = outStart.substring(green.length, input.value.length);
        i = input.value.length;
      }
  }

  _o.innerHTML = '<span class="sp">' + green + '</span>';
  _o.innerHTML += '<span class="spr">' + red + '</span>';
  _o.innerHTML += outStart.substring((green + red).length);

}

* {
  box-sizing: border-box;
  padding: 0px;
  margin: 0px;
}

.input {
  width: 300px;
  height: 200px;
}

.out {
  font-size: 24px;
  font-family: 'Arial';
}

.sp {
  background: green;
}

.spr {
  background: red;
}

<p class='out'>Javascript still strong</p>
<textarea class='input'></textarea>

БЛОГ НА HUSL

Как в данном случае реализовать замену с помощью метода replace()?

Ответы (2 шт):