为什么阿拉伯字符在设计单个阿拉伯字符时表现为单独的字符？

Question

基本上我想要完成的是阿拉伯字符误用荧光笔!

为了便于理解,我将尝试解释类似的功能,但对于英语.

想象一个错误大小写的字符串,并且需要正确地重写它,因此用户在输入框中重写字符串并提交,js检查是否有任何字符未被纠正然后它显示整个字符串与那些字母纠正并以红色突出显示;

即[ 测试 ]成为[ T est ]

为了做到这一点,我正在检查那些字符,如果检测到有缺陷的字符,它会被跨度包围,以红色着色.

到目前为止一切都那么好,现在当我尝试用阿拉伯语复制它时,错误的字符与单词分离,使其无法读取.

---

演示: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>

请注意,在测试阿拉伯语单词时,跨区字符[第一个预览]与单词的其余部分分开,而非跨区字符[第二个预览]正常显示.

---

编辑:预览问题[Chrome UA]

Answer 1

我知道我给你的这个解决方案不是很优雅，但它有点有效，所以告诉我你的想法：

\n\n

<script>\n    function check1(){\n    englishanswer.innerHTML = englishWord.value.replace(/t/,\'<span style="color:red">T</span>\');\n}\nfunction check2(){\narabicanswer.innerHTML = \n    arabicWord.value.replace(/\\u0647/,\'<span style="color:red">\'+\n    unescape("%u0640%u0629")+\'</span>\')+\n    \'<br>\'+arabicWord.value.replace(/\\u0647/,unescape(\'%u0629\'));\n}\n</script>\n\n<fieldset>\n<legend>English:</legend>\n<input id=\'englishWord\' value=\'test\'/>\n<input type=\'submit\' value=\'Check\' onclick=\'check1()\'/>\n<p id=\'englishanswer\'></p>\n</fieldset>\n\n<fieldset style="direction:rtl">\n<legend>\xd8\xb9\xd8\xb1\xd8\xa8\xd9\x8a</legend>\n<input id=\'arabicWord\' value=\'\xd8\xa8\xd8\xb7\xd9\x84\xd9\x80\xd9\x87\'/>\n<input type=\'submit\' value=\'Check\' onclick=\'check2()\'/>\n<p id=\'arabicanswer\'></p>\n</fieldset>\n

\n