データのレンダリング時に検索入力を強調表示するにはどうすればよいですか？

Question

searchStrはユーザー入力の検索キーワードです。サーバーからの応答が返されたらユーザー入力を強調表示したいsearchStrユーザーは何が検索されているのかを確認して、その応答部分を比較できます。だから私の場合、私はちょうど応答の一部となる検索された文字列を強調したいと思います。

私は、文字列

info|<n/a>|[routes.event] ########## Message added to processing queue ########## e63637db-aa33-4aed-b5b0-51a0764dc7f1 { workerId: 3, pid: 33029 }を持っていると仮定し、私はsearchStr

main.htmlを

<tr ng-repeat="item in showMessages | filter:searchStr" > 
        <td >{{item.filename}}</td> 
        <td class="serverResults" ng-bind-html="item.value | trusted">{{item.value}}</td> 
       </tr> 

ctrl.js

$scope.$on('displaySearchResults',function(e,data){ 
     $scope.searchStr = data.searchStr; 
     $scope.showMessages = data.messageObj; 
    }) 

フィルターになりますe63637db-aa33-4aed-b5b0-51a0764dc7f1 _idを強調したいことができます.js

angular.module('App').filter('trusted', ['$sce', function ($sce) { 
    return function(text,phrase) { 
    if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'), 
        '<span class="highlighted">$1</span>'); 

     var content = text.toString() 
     console.log('Content',content); 
     var data = content.replace(/[|&;$%@"<>()+,]/g, ""); 
     return $sce.trustAsResourceUrl(data); 
    }; 
}]); 

Answer 1

ここでは、ハイライトをどのように達成するかを示すサンプルを示します。それは私が単品で配列を作成しているにすぎないが、そのアプローチを示しているからだ。 を挿入した後に適用すると、<と>の文字が置換正規表現によって削除されるため、予約済み文字の置換を最初に適用したいとします。

angular.module('app', []) 
 
    .controller('ctrl', function($scope) { 
 
    $scope.showMessages = [{ 
 
     value: 'info|<n/a>|[routes.event] ########## Message added to processing queue ########## e63637db-aa33-4aed-b5b0-51a0764dc7f1 { workerId: 3, pid: 33029 }' 
 
    }]; 
 
    $scope.searchStr = 'e63637db-aa33-4aed-b5b0-51a0764dc7f1'; 
 
    }) 
 
    .filter('trusted', function($sce) { 
 
    return function(text, phrase) { 
 
     if (phrase) { 
 
     var data = text.replace(/[|&;$%@"<>()+,]/g, ""); 
 
     data = data.replace(new RegExp('(' + phrase + ')', 'gi'), 
 
      '<span class="highlighted">$1</span>'); 
 
     return $sce.trustAsHtml(data); 
 
     } 
 

 
     text = text.replace(/[|&;$%@"<>()+,]/g, ""); 
 
     return $sce.trustAsHtml(text); 
 
    }; 
 
    });

.highlighted { 
 
    background-color: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div>Search: <input type="text" ng-model="searchStr" /></div> 
 
    <div> 
 
    <table> 
 
     <tr ng-repeat="item in showMessages | filter:searchStr"> 
 
     <td>{{item.filename}}</td> 
 
     <td class="serverResults" ng-bind-html="item.value | trusted:searchStr"></td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
</div>