javascript 對html內容的關鍵字高亮顯示

通過javascript對html裡面內容進行高亮顯示， 可以同時高亮多個關鍵字， 每個關鍵字以不同的顏色展示

代碼如下：

/**<br /> * 高亮顯示關鍵字, 建構函式<br /> * @param {} colors 顏色數組，其中每個元素是一個 '背景色,前景色彩' 組合<br /> */<br />var Highlighter = function(colors) {<br /> this.colors = colors;<br /> if (this.colors == null) {<br /> //預設顏色<br /> this.colors = ['#ffff00,#000000','#dae9d1,#000000','#eabcf4,#000000',<br /> '#c8e5ef,#000000','#f3e3cb, #000000', '#e7cfe0,#000000',<br /> '#c5d1f1,#000000','#deeee4, #000000','#b55ed2,#000000',<br /> '#dcb7a0,#333333', '#7983ab,#000000', '#6894b5, #000000'];<br /> }<br />}</p><p>/**<br /> * 高亮顯示關鍵字<br /> * @param {} node html element<br /> * @param {} keywords 關鍵字， 多個關鍵字可以通過空格隔開， 其中每個關鍵字會以一種顏色顯式<br /> *<br /> * 用法：<br /> * var hl = new Highlighter();<br /> * hl.highlight(document.body, '這個 世界 需要 和平');<br /> */<br />Highlighter.prototype.highlight = function(node, keywords) {<br /> if (!keywords || !node || !node.nodeType || node.nodeType != 1)<br /> return;</p><p> keywords = this.parsewords(keywords);<br /> if (keywords == null)<br /> return;</p><p> for (var i = 0; i < keywords.length; i++) {<br /> this.colorword(node, keywords[i]);<br /> }<br />}</p><p>/**<br /> * 對所有#text的node進行尋找，如果有關鍵字則進行著色<br /> * @param {} node 節點<br /> * @param {} keyword 關鍵字結構體，包含了關鍵字、前景色彩、背景色<br /> */<br />Highlighter.prototype.colorword = function(node, keyword) {<br /> for (var i = 0; i < node.childNodes.length; i++) {<br /> var childNode = node.childNodes[i];</p><p> if (childNode.nodeType == 3) {<br /> //childNode is #text<br /> var re = new RegExp(keyword.word, 'i');<br /> if (childNode.data.search(re) == -1) continue;<br /> re = new RegExp('(' + keyword.word + ')', 'gi');<br /> var forkNode = document.createElement('span');<br /> 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>');<br /> node.replaceChild(forkNode, childNode);<br /> }<br /> else if (childNode.nodeType == 1) {<br /> //childNode is element<br /> this.colorword(childNode, keyword);<br /> }<br /> }<br />}</p><p>/**<br /> * 將空格分隔開的關鍵字轉換成對象數組<br /> * @param {} keywords<br /> * @return {}<br /> */<br />Highlighter.prototype.parsewords = function(keywords) {<br /> keywords = keywords.replace(//s+/g, ' ');<br /> keywords = keywords.split(' ');<br /> if (keywords == null || keywords.length == 0)<br /> return null;</p><p> var results = [];<br /> for (var i = 0; i < keywords.length; i++) {<br /> var keyword = {};<br /> var color = this.colors[i % this.colors.length].split(',');<br /> keyword.word = keywords[i];<br /> keyword.bgColor = color[0];<br /> keyword.foreColor = color[1];<br /> results.push(keyword);<br /> }<br /> return results;<br />}</p><p>/**<br /> * 按照字串長度，由長到短進行排序<br /> * @param {} list 字串數組<br /> */<br />Highlighter.prototype.sort = function(list) {<br /> list.sort(function(e1, e2) {<br /> return e1.length < e2.length;<br /> });<br />}<br />

 

調用代碼如下：

var hl = new Highlighter();<br />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

Regex：請看本blog關於javascriptRegex的描述

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