javascript - AngularJS - 突出显示部分文本会导致非英语语言中的单词损坏

Question

在下面的代码片段中，我尝试突出显示与阿拉伯语搜索输入匹配的单词的每个部分，但这会使字母在文本中分开。我该如何解决这个问题？

尝试在字段中输入msis，你就会发现问题。

angular.module("myApp", [])
.controller("main", function($scope){
$scope.content="تتيح لك إدارة المستخدمين العديد من الخدمات الأساسية كعرض مستخدمي النظام والتعديل عليها وحذفها.. إضافة إلى عمليات الفلترة عليهابناء على عدة خيارات متاحة "
})
 .filter('highlight', function ($sce) {
        return function (text, searchSrting) {
            if(searchSrting){
                searchSrting = searchSrting.split(/\s+/);
                if(typeof text !== "undefined")
                    for (var i = 0; i < searchSrting.length; i++) {
                        text = text.replace(new RegExp('(' + searchSrting[i] + ')', 'gi'),
                            '<span class="highlighted">$1</span>')
                    }
                return $sce.trustAsHtml(text)
            }
        }
    })

.highlighted{
  background-color : yellow

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>

<div ng-app="myApp">
<div ng-controller="main">
  <label>search</label>
  <input ng-model="searchString"/>
  <div ng-if="!searchString">{{content}}</div>
  <div ng-if="searchString" ng-bind-html="content | highlight:searchString"></div>

  </div>
</div>

Answer 1

添加几个 zero-width-joiners在突出显示范围之前和结尾处以使角色正确连接:

text = text.replace(new RegExp('(' + searchSrting[i] + ')', 'gi'),
   '&zwj;<span class="highlighted">$1&zwj;</span>')