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

Question

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

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

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

即。 [ test ]变为[ 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

这是WebKit浏览器（Chrome，Safari）中长期存在的错误：HTML标记会破坏加入行为。显式使用ZWJ（零宽度连接器）用于帮助（参见问题Partially colored Arabic word in HTML），但似乎错误变得更糟。

作为一种笨拙（但可能是唯一的）解决方法，您可以使用阿拉伯字母的上下文表单。这可以首先使用静态HTML标记和CSS进行测试，例如

بطﻠ<span style="color:red">ﺔ</span>

我在span元素内使用了U + FE94阿拉伯语字母TEH MARBUTA最终形式，而不是正常的U + 0629阿拉伯语字母TEH MARBUTA和U U + FEE0阿拉伯语字母LAM MEDIAL FORM而不是U + 0644 ARABIC LETTER LAM。

要在JavaScript中实现此功能，您需要在将标记插入单词阿拉伯字母时，根据其在单词中的位置，将中断前后的字符（由标记引起）更改为初始，中间或最终表示形式

Answer 2

我知道我给你的这个解决方案并不是很优雅，但有点有用，请告诉我你的想法：

<script>
    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("%u0640%u0629")+'</span>')+
    '<br>'+arabicWord.value.replace(/\u0647/,unescape('%u0629'));
}
</script>

<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>

Answer 3

你应该注意起始，中间，结束和孤立的角色。完整列表可用here

使用ufe94代替u0629

arabicWord.value.replace(/\u0647/,'<span style="color:red">'+ unescape("%ufe94")+'</span>')+

Answer 4

正如Jukka K. Korpela所示，这主要是大多数基于WebKit的浏览器（chrome，safari等）中的错误。

除了TAMDEED字符之外的简单黑客或获取阿拉伯字母的上下文表单将是零宽度木匠（‍或‍）之前/在这封信之后你想要被视为单一的阿拉伯语ligature - 两个字符组成另一个字符。例如

<p>عرب&#x200d;<span style="color: Red;">&#x200d;ي</span></p>  

演示：jsfiddle
另请参阅webkit bug报告。

Answer 5

而不是使用span，使用HTML5 ruby元素并添加Arabic-tatweel字符“”（U + 0640），你知道扩展字母的字符（shift + j）。

所以你的代码变成了：

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

这是一个更新的小提琴：http://jsfiddle.net/fjz5C/28/

Answer 6

我会尝试在字符之前和之后添加连字/ taweel 。它实际上不会解决问题，但它会让人很难注意到，因为它会强制 lam 进入内侧形式， taa marbuta 进入最终形式。如果它有效，那么比实际将字母转换为内侧或最终形式要脆弱得多。

但你似乎还有其他问题。我去了你的网站并输入了一个错误的 hadha ，只是为了看看它会用它做什么，它导致 ha 断开连接，这两个词都没有如果唯一的问题是格式化标签，那就没有意义。 （我在Mac上使用Firefox。）

祝你好运！