如何在數據呈現時突出顯示搜索輸入？

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

如何在數據呈現時突出顯示搜索輸入？

回答

相關問題