По сути, я пытаюсь добиться того, чтобы арабские символы неправильно использовали подсветку!

Чтобы было легче понять, я попытаюсь объяснить аналогичную функциональность, но для английского.

Представьте строку с неправильной заглавной буквой, и ее нужно правильно переписать, поэтому пользователь переписывает строку в поле ввода и отправляет js проверяет, есть ли символt исправлено, затем отображается вся строка с исправленными буквами и выделенным красным цветом;

то есть [тестовое задание ] становится [Tстандартное восточное время ]

Для этого я проверял эти символы, и если обнаруживался неисправный символ, он окружался диапазоном, окрашенным в красный цвет.

Пока все хорошо, теперь, когда я пытаюсь повторить это для арабского языка, неисправный символ отделяется от слова, делая его нечитаемым.

Демо-версия:jsfiddle

function check1() {
  englishanswer.innerHTML = englishWord.value.replace(/t/, '<span style="color:red">T</span>');
}

function check2() {
  arabicanswer.innerHTML =
    arabicWord.value.replace(/\u0647/, '<span style="color:red">' +
      unescape("%u0629") + '</span>') +
    '<br>' + arabicWord.value.replace(/\u0647/, unescape('%u0629'));
}

fieldset {
  border: 2px groove threedface;
  border-image: initial;
  width: 75%;
}
input {
  padding: 5px;
  margin: 5px;
  font-size: 1.25em;
}
p {
  padding: 5px;
  font-size: 2em;
}

  English:
  
  
  <p id="englishanswer"></p>



  عربي
  
  
  <p id="arabicanswer"></p>

Обратите внимание, что при тестировании арабского слова составной символ [первый предварительный просмотр] отделяется от остальной части слова, тогда как ненаряженный символ [второй предварительный просмотр] отображается нормально.

Изменить: Предварительный просмотр для проблемы [Chrome UA]