AngularJS实现搜索关键字高亮显示及数字报错处理
本文详解如何在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 编码,经测试发现此方法无法彻底解决问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。
JS转整数出现NaN怎么办?常见异常处理方案
2026-11-05 16:27:31
推荐几款免安装的在线JS压缩工具
2026-11-05 14:54:53
JS怎么使用JSON.stringify实现JSON格式化与缩进
2026-11-04 10:47:30
CodePen、JSFiddle 与 StackBlitz:主流 JS 在线编辑器对比
2026-11-03 21:07:49
JS字符串转数字后怎么正确判断是否为有效数值
2026-11-03 20:04:15
