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

2024-04-16 06:59:03

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编码，试了一下不能解决问题

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

两种简单实现菜单高亮显示的JS类代码

记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码代码如下:
用js查找法实现当前栏目的高亮显示的代码

当前栏目高亮显示 JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码代码如下: <div id="nav"> <ul> <li><a href="http://www.jb51.net/html/list/index_127.htm"
js 玩转正则表达式之语法高亮

学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解. 那么我们来分析下两位大神次碳酸钴和 Barret Lee 语法高亮实现. 先说 Barret Lee 的这篇 <几个小例子教你如何实现正则表达式highlight高亮> 之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了.来看下他的正则复
jsp网页搜索结果中实现选中一行使其高亮

我在做搜索结果时,为了好看需要将选中的行变的高亮些,我使用了一个onclick 事件: 复制代码代码如下: var assno=""; function check(obj,che,rwid){ if(obj.checked==true){ document.getElementById(rwid).style.background ="blue"; assno=document.getElementById(che).value; alert(assno); }
JavaScript实现的搜索及高亮显示功能示例

本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea
javascript 关键字高亮显示实现代码

关键字高亮显示我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET
javascript高亮效果的二种实现方法

js高亮方法一: 复制代码代码如下: <script> function HighLight(nWord){ if(nWord!=''){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>&
Angularjs实现搜索关键字高亮显示效果

需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况代码思路: 利用正则表达式匹配关键字使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>
Javascript实现的CSS代码高亮显示

相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.
用JS将搜索的关键字高亮显示实现代码

用JS让文章内容指定的关键字加亮是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助复制代码代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.

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

相关推荐

随机推荐