html搜索内容要使用方法,js 搜索html内容 高亮方案

js 搜索html内容 高亮方案

2019-03-20 16:54:17   作者：MangoCool   来源：MangoCool

直接上代码：

// 正则中遇到特殊字符需要转义

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 = childNode.data.replaceAll('', '>');

}

forkNode.innerHTML = childNode.data.replace(re, '$1');

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 里面去，忙着打码去了，就偷懒了

参考文章：

分享：