使用 angularJS 过滤器在搜索结果中突出显示搜索文本答案

【问题标题】：Highlight search text in the search results using angularJS filter使用 angularJS 过滤器在搜索结果中突出显示搜索文本
【发布时间】：2018-03-25 12:13:02
【问题描述】：

我有一个输入框，用于在显示的整体结果中过滤掉结果。我有一个过滤器'startWith'。现在，我需要在显示的搜索结果中突出显示搜索文本 angularJS。

例如，当我在搜索框中输入“o”时，它应该突出显示橙色的“O”。

你能帮我实现这个吗？

这是我的代码：

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
 $scope.myData = [{
  'name': 'Orange'
 }, {
  'name': 'Banana'
 }, {
  'name': 'Mango'
 }, {
  'name': 'Apple'
 }, {
  'name': 'Pineapple'
 }];
 $scope.startWith = function(actual, expected) {
  var lowerStr = (actual + "").toLowerCase();
  return lowerStr.indexOf(expected.toLowerCase()) === 0;
 }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
  <div id="childDiv">
    <p ng-repeat="obj in myData | filter:search:startWith" >{{obj.name}}</p>
  </div>
</div>

【问题讨论】：

标签： javascript angularjs replace filter

【解决方案1】：

只需通过函数运行输出以检查您的搜索并将一个类添加到突出显示的部分。道具是由于这个blog for the reg ex（我讨厌正则表达式，但它们工作得很好）还有google

var app = angular.module('myApp', []);
app.controller('myCtrl', ['$scope', function($scope) {
 $scope.myData = [{
  'name': 'Orange'
 }, {
  'name': 'Banana'
 }, {
  'name': 'Mango'
 }, {
  'name': 'Apple'
 }, {
  'name': 'Pineapple'
 }];
 $scope.startWith = function(actual, expected) {
  var lowerStr = (actual + "").toLowerCase();
  return lowerStr.indexOf(expected.toLowerCase()) === 0;
 }
 $scope.highlight = function(text, phrase) {
    if (phrase) { 
        text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')
     }
     return text;
 }
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div id="parentDiv" ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="search.name" class="searchText" id="search_txt" placeholder="Search Data" />
  <div id="childDiv">
    <p ng-repeat="obj in myData | filter:search:startWith" >{{highlight(obj.name)}}</p>
  </div>
</div>

【讨论】：