Выделите слова, не соответствующие заданной строке

Question

Что я бы хотел сделать: когда пользователь заканчивает вводить какой-то текст, я хочу, чтобы этот текст был протестирован против другой строки. Если они не совпадают, я хочу, чтобы символы, не прошедшие тест, были выделены / окрашены в красный цвет. До сих пор мне удалось придумать только следующий код

let string = "The quick brown fox jumps over the lazy dog";

let input = document.querySelector(".js-textarea");

let receivedValue = "";

let checkValue = function() {
  let regex = new RegExp(string,"g");
 
  receivedValue = input.value;
  if(!regex.test(receivedValue)) {
    input.classList.add("error");
  };
}

input.addEventListener("change",checkValue);

.error {
  border: 1px solid red;
}

<div class="textarea-block">
  <textarea class="js-textarea"></textarea>
</div>

Просто чтобы увидеть, действительно ли это тестируется, я раскрашиваю рамку; но как мне получить символы / слова, не прошедшие проверку?

Answer 1

Я просто использовал красный стиль для всего div, а затем обернул совпавший текст полосой со стилем черный. Также добавлен ^ $ для принудительного сопоставления всей строки для теста, поэтому вся строка должна соответствовать, чтобы она игнорировалась.
Вы также можете использовать '(. *?) (' + String + ') (. *?) 'и оберните 1-ю и 3-ю группы захвата диапазоном ошибок.

Я не уверен, что это то, что вы ищете, но примерно угадываю, что вы пытаетесь сделать:

let string = "The quick brown fox jumps over the lazy dog";

let input = document.querySelector(".js-textarea");

let receivedValue = "";

let checkValue = function() {
  let regex1 = new RegExp(string,"g");
  let regex = new RegExp('^'+string+'$',"g");
 
  receivedValue = input.value;
  if(!regex.test(receivedValue)) {
      document.getElementById('errorbox').innerHTML=receivedValue.replace(regex1,'<span class="matches">$&</span>');
//    input.classList.add("error");
  }
}

input.addEventListener("change",checkValue);
checkValue()

.error {
  border: 1px solid red;
}

.matches {
   color: black
}

<div class="textarea-block">
  <textarea class="js-textarea">The quick brown fox jumps over the lazy dog. Jack</textarea>
</div>

<span id="errorbox" style="color:red"></span>

Answer 2

Элемент textarea не позволяет применить стиль к отдельным словам, поэтому проще всего добавить сообщение об ошибке под элементом ввода. Этот ответ показывает, как этого можно достичь.

Однако есть трудный путь.

Вы можете использовать элемент HTML с атрибутом contenteditable. Это позволяет пользователям редактировать содержимое элемента HTML. Если вы зададите ему границу и используете белый фон, он будет выглядеть как элемент textarea.

В этом примере я решил выделить зеленым цветом текст, соответствующий строке, а все остальное - красным.

let string = "The quick brown fox jumps over the lazy dog";

let input = document.querySelector("div");

input.addEventListener("focus", () => {
  // Remove styling so as to not distract the user.
  for (let i = 0; i < input.children.length; i++) {
      input.children[i].className = "";
  }
});

input.addEventListener("blur", () => {
  // We will recreate styling tags. This is under the assumption that the
  // element will not have a lot of text.
  let value = input.textContent;
  input.textContent= "";

  let failPoint = -1;

  for (var i = 0; i < string.length && i < value.length; i++) {
      if (value[i].toLowerCase() !== string[i].toLowerCase()) {
          failPoint = i;
          break;
      }
  }

  let good = document.createElement("span");
  good.classList.add("success");
  good.textContent = value.substring(0, failPoint !== -1 ? failPoint : value.length);
  input.append(good);

  if (failPoint !== -1) {
      let bad = document.createElement("span");
      bad.classList.add("error");
      bad.textContent = value.substring(i);
      input.append(bad);
  }
});

.editable {
    border: 1px solid #ccc;
    width: 300px;
    height: 100px;
    overflow: auto;
    background: white;
    color: #020202;
    padding: 2px;
    word-break: break-all;
    font-family: sans-serif;
}

.success {
  color: green;
}

.error {
  color: red;
}

<div class="editable" contenteditable spellcheck="false"></div>