直接上代码:
// 正则中遇到特殊字符需要转义 var specChar = ["$","(",")","*","+",".","[","]","?","\\","^","{","}","|"]; /** 特殊字符须要转义 */ function formatForKeyword(keyword) { if(specChar.indexOf(keyword)>0) { keyword = '\\'+keyword; return keyword; } else { return keyword; } } /** * 高亮显示关键字, 构造函数 * @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'); if(childNode.data.indexOf('<') || childNode.data.indexOf('>')) { childNode.data = childNode.data.replaceAll('<', '<').replaceAll('>', '>'); } 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 if(childNode.nodeName.toLowerCase() == 'style' || childNode.nodeName.toLowerCase() == 'script') { // 遇到script style 不处理 } else { 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; }); }使用方法:
/** 邮件体 高亮显示搜索关键字 */ function formatForBody(val, keyword) { if(keyword == null || keyword.length == 0) { return val; } else { var divDom = document.createElement("div"); divDom.innerHTML = val; if(divDom.innerText.indexOf(keyword)>=0) { // 是否需要替换 keyword = formatForKeyword(keyword); var hl = new Highlighter(); hl.highlight(divDom, keyword); val = divDom.innerHTML; } return val; } }
其实还可以把 formatForKeyword 方法集合到 Highlighter 里面去,忙着打码去了,就偷懒了
参考文章:
https://blog.csdn.net/jasonapoint/article/details/78235137
分享:
崇尚极简,热爱技术,喜欢唱歌,热衷旅行,爱好电子产品的一介码农。
联系QQ:58742094
联系电话:
工作邮箱:
当你的才华还撑不起你的野心的时候,你就应该静下心来学习,永不止步!
人生之旅历途甚长,所争决不在一年半月,万不可因此着急失望,招精神之萎葸。
Copyright 2015- 芒果酷(mangocool.com) All rights reserved. 湘ICP备14019394号
免责声明:本网站部分文章转载其他媒体,意在为公众提供免费服务。如有信息侵犯了您的权益,可与本网站联系,本网站将尽快予以撤除。