angularjs实现了文本中突出显示的搜索关键词

1.定义高亮过滤器

我们希望搜索关键词在正文中突出显示，正文内容是过滤器的第一个参数，第二个参数是搜索关键词，所以我们的过滤器会有两个参数。

突出的原则很简单。用span标记隔离需要突出显示的内容，并添加突出显示的类样式来描述它。

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=encodeURIComponent(text)；search=encodeURIComponent(搜索)；var regex=new RegExp(search，' gi ')var result=text . replace(regex，' span class=' highlightextstyle ' $/span ')；result=decodeURIComponent(结果)；$log.info('result: '结果)；返回$sce.trustAsHtml(结果)；};返回fn；});$sce和$log是angular提供的两种服务，其中$sce服务需要使用ngSanitize模块。有关此模块的详细信息，请参考：angular-ngSanitize模块-$sanitize服务

2.定义html视图

div ng-controller='search' div输入类型='text' ng-model='notify.search '值=''//div！-文本内容将突出显示搜索关键字-div ng-bind-html='文本|突出显示： notify.search'/div/div 3，控制器

app.controller('search '，function($ scope){ $ scope . text=' hello，world。你好，世界。你好，世界。'这是一个过滤器例子'；$ scope . notify . search=' '；})注意控制器中滤镜高光的引入

当搜索到的关键字为数字，如‘1’时，报错如下：(输入汉字时没有问题)

一些解决方案：

1.直接尝试catch处理，这太简单了，会导致新的问题

2.将所有转义改为encodeURIComponent代码，并尝试解决问题。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。