Javascript 带过滤器和颜色的AngularJS指令

我的模型中有一个简单对象列表（仅包含名称）：

var list = [{name: "Jane"}, {name: "Mary"}];

我在这里展示：

<table>
<tr data-ng-repeat="pers in list | filter: filter.label >
<td >
{{pers.name }}
</td>
</tr>
</table>

您需要使用一个过滤器来提取匹配的搜索词，并将它们替换为具有突出显示样式的标记

<table>
<tr data-ng-repeat="pers in list | filter: filter.label" ng-bind-html="pers.name | highlight:filter.label">
<td >
{{pers.name }}
</td>
</tr>
</table>


{{pers.name}}

您的过滤器将如下所示：

.filter('highlight', function($sce) {
    return function(text, phrase) {
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')

      return $sce.trustAsHtml(text)
    }

.filter（'highlight'，函数（$sce）{
返回函数（文本、短语）{
如果（短语）text=text.replace（新的RegExp（“（“+短语+”）”，“gi”），
'$1')
返回$sce.trustAsHtml（文本）
}

检查此项和
这不是一项简单的任务，因为它需要将匹配项包装在
标记中。是的，它将涉及使用指令、正则表达式和dom操作。建议您查找现有的高亮指令。您的问题范围太广
.filter('highlight', function($sce) {
    return function(text, phrase) {
      if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
        '<span class="highlighted">$1</span>')

      return $sce.trustAsHtml(text)
    }