阿拉伯文字零宽度连接器在元素之间不起作用

Question

我正在尝试实现“智能搜索”功能，当用户键入关键字时，该功能会突出显示div中的文本匹配项。突出显示的工作原理是使用正则表达式匹配div中的关键字并将其替换为

<span class="highlight">keyword</span>

该应用程序支持英语和阿拉伯语文本。英语工作得很好，但是当突出显示阿拉伯语时，单词“打破”跨度上的单词连接，而不是保留一个连续的单词。

我正在尝试通过使用3个单独的Regex表达式并适当地为每种情况添加零宽度连接来解决问题：

• 在单词的开头匹配

  var startsWithRegex = new RegExp("((^|\\s)" + keyword + ")", "gi");

  var newSpan = "<span class='highlight'>$1&zwj;</span>&zwj;";

• 在一个单词的中间匹配（注意：单个单词中可以有多个middleOf匹配）

  var middleOfRegex = new RegExp("([^(^|\\s)])(" + keyword + ")([^($|\\s)])", "gi");

  var newSpan = "&zwj;$1&zwj;<span class='highlight'>&zwj;$2&zwj;</span>&zwj;$3&zwj;";

• 在单词结尾处匹配

  var endsWithRegex = new RegExp("(" + keyword + "($|\\s))", "gi");

  var newSpan = "&zwj;<span class='highlight'>&zwj;$1</span>";

startsWithRegex和endsWithRegex似乎都按预期工作，但是middleOfRegex不是。例如：

  

للأبد

转换为：

  

للأبد

关键字为：

  

ل

我尝试了‍的其他各种组合，但似乎没有任何效果。这是webkit的限制吗？是否有其他实现可以用来获得我想要的结果？

谢谢！

一些额外的说明：

• 这只适用于基于Webkit的浏览器（特别是我的Chrome），我们不能使用替代方案。我相信这个bug是问题的根本原因： https://bugs.webkit.org/show_bug.cgi?id=6148

• 这个问题是对这两个stackoverflow问题的扩展：

  Inserting HTML tag in the middle of Arabic word breaks word connection (cursive)

  Partially colored Arabic word in HTML

Answer 1

阿拉伯语是一种特殊情况，因为字母根据其在单词中的位置有不同的形式，我记得我用它的Unicode解决了这个问题，每个字母的形式都有不同的Unicode。 你可以在这里找到Unicode表

https://en.wikipedia.org/wiki/Arabic_script_in_Unicode 您可以使用

获取Unicode值

var code = $(selector).text().charCodeAt(0);

Answer 2

我建议不要分开这个连字，而是扩展<span>标签以包围整个lam + alif结构以突出显示。

根据http://www.unicode.org/versions/Unicode7.0.0/ch23.pdf#G25237，ZWJ在ل（lam）和ا（alif）之间作为ZWJ + ZWNJ + ZWJ。它应该被渲染为连接的lam，后跟连接的alif（لا），而不是像所需的连字（لا）。

对我来说，大多数浏览器/字体都符合此要求。

我的回答也适用于其他连字，如果你在你的应用程序中使用它们（非必需的，例如：mim + mim）。