Basicamente, o que eu estou tentando fazer é o uso indevido de caracteres árabes.

Para facilitar a compreensão, tentarei explicar uma funcionalidade semelhante, mas para o inglês.

Imagine uma string com capitalização incorreta, e é necessário reescrevê-la corretamente, para que o usuário reescreva a string em uma caixa de entrada e submeta, o js verifica se algum caractere não foi corrigido, então exibe a string inteira com a letra corrigido e destacado em vermelho;

ou seja, [teste ] torna-se [THusa ]

Para fazer isso, eu estava verificando esses caracteres, e se foi detectado um caractere defeituoso, ele fica rodeado de extensão para ser colorido em vermelho.

Até aí tudo bem, agora, quando eu tento replicar isso para o idioma árabe, o caractere defeituoso fica separado da palavra, tornando-o ilegível.

Demonstração: 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;
}

<fieldset>
  <legend>English:</legend>
  <input id='englishWord' value='test' />
  <input type='submit' value='Check' onclick='check1()' />
  <p id='englishanswer'></p>
</fieldset>

<fieldset style="direction:rtl">
  <legend>عربي</legend>
  <input id='arabicWord' value='بطله' />
  <input type='submit' value='Check' onclick='check2()' />
  <p id='arabicanswer'></p>
</fieldset>

Observe ao testar a palavra árabe, o caractere estendido [primeira visualização] é separado do restante da palavra, enquanto o caractere não estendido [segunda visualização] aparece normalmente.

Editar: Visualizar para o problema [Chrome UA]