angular过滤器 -- 关键字高亮显示

来源：互联网发布：如何开好淘宝网店编辑：程序博客网时间：2024/05/03 17:18

前端处理使给定关键字在文本中高亮显示

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>filterTest</title></head><script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script><body ng-app="myApp" ng-controller="myController"><div ng-bind-html="textLight | highLightFilter:'高亮'"></div></body><style>    .pink{        background: #ddd;    }</style><script>    var app = angular.module('myApp', []);    app.controller('myController', 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="pink">$&</span>');            return $sce.trustAsHtml(result);        };    });</script></html>

显示结果如下：

阅读全文

0 0