Markieren Sie Wörter aus einem Array

Question

Ich möchte die Wörter, die ich in einem Array habe, markieren.

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

Aber es funktioniert nur für mich, wenn ich die Wörter in der Reihenfolge habe, in der sie erscheinen. Ich wünsche, dass unabhängig von der Reihenfolge, in der die Wörter sind, diese markiert sind, wenn sie übereinstimmen. Und wenn ich dem Array ein neues Wort hinzufüge, sollte es auch markiert werden.

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

Die Frage ist Ihr sind concating Ihre Schlüssel - Ihre filter Um dies zu ändern:

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

Siehe updated jsfiddle oder Demo unter:

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

Hier ist ein Arbeitsfilter:

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

Hier ist eine Filter Version, wenn Sie zu weiß Leerzeichen zwischen den Wörtern hervorheben möchten:

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