Я хочу отметить слова, которые у меня есть в массиве.

$scope.arrayFilter=["mom","is","beautifull"];

Но это работает только для меня, если у меня есть слова в порядке их появления. Я бы хотел, чтобы независимо от того, в каком порядке были слова, они помечаются, если они совпадают. И если я добавлю новое слово в массив, оно также должно быть помечено.

https://jsfiddle.net/1x7zy4La/

<li ng-repeat="item in data ">
  <span ng-bind-html="item.title | highlight:arrayFilter"></span>
</li>

  $scope.arrayFilter=["mom","is","beautifull"];
  $scope.data = [{
    title: "mom is beautifull"
  }, {
    title: "my mom is great"
  }, {
    title: "I hate the matematics"
  }];
});

app.filter('highlight', function($sce) {
return function(text, arrayFilter) {
    var stringToDisplay = '';
    angular.forEach(arrayFilter,function(key,value){
        if(text.includes(key)){
          stringToDisplay =  stringToDisplay.concat(key).concat(" ");
        }
    })
   stringToDisplay =  stringToDisplay.substring(0, stringToDisplay.length - 1);
   return $sce.trustAsHtml(text.replace(new RegExp(stringToDisplay, 'gi'), '<span class="highlightedText">$&</span>'));

}
});

enter image description here

4
yavg 28 Авг 2017 в 17:09

3 ответа

Лучший ответ

Проблема в том, что вы осуждаете свои ключи - измените filter на следующее:

app.filter('highlight', function($sce) {
  return function(text, arrayFilter) {
    angular.forEach(arrayFilter, function(key, value) {
      if (text.includes(key)) {
        text = text.replace(new RegExp(key, 'gi'), '<span class="highlightedText">$&</span>')
      }
    })
    return $sce.trustAsHtml(text);
  }
});

См. updated jsfiddle или демонстрацию ниже:

var app = angular.module('testApp', []);
app.controller('testCtrl', function($scope) {
  $scope.arrayFilter = ["is", "mom", "beautifull"];
  $scope.data = [{
    title: "mom is beautifull"
  }, {
    title: "my mom is great"
  }, {
    title: "I hate the matematics"
  }];
});



app.filter('highlight', function($sce) {
  return function(text, arrayFilter) {
    angular.forEach(arrayFilter, function(key, value) {
      if (text.includes(key)) {
        text = text.replace(new RegExp(key, 'gi'), '<span class="highlightedText">$&</span>')
      }
    })
    return $sce.trustAsHtml(text);
  }
});
.highlightedText {
  background: yellow;
}
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>

<div ng-app="testApp" ng-controller="testCtrl">
  <li ng-repeat="item in data ">
    <span ng-bind-html="item.title | highlight:arrayFilter"></span>
  </li>
</div>
5
kukkuz 28 Авг 2017 в 14:16

Вот рабочий фильтр:

app.filter('highlight', function($sce) {
return function(text, arrayFilter) {
    var stringToDisplay = '';
    angular.forEach(arrayFilter,function(key,value){
        if(text.includes(key)){
          text = text.replace(new RegExp(key, 'gi'), '<span class="highlightedText">$&</span>');
        }
    })
   return  $sce.trustAsHtml(text);
}
});
0
CCH 28 Авг 2017 в 14:16

Вот версия фильтра, если вы хотите выделить пробелы между словами:

app.filter('highlight', function($sce) { return function(text, arrayFilter) { var regex = "([\\s]*"+arrayFilter.join("[\\s]*)|([\\s]*")+"[\\s]*)"; return $sce.trustAsHtml(text.replace(new RegExp(regex, 'gi'), '<span class="highlightedText">$&</span>')); } });

0
Abenitsi 28 Авг 2017 в 14:57