從數組中突出顯示單詞

我想標記數組中的單詞。從數組中突出顯示單詞

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

} 
});

來源

2017-08-28 yavg

的問題是你是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>

來源

2017-08-28 14:16:50 kukkuz

感謝男人!!!!你能解釋我是什麼嗎？「$ sce.trustAsHtml」 – yavg

你能幫我請這個嗎？ https://stackoverflow.com/questions/45929547/highlight-the-text-of-a-span?noredirect=1#comment78817832_45929547 – yavg

這裏是一個工作過濾器：

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

來源

2017-08-28 14:16:50 CCH

這裏是一個過濾器版本：

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

來源

2017-08-28 14:57:13 Abenitsi

從數組中突出顯示單詞

回答

相關問題