2

以下のスニペットでは、アラビア語の検索入力に一致する単語の各部分を強調表示しようとしていますが、これによりテキスト内で文字が分離されます。どうすればこの問題を解決できますか?

مستフィールドに入力してみると、問題が表示されます。

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>

4

1 に答える 1

2

ハイライト スパンの前と最後にゼロ幅ジョイナーをいくつか追加して、文字が適切に結合されるようにします。

text = text.replace(new RegExp('(' + searchSrting[i] + ')', 'gi'),
   '&zwj;<span class="highlighted">$1&zwj;</span>')
于 2016-08-21T12:46:48.290 に答える