说明

最近博客添加了搜索功能，有个需求是要针对搜索结果中搜索关键字需要高亮显示。

以便用户可以更快速的挑选自己中意的文章。

原理就是在渲染列表数据中给含有关键字的文本标签添加自定义class，渲染完毕后调用写好的高亮js方法。

实现效果

代码

// 搜索关键字高亮
var highlightKeyword=function(keyword) {//1.获取要高亮显示的行var rowNode = $('.highlightRow');//2.获取搜索的内容//3.遍历整行内容，添加高亮颜色rowNode.each(function() {var newHtml = $(this).html();newHtml = newHtml.replace(keyword, '<span style="color:#ff6700;">' + keyword + '</span>');$(this).html(newHtml);});
}

// 拼接列表var dataRow = "";if (data.rows != null && data.rows != '') {$.each(data.rows, function(i, r) {// 拼接DOMdataRow+='<div class="search-post-item">'+'<h4 class="">'+'<a href="'+ctx+'/author/'+postAuthor+'/post/detail/'+r.id+'" target="_blank">'+'<span class="post-title highlightRow">'+r.postTitle+'</span>'+'</a>'+'</h4>'+'<p class="post-content highlightRow">'+r.postExcerpt+'</p>'+'<div class="post-info-box">'+'<p>' +'<span class="date">'+new Date(r.postTime).Format("yyyy-MM-dd hh:mm:ss")+'</span>'+'</p>'+'<p class="point"></p>'+'<p>'+'<span class="read-num">阅读数 <span class="num">'+r.readCount+'</span> </span>'+'</p>'+'<p class="point"></p>'+'<p>'+'<span class="comment-num">评论数 <span class="num">'+r.commentCount+'</span> </span>'+'</p>'+'</div>''</div>';dataRow+='</div>';});// console.log(dataRow);$("#post-list").append(dataRow);// 高亮关键字highlightKeyword(postTitle);

使用JS实现博客搜索关键字高亮相关推荐

搜索关键字高亮_Django Haystack 全文检索与关键词高亮
作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取博客提供 RS ...
Lucene5.5.4入门以及基于Lucene实现博客搜索功能
前言一直以来个人博客的搜索功能很蹩脚,只是自己简单用数据库的like %keyword%来实现的,所以导致经常搜不到想要找的内容,而且高亮显示.摘要截取等也不好实现,所以决定采用Lucene改写博客 ...
SEO中巧用个人博客优化关键字
草根皆知,SEO中关键字外链优化是很重要的一部分,增加外链的方法也有很多种,最常用的有论坛.博客发布链接;许多站长对此是深恶痛绝,删贴.封ID绝不手软,外链往往无法长久. 因为急需提高网站关键词的权重 ...
GitHub 博客-- Jekyll--代码高亮，Liquid 转义字符
此文首发于我的个人博客:GitHub 博客-- Jekyll–代码高亮,Liquid 转义字符 - zhang0peter的个人博客转载请注明在使用Jekyll搭建了自己的 GitHub博客后,想 ...
通过百度 vs 奇虎，来谈博客搜索
百度推出了博客搜索,几乎就是一个网页搜索的翻版而已,唯一和网页搜索不同的,就是:1.少了广告:2.增加了一个博客的首页连接. 看起来,并无太大新意.当然,也许他留有后着,也未为可知. 有人说这是参考了 ...
Django建立博客搜索功能（haystack+whoosh+jieba）
0-效果预览 1-相关说明: haystack 全文检索框架,可配置各种搜索引擎,在Django内相当于app whoosh 搜索引擎 2-whoosh下载与优化中文分词jieba 下载: pip ...
osc 博客搜索的算法的问题
原文链接: osc 博客搜索的算法的问题上一篇: vue node 环境配置 vue-cli的安装下一篇: win10 截屏软件我的博客里面有一个nodejs 和webpack入门的文章 ht ...
新浪博客中插入高亮代码
在ie浏览器里可以用,但是不知道mac有没有这个插件原文地址:新浪博客中插入高亮代码作者:木子超-同学一． Sublime text 3是一个强大的代码编辑软件,强烈推荐 ...
基于Lucene实现博客搜索功能
前言: 最近毕设开会无意间听到小陈同学使用lucene整一个全文索引,出于好奇了解了一下发现其是结合相关分词器可以对一大段文字建立索引,然后可以实现搜索功能,本来博客一直差着一个搜索博客功能(不想通过 ...

使用JS实现博客搜索关键字高亮

说明

实现效果

代码

使用JS实现博客搜索关键字高亮相关推荐

最新文章

热门文章