如何在数据呈现时突出显示搜索输入？

searchStrsearchStr是用户输入的搜索关键字，一旦我从服务器提交响应，我想突出显示用户输入searchStr，以便用户可以查看正在搜索的内容并比较其响应部分。所以下面的代码是突出显示从服务器的整个字符串响应在我的情况下，我只是想突出搜索字符串，将成为响应的一部分。如何在数据呈现时突出显示搜索输入？

让我们假设我有串

info|<n/a>|[routes.event] ########## Message added to processing queue ########## e63637db-aa33-4aed-b5b0-51a0764dc7f1 { workerId: 3, pid: 33029 }，我想强调e63637db-aa33-4aed-b5b0-51a0764dc7f1 _id，这将是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; 
    })

过滤器.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); 
    }; 
}]);

来源

2017-04-12 hussain

确实[这个提问/回答（http://stackoverflow.com/q/43188889/548997）帮助？ – Lex

我以前看过这个过滤器，我不想应用过滤器，我们可以在控制器中做到这一点 – hussain

控制器不是为了操纵DOM，而是使用指令来做到这一点 –

这是一个工作示例，显示如何完成突出显示。这是人为设计的，因为我只是用单个项目创建一个数组，但它说明了这种方法。您首先应用您的替换保留字符，因为如果在插入突出显示的<span>后应用该替换字符，<和>字符将被您替换的正则表达式剥离。

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>

来源

2017-04-12 23:06:34 Lex

完美！谢谢老板它的工作。 – hussain

如何在数据呈现时突出显示搜索输入？

回答

相关问题