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

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)，我们无法使用替代方案。我相信这个错误是问题的根本原因: 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);