angularjs实现搜索的关键字在正文中高亮出来

 更新时间:2017年06月13日 10:43:33   作者:灰太大  
这篇文章主要介绍了angularjs实现搜索的关键字在正文中高亮出来,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

1、定义高亮 filter

我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了。

高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式 进行描述就可以了。

app.filter("highlight", function($sce, $log){
  var fn = function(text, search){
    $log.info("text: " + text);
    $log.info("search: " + search);
    if (!search) {
      return $sce.trustAsHtml(text);
    }
    text = encodeURIComponent(text);
    search = encodeURIComponent(search);
    var regex = new RegExp(search, 'gi')
    var result = text.replace(regex, '<span class="highlightedTextStyle">$&</span>');
    result = decodeURIComponent(result);
    $log.info("result: " + result );
    return $sce.trustAsHtml(result);
  };
  return fn;
});

$sce, 和 $log 是 angular 提供的两个服务,其中 $sce 服务需要使用 ngSanitize 模块。关于这个模块,可以参考:angular-ngSanitize模块-$sanitize服务详解

2、定义html视图

<div ng-controller="search">
      <div>
        <input type="text" ng-model="notify.search" value=""/>
      </div>
      <!--text内容会高亮显示搜索关键字-->
      <div ng-bind-html="text | highlight:notify.search">
      </div>
</div>

3、控制器

app.controller("search", function($scope){
  $scope.text = "hello, world. hello, world. hello, world. this is filter example.";
  $scope.notify.search = "";
})

注意在控制器中引入过滤器highlight

当搜索的关键字为数字时,如"1",报如下错误:(输入汉字时没有问题)


一些解决办法:

1.直接try catch处理,这样太简单了,并且会导致新的问题出现

2.把escape全部改成encodeURIComponent编码,试了一下不能解决问题

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 深入学习AngularJS中数据的双向绑定机制

    深入学习AngularJS中数据的双向绑定机制

    这篇文章主要介绍了AngularJS中数据的双向绑定机制,双向绑定使得HTML中呈现的view与AngularJS中的数据一致,是Angular的重要特性之一,需要的朋友可以参考下
    2016-03-03
  • AngularJs自定义服务之实现签名和加密

    AngularJs自定义服务之实现签名和加密

    AngularJS 是一个 JavaScript 框架,它可以通过 <script> 标签添加到 HTML 页面。这篇文章主要介绍了AngularJs自定义服务之实现签名和加密的相关资料,需要的朋友可以参考下
    2016-08-08
  • AngularJS Bootstrap详细介绍及实例代码

    AngularJS Bootstrap详细介绍及实例代码

    本文主要介绍AngularJS Bootstrap,这两对AngularJS Bootstrap的基础知识做了详细讲解,并提供简单示例,有需要的小伙伴可以参考下
    2016-07-07
  • 详细介绍RxJS在Angular中的应用

    详细介绍RxJS在Angular中的应用

    本篇文章主要介绍了详细介绍RxJS在Angular中的应用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 深入探究AngularJs之$scope对象(作用域)

    深入探究AngularJs之$scope对象(作用域)

    本篇文章主要介绍了深入探究AngularJs之$scope对象(作用域),具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • AngularJS监听路由的变化示例代码

    AngularJS监听路由的变化示例代码

    这篇文章给大家分享了如何利用AngularJS监听路由的变化,文中给出了示例代码相信对大家的理解很有帮助,有需要的朋友们可以参考借鉴。
    2016-09-09
  • 详解AngularJS中自定义过滤器

    详解AngularJS中自定义过滤器

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等
    2015-12-12
  • AngularJS的Filter的示例详解

    AngularJS的Filter的示例详解

    本文通过示例给大家详解angularjs 的filter知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-03-03
  • Angular设计模式hierarchical injector实现代码复用模块化

    Angular设计模式hierarchical injector实现代码复用模块化

    这篇文章主要为大家介绍了Angular设计模式hierarchical injector实现代码复用模块化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-10-10
  • AngularJS Ajax详解及示例代码

    AngularJS Ajax详解及示例代码

    本文主要讲解AngularJS Ajax的知识,这里提供详细资料及代码示例,帮助学习AngularJS的朋友,有需要的小伙伴可以参考下
    2016-08-08

最新评论