javascriptを通じて)中のキーワードがハイライトされます.
3930 ワード
もっと読む
javascriptを通じて)中身をハイライト表示します.複数のキーワードを同時に高亮にして、キーワードごとに異なる色で展示します.
コードは以下の通りです
html dom: http://www.cnblogs.com/x116/articles/1083915.html
javascriptは対象に向かっています.http://www.cnblogs.com/Luoke365/archive/2007/08/04/842608.html
正規表現:このブログを見てください.javascript正規表現についての説明
javascriptハイライト:http://www.cnblogs.com/jenry/archive/2008/02/23/1078807.html
回転:http://blog.csdn.net/freewave/article/details/4277386
javascriptを通じて)中身をハイライト表示します.複数のキーワードを同時に高亮にして、キーワードごとに異なる色で展示します.
コードは以下の通りです
/**
* ,
* @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, '$1');
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
正規表現:このブログを見てください.javascript正規表現についての説明
javascriptハイライト:http://www.cnblogs.com/jenry/archive/2008/02/23/1078807.html
回転:http://blog.csdn.net/freewave/article/details/4277386