AngularJS - 텍스트 일부가 영어 이외의 언어로 깨졌습니다.

Question

아래 스 니펫에서 아랍어로 된 검색 입력과 일치하는 단어의 각 부분을 강조 표시하려고합니다. 본문. 이 문제를 어떻게 해결할 수 있습니까?

입력란에 مست을 입력하면 문제가 표시됩니다.

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>')