angular js 实现搜索关键字高亮(变色)

@[TOC](angular js 实现搜索关键字高亮(变色))
之前实现搜索关键字高亮的思路是将查出来的内容高亮然后将字符串拼接
考虑到这样不但影响效率还麻烦
既然用的是angular js 就用到angular 的过滤器来实现这个功能
angular js 的结构在此就不多说
模型关键代码如下：

var app= angular.module('appModule',[]).controller('appController',function($scope){
	$scope.textLight="这里是高亮(关键字变色)显示";
})

app.filter("highLightFilter", function($sce){
    return function(text, search){
        if (!search) {
            return $sce.trustAsHtml(text);
        }
        var regex = new RegExp(search, 'gi')
        var result = text.replace(regex, '<span class="highlight">$&</span>');
        return $sce.trustAsHtml(result);
    };
});

html代码：

<style>
    .highlight{
        background: red;
    }
</style>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<div ng-bind-html="textLight | highLightFilter:'关键字变色'"></div>

效果图：

最后填加搜索事件即可