AngularJS实现搜索关键字高亮显示及数字报错处理

作者:清欢时间:2026-10-22 04:48:23浏览:258

本文详解如何在AngularJS中通过自定义过滤器实现搜索关键字的高亮显示。重点解析利用$ sce和$ log服务处理HTML信任与日志记录,并针对搜索数字时RegExp正则表达式引发的异常提供排查思路与解决方案,同时包含完整的HTML视图与控制器代码示例。

高亮过滤器定义

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视图

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 编码,经测试发现此方法无法彻底解决问题。

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

作者最新文章