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

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

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

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

我正在尝试通过使用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

最佳答案

阿拉伯语是一种特殊情况，因为字母在单词中的位置会有所不同，我记得我使用Unicode解决了这个问题，每个字母的格式都有不同的Unicode。
您可以在此处找到Unicode表

https://en.wikipedia.org/wiki/Arabic_script_in_Unicode
您可以使用以下方法获取Unicode值

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