【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）

Question. 问题

在开发过程中，我们会遇到需要高亮显示的文本，无论是新闻、产品还是案例的检索，对于检索到的内容，都会产生这样的需求，一种好的处理方式就是通过 JS 实现。先来看看 PC 端的百度和移动端的微信的检索结果：

Solution. 解决

我们先来看一段简化的 JS 来实现关键字高亮显示的功能：

function setHeightKeyWord(keyword) {/* 获取需要处理的关键字 */var tempHTML = $("#text").html();/* 关键字替换文本 该文本设置有高亮颜色 */var replaceText = "<font style='color:red;'>$1</font>";/* 关键字正则匹配规则 */var r = new RegExp("(" + keyword + ")", "ig");/* 将匹配到的关键字替换成我们预设的文本 */tempHTML = tempHTML.replace(r, replaceText);/* 将文本显示到浏览器上 */$("#text").html(tempHTML);
}

思路很简单，就是通过正则将匹配到的关键字替换成我们预设的 HTML 片段，这个 HTML 片段通过 CSS 实现文本变色。

调用：

<body style="line-height: 40px;"><div>关键字: <input type="text" name="keyword" id="keyword"><button id="btn">高亮</button></div><div id="text">高亮显示文章中的关键字。</div>
</body><script type="text/javascript">
$(function() {$("#btn").click(function() {var $keyword = $("#keyword").val();setHeightKeyWord($keyword)});
});
</script>

将关键字输入到 input 框中，就能将这个关键字高亮显示。

Extension. 扩展

这是从 javascript 对html内容的关键字高亮显示中转载过来的一个不错的封装，一个对多个关键字用不同颜色高亮显示的 JS 代码：

/** * 高亮显示关键字, 构造函数 * @param {} colors 颜色数组，其中每个元素是一个 '背景色,前景色' 组合 */
var Highlighter = function(colors) {  this.colors = colors;  if (this.colors == null) {  //默认颜色  this.colors = ['#ffff00,#000000','#dae9d1,#000000','#eabcf4,#000000',  '#c8e5ef,#000000','#f3e3cb, #000000', '#e7cfe0,#000000',  '#c5d1f1,#000000','#deeee4, #000000','#b55ed2,#000000',   '#dcb7a0,#333333', '#7983ab,#000000', '#6894b5, #000000'];  }
}  /** * 高亮显示关键字 * @param {} node    html element * @param {} keywords  关键字， 多个关键字可以通过空格隔开， 其中每个关键字会以一种颜色显式 *  * 用法： * var hl = new Highlighter(); * hl.highlight(document.body, '这个 世界 需要 和平'); */
Highlighter.prototype.highlight = function(node, keywords) {  if (!keywords || !node || !node.nodeType || node.nodeType != 1)  return;  keywords = this.parsewords(keywords);  if (keywords == null)  return;  for (var i = 0; i < keywords.length; i++) {  this.colorword(node, keywords[i]);  }
}  /** * 对所有#text的node进行查找，如果有关键字则进行着色 * @param {} node 节点 * @param {} keyword 关键字结构体，包含了关键字、前景色、背景色 */
Highlighter.prototype.colorword = function(node, keyword) {  for (var i = 0; i < node.childNodes.length; i++) {  var childNode = node.childNodes[i];  if (childNode.nodeType == 3) {  //childNode is #text  var re = new RegExp(keyword.word, 'i');  if (childNode.data.search(re) == -1) continue;  re = new RegExp('(' + keyword.word + ')', 'gi');  var forkNode = document.createElement('span');  forkNode.innerHTML = childNode.data.replace(re, '<span style="background-color:'+keyword.bgColor+';color:'+keyword.foreColor+'" mce_style="background-color:'+keyword.bgColor+';color:'+keyword.foreColor+'">$1</span>');  node.replaceChild(forkNode, childNode);  }  else if (childNode.nodeType == 1) {  //childNode is element  this.colorword(childNode, keyword);  }  }
}  /** * 将空格分隔开的关键字转换成对象数组 * @param {} keywords * @return {} */
Highlighter.prototype.parsewords = function(keywords) {  keywords = keywords.replace(//s+/g, ' ');  keywords = keywords.split(' ');  if (keywords == null || keywords.length == 0)  return null;  var results = [];  for (var i = 0; i < keywords.length; i++) {  var keyword = {};  var color = this.colors[i % this.colors.length].split(',');  keyword.word = keywords[i];  keyword.bgColor = color[0];  keyword.foreColor = color[1];  results.push(keyword);  }  return results;
}  /** * 按照字符串长度，由长到短进行排序 * @param {} list 字符串数组 */
Highlighter.prototype.sort = function(list) {  list.sort(function(e1, e2) {  return e1.length < e2.length;  });
}

调用：

var hl = new Highlighter();
hl.highlight(document.body, '文本1 文本2 文本3');

【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）相关推荐

【前端开发 | 实例】网页中实现 js 繁体简体切换
在开发网站等前端页面时,往往需要用到繁体字和简体字的一键切换,这个功能实现起来很简单. 首先我们封装好JS代码 // 网页简繁体转换 // 本js用于客户在网站页面选择繁体中文或简体中文显示,默认是正 ...
北风网web前端开发培训课程 web前端开发实例视频教程下载
web前端开发视频教程 Web前端开发工程师培训零基础Web前端开发工程师高端培训配项目开发(月薪过万的最佳选择) 课程讲师:叮咚课程分类:套餐推荐适合人群:初级课时数量:305课时用到技术 ...
web前端开发主要培训哪些内容
想要学会web前端,最好是选择报web前端培训机构是最合适的选择,然后做好学习路线的规划,这样学起来是比较方便且快速的,下面小编就为大家详细的介绍一下web前端开发主要培训哪些内容? web前端开发主 ...
前端开发规范文档(html,css,js)
首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...
Web前端开发入门教程，HTML5+CSS3+JS教程，达到web前端工程师的水平
Web前端开发是一个非常热门的职业,随着互联网的发展,越来越多的企业需要拥有自己的网站和应用程序.本文将介绍Web前端开发的入门教程,包括HTML5.CSS3和JS教程,帮助读者达到Web前端工程师的 ...
iviewui前端开发实例技术指南
安装nodejs,参考 https://blog.csdn.net/yan_dk/article/details/90633166 安装nodojs环境不再细述. 开发实例1-后台系统下载开源的后台 ...
超详细前端开发案例：品优购商场项目(二)
目录续前一篇内容 10. 品优购首页布局 10.4 nav 导航栏制作 10.5 footer 底部制作 10.6 mod_service 服务模块制作 10.7 main 主体模块制作 10.8 ...
对的调用没有匹配的函数_前端开发之——函数、事件、js对象
函数常用系统函数 parseInt ("字符串") 将字符串转换为整型数字如: parseInt ("86")将字符串"86"转换为整型 ...
从0开始前端开发_设置DIV内容居中
想要让DIV里的内容居中可以用如下代码: <style type="text/css">div{ text-align:center; //文本内容居中,可以将文本和图 ...

【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）

Question. 问题

Solution. 解决

Extension. 扩展

【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）相关推荐

最新文章

热门文章

【前端开发实例】HTML 检索内容 关键字 JS 高亮显示 -（二）

Question. 问题

Solution. 解决

Extension. 扩展

【前端开发实例】HTML 检索内容 关键字 JS 高亮显示 -（二）相关推荐

最新文章

热门文章

【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）

【前端开发实例】HTML 检索内容关键字 JS 高亮显示 -（二）相关推荐