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

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问题的扩展:

  在阿拉伯语单词中间插入HTML标记会中断单词连接(草书)

  HTML中的部分彩色阿拉伯语单词

Answer 1

阿拉伯语言是一种特殊情况，因为字母根据其在单词中的位置而具有不同的形式，我记得我使用其 Unicode 解决了这样的问题，每个字母 \xe2\x80\x99s 形式都有不同的 Unicode。\n您可以在此处找到 Unicode 表

\n\n

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

\n\n

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

\n