Question

searchStr是用户输入搜索关键字，一旦我从服务器呈现响应我想突出显示用户输入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;
    })

filters.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

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

＆＃13;

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);
    };
  });

＆＃13;

.highlighted {
  background-color: yellow;
}

＆＃13;

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

＆＃13;

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

1 个答案: