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

最新推荐文章于 2022-08-26 13:16:41 发布

十盏

最新推荐文章于 2022-08-26 13:16:41 发布

阅读量1.5k

点赞数

分类专栏： angular 文章标签： anjular 高亮过滤器

本文链接：https://blog.csdn.net/IT_1692/article/details/78109914

版权

angular 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

<!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

收藏

觉得还不错? 一键收藏
0
评论
angular过滤器 -- 关键字高亮显示

前端处理使给定关键字在文本中高亮显示 filterTest .pink{ background: #ddd; } var app = angular.module('myApp', []); app.controller('myController', function($scope) { $
复制链接

扫一扫

专栏目录