通过javascript对html里面关键词高亮显示

通过javascript对html里面内容进行高亮显示， 可以同时高亮多个关键字， 每个关键字以不同的颜色展示

代码如下：

/**
 * 高亮显示关键字, 构造函数
 * @param {} colors 颜色数组，其中每个元素是一个 '背景色,前景色' 组合
 */
var Highlighter = function(colors) {
	this.colors = colors;
	if (this.colors == null) {
		//默认颜色
		this.colors = 
			['#ffff00,#FF0000','#dae9d1,#FF0000','#eabcf4,#FF0000',
		     '#c8e5ef,#FF0000','#f3e3cb, #FF0000', '#e7cfe0,#FF0000',
		     '#c5d1f1,#FF0000','#deeee4, #FF0000','#b55ed2,#FF0000', 
		     '#dcb7a0,#FF0000', '#7983ab,#FF0000', '#6894b5, #FF0000'];
	}
};

/**
 * 高亮显示关键字
 * @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();
        //document.body为dom对象，查找范围
	hl.highlight(document.body, $("#lighter_words").val());

 参考：

html dom： http://www.cnblogs.com/x116/articles/1083915.html

javascript 面向对象：http://www.cnblogs.com/Luoke365/archive/2007/08/04/842608.html

正则表达式：请看本blog关于javascript正则表达式的描述

javascript高亮：http://www.cnblogs.com/jenry/archive/2008/02/23/1078807.html

 

转自：http://blog.csdn.net/freewave/article/details/4277386