14

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

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

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

即[测试]变成[测试]

为此，我正在检查那些字符，如果检测到有缺陷的字符，它会被 span 包围，以红色显示。

到目前为止一切顺利，现在当我尝试将其复制为阿拉伯语时，错误的字符会与单词分离，使其无法阅读。

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

请注意，在测试阿拉伯语单词时，spanned char [first preview] 与单词的其余部分是分开的，而 non-spanned char [second preview] 正常显示。

编辑：问题预览 [Chrome UA]

在此处输入图像描述

4

6 回答 6

3

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

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

بطﻠ&lt;span style="color:red">ﺔ&lt;/span>

在这里，我在span元素内部使用 ﺔ U+FE94 ARABIC LETTER TEH MARBUTA FINAL FORM 代替正常的 U+0629 ARABIC LETTER TEH MARBUTA 和 ﻠ U+FEE0 ARABIC LETTER LAM MEDIAL FORM 代替 U+0644 ARABIC LETTER LAM。

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

于 2012-10-15T05:36:47.940 回答
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>
于 2012-10-14T21:52:40.787 回答
1

你应该照顾好开始、中间、结束和孤立的字符。完整列表可在此处获得

使用ufe94代替u0629

arabicWord.value.replace(/\u0647/,'<span style="color:red">'+ unescape("%ufe94")+'</span>')+
于 2012-10-14T22:04:33.207 回答
1

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

除了 TAMDEED 字符或获取阿拉伯字母的上下文形式之外，一个简单的技巧是将零宽度连接符（&zwj;或&#x200d;）放在要被视为单个阿拉伯连字的字母之前/之后- 两个字符组成另一个。例如 

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

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

于 2012-12-01T09:43:21.600 回答
0

我会尝试在角色之前和之后添加连字/ taweel 。它实际上并不能解决问题，但它会让人很难注意到，因为它会迫使lam进入中间形式，而taa marbuta进入最终形式。如果它有效，那将比将字母实际转换为它们的中间形式或最终形式要容易得多。

不过，您似乎还有其他问题。我去了你的网站，输入了一个拼写错误的hadha，只是想看看它会做什么，这导致ha在两个单词中都断开了连接，如果唯一的问题是格式标签，这没有任何意义。（我在 Mac 上使用 Firefox。）

在此处输入图像描述

祝你好运！

于 2012-10-16T18:43:56.707 回答
0

不要使用 span，而是使用 HTML5 ruby​​ 元素并添加阿拉伯文字符“ـ”（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/

于 2012-10-14T22:31:19.017 回答