配列から単語を強調表示する

Question

配列にある単語に印を付けることができます。

$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>')); 

} 
}); 

Answer 1

問題があなたキーをconcatingあなたアールある - これにあなたの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>

ここ

Answer 2

作業フィルタです：

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

Answer 3

はフィルタのバージョンであなたも単語間の空白を強調したい場合：

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