javascript 对html内容的关键字高亮显示

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

代码如下：

view plain copy to clipboard print ?

1. /** 
2.  * 高亮显示关键字, 构造函数 
3.  * @param {} colors 颜色数组，其中每个元素是一个 '背景色,前景色' 组合 
4.  */  
5. var Highlighter = function(colors) {  
6.  this.colors = colors;  
7.  if (this.colors == null) {  
8.   //默认颜色  
9.   this.colors = ['#ffff00,#000000','#dae9d1,#000000','#eabcf4,#000000',  
10.   '#c8e5ef,#000000','#f3e3cb, #000000', '#e7cfe0,#000000',  
11.   '#c5d1f1,#000000','#deeee4, #000000','#b55ed2,#000000',   
12.   '#dcb7a0,#333333', '#7983ab,#000000', '#6894b5, #000000'];  
13.  }  
14. }  
15.   
16. /** 
17.  * 高亮显示关键字 
18.  * @param {} node    html element 
19.  * @param {} keywords  关键字， 多个关键字可以通过空格隔开， 其中每个关键字会以一种颜色显式 
20.  *  
21.  * 用法： 
22.  * var hl = new Highlighter(); 
23.  * hl.highlight(document.body, '这个 世界 需要 和平'); 
24.  */  
25. Highlighter.prototype.highlight = function(node, keywords) {  
26.  if (!keywords || !node || !node.nodeType || node.nodeType != 1)  
27.   return;  
28.    
29.  keywords = this.parsewords(keywords);  
30.  if (keywords == null)  
31.   return;  
32.    
33.  for (var i = 0; i < keywords.length; i++) {  
34.   this.colorword(node, keywords[i]);  
35.  }  
36. }  
37.   
38. /** 
39.  * 对所有#text的node进行查找，如果有关键字则进行着色 
40.  * @param {} node 节点 
41.  * @param {} keyword 关键字结构体，包含了关键字、前景色、背景色 
42.  */  
43. Highlighter.prototype.colorword = function(node, keyword) {  
44.  for (var i = 0; i < node.childNodes.length; i++) {  
45.   var childNode = node.childNodes[i];  
46.     
47.   if (childNode.nodeType == 3) {  
48.    //childNode is #text  
49.    var re = new RegExp(keyword.word, 'i');  
50.    if (childNode.data.search(re) == -1) continue;  
51.    re = new RegExp('(' + keyword.word + ')', 'gi');  
52.    var forkNode = document.createElement('span');  
53.    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>');  
54.    node.replaceChild(forkNode, childNode);  
55.   }  
56.   else if (childNode.nodeType == 1) {  
57.    //childNode is element  
58.    this.colorword(childNode, keyword);  
59.   }  
60.  }  
61. }  
62.   
63. /** 
64.  * 将空格分隔开的关键字转换成对象数组 
65.  * @param {} keywords 
66.  * @return {} 
67.  */  
68. Highlighter.prototype.parsewords = function(keywords) {  
69.  keywords = keywords.replace(/\s+/g, ' ');  
70.  keywords = keywords.split(' ');  
71.  if (keywords == null || keywords.length == 0)  
72.   return null;  
73.    
74.  var results = [];  
75.  for (var i = 0; i < keywords.length; i++) {  
76.   var keyword = {};  
77.   var color = this.colors[i % this.colors.length].split(',');  
78.   keyword.word = keywords[i];  
79.   keyword.bgColor = color[0];  
80.   keyword.foreColor = color[1];  
81.   results.push(keyword);  
82.  }  
83.  return results;  
84. }  
85.   
86. /** 
87.  * 按照字符串长度，由长到短进行排序 
88.  * @param {} list 字符串数组 
89.  */  
90. Highlighter.prototype.sort = function(list) {  
91.  list.sort(function(e1, e2) {  
92.   return e1.length < e2.length;  
93.  });  
94. }  

/** * 高亮显示关键字, 构造函数 * @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; }); }

调用代码如下：

view plain copy to clipboard print ?

1. var hl = new Highlighter();  
2.             hl.highlight(document.body, '世界 需要 和平');  

var hl = new Highlighter(); hl.highlight(document.body, '世界 需要 和平');

参考：

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/greatbag/archive/2006/09/26/1289083.aspx