如何突出显示搜索结果的颜色

时间：2020-02-04 05:42:41

标签： javascript angularjs angularjs-ng-repeat ng-bind

您能否以黄色突出显示搜索到的单词？

下面编写了一个代码示例，用于过滤来自JSON feed URL的显示数据中的单词。

angular.module('sample', []).
controller('sampleController', ['$scope', '$http', function($scope, $http) {
  var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

  $http.get(url)
    .success(function(data, status, headers, config) {
      $scope.users = data.feed.entry;
      console.log($scope.users);
    })
    .error(function(error, status, headers, config) {
      console.log(status);
      console.log("Error occured");
    });
   // code to highlight
   
    $scope.highlight = () => {
  //create copy of the original array
  $scope.filteredContent = JSON.parse(JSON.stringify($scope.users));

  $scope.filteredContent.forEach(fc => {
    const regEx = new RegExp($scope.search);
alert("here");
    fc.question = fc.gsx$topic.$t.replace(regEx, '<span class="highlight">${$scope.search}</span>');
    fc.answer = fc.gsx$response.$t.replace(regEx, '<span class="highlight">${$scope.search}</span>');
  });
};
    
  // code to highlight
   
$scope.search='';
$scope.searchFilter=function(item){

	if(item.gsx$topic.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1 || item.gsx$response.$t.toLowerCase().indexOf($scope.search.toLowerCase()) != -1){
      return true;
    }
    return false;
  }

}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
<div ng-app="sample" ng-controller="sampleController">
  <div class="black">
    <input type="text" name="search" ng-keyup="highlight()" ng-model="search" placeholder="search"/>
  </div>
  <br>
  <br>
  <br>
  <table style="border: 1px solid black ;">
    <tbody>
      <tr>
        <td>
          <center><b>Question</b></center>
        </td>
        <td>
          <center><b>Response</b></center>
        </td>
      </tr>
      <tr ng-repeat="user in users | filter:searchFilter">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;" ng-bind-html="user.gsx$topic.$t">{{user.gsx$topic.$t}}</td>
        <td style="border: 1px solid black ; width:70%;white-space: pre-wrap;" ng-bind-html="user.gsx$response.$t">{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>

代码链接：https://jsfiddle.net/bjqsgfzc/1/

2 个答案:

答案 0 :(得分：1)

您需要使用 $sce 服务Strict Contextual Escaping。

将此服务添加到控制器声明中，如下所示：

controller('sampleController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {

现在，您必须定义一个函数，该函数将仅注入带有黄色类CSS类名称的span标签，并在通过$sce.trustAsHtml方法发现搜索到的文本时以黄色突出显示AngularJS，注入的是安全内容。

$scope.highlightText = function(text, search) {
  if (search && search.length === 0) {

    // Returns the default content.
    return $sce.trustAsHtml(text);
  }

  // Define a regular expression to find the text globally and ignoring capital letters.
  var regex = new RegExp(search, 'gi');

  // If you already found the text then inject a span element with CSS class to highlight that you found.
  return $sce.trustAsHtml(text.replace(regex, '<span class="foundText">$&</span>'));
};

在上一个正则表达式替换文本中， $& 表示显示与替换后的正则表达式匹配的捕获文本。

在HTML的ng-repeat内，使用highlightText函数添加ngBindHtml伪指令，其中第一个参数是您将要搜索的文本，第二个参数是要查找的文字。

以您的情况，以这种方式：

<tr ng-repeat="user in users | filter:searchFilter">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$topic.$t, search)">{{user.gsx$topic.$t}}</td>

在此示例中看到：

angular.module('sample', []).
controller('sampleController', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
  var url = "https://spreadsheets.google.com/feeds/list/153Obe1TdWlIPyveZoNxEw53rdrghHsiWU9l-WgGwCrE/od6/public/values?alt=json";

  $http.get(url)
    .success(function(data, status, headers, config) {
      $scope.users = data.feed.entry;
      console.log($scope.users);
    })
    .error(function(error, status, headers, config) {
      console.log(status);
      console.log("Error occured");
    });
  $scope.search = '';
  $scope.searchFilter = function(item) {
    if (item.gsx$topic.$t.indexOf($scope.search) != -1 || item.gsx$response.$t.indexOf($scope.search) != -1) {
      return true;
    }
    return false;
  };

  $scope.highlightText = function(text, search) {
    if (search && search.length === 0) {

      // Returns the default content.
      return $sce.trustAsHtml(text);
    }

    // Define a regular expression to find the text globally and ignoring capital letters.
    var regex = new RegExp(search, 'gi');

    // If you already found the text then inject a span element with CSS class to highlight that you found.
    return $sce.trustAsHtml(text.replace(regex, '<span class="foundText">$&</span>'));
  };
}]);
.foundText {
  background-color: #ff0;
  color: #f00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.0/angular.min.js"></script>
<div ng-app="sample" ng-controller="sampleController">
  <div class="black">
    <input type="text" name="search" ng-model="search" placeholder="search" ng-click="didSelectLanguage()" />
  </div>
  <br>
  <br>
  <br>
  <table style="border: 1px solid black ;">
    <tbody>
      <tr>
        <td>
          <center><b>Question</b></center>
        </td>
        <td>
          <center><b>Response</b></center>
        </td>
      </tr>
      <tr ng-repeat="user in users | filter:searchFilter">
        <td style="border: 1px solid black ; width:30%;white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$topic.$t, search)">{{user.gsx$topic.$t}}</td>
        <td style="border: 1px solid black ; width:70%;white-space: pre-wrap;" ng-bind-html="highlightText(user.gsx$response.$t, search)">{{user.gsx$response.$t}}</td>
      </tr>
    </tbody>
  </table>
</div>

希望这会有所帮助！

答案 1 :(得分：0)

您可以将<span>与highlighted类一起添加。确保创建原始阵列的深层副本。我使用了JSON.parse(JSON.stringify(...))。另外，由于我们要添加<span>并希望将其显示为html，因此我们需要使用ng-bind-html。为此，我们需要将ngSanitize添加为模块dependency。

angular.module('myApp', ['ngSanitize'])
  .controller('myController', ['$scope', ($scope) => {
    const content = [{
        question: 'Question 1',
        answer: 'Answer 1'
      },
      {
        question: 'Question 2',
        answer: 'Answer 2'
      }
    ];

    //create copy of the original array
    $scope.filteredContent = JSON.parse(JSON.stringify(content));

    $scope.highlight = () => {
      //create copy of the original array
      $scope.filteredContent = JSON.parse(JSON.stringify(content));

      $scope.filteredContent.forEach(fc => {
        const regEx = new RegExp($scope.searchText);

        fc.question = fc.question.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
        fc.answer = fc.answer.replace(regEx, `<span class="highlight">${$scope.searchText}</span>`);
      });
    };
  }]);
table {
  border-collapse: collapse;
  margin-top: 10px;
  border: 1pt solid black;
  width: 100%;
}

td {
  border: 1pt solid black;
  margin: 0;
  padding: 0;
}

.highlight {
  background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.7.9/angular-sanitize.js"></script>

<div ng-app="myApp" ng-controller="myController">
  <input type="text" ng-model="searchText" ng-keyup="highlight()" placeholder="Search">

  <table>
    <tr ng-repeat="c in filteredContent">
      <td ng-bind-html="c.question">
      </td>
      <td ng-bind-html="c.answer">
      </td>
    </tr>
  </table>
</div>

相关问题
最新问题