用Javascript实现关键词的高亮显示
最近在搞一个网站,需要在内容区域高亮显示一些关键词。本来想在后台页面用c#实现,后来感觉这样做不太可取。因为我想高亮的高键词有n个之多,在服务端循环处理的话,势必会影响效率、占用服务器资源。所以,才考虑使用JS来实现,代码如下:
一个小类(可以放置到一个*.js文件中)
function XP_Highlight()
{
this.KeyWords = null;
// 格式化关键词
this.formatKeyword = function(content, keyword)
{
keyword = keyword.replace(/(^\s*)|(\s*$)/g, "");
if(keyword == '')
return content;
var reg = new RegExp('('+keyword+')', 'gi');
return content.replace(reg, '<em>$1</em>');
}
// 重绘内容区域
this.refreshContent = function(contentID)
{
var content = document.getElementById(contentID).innerHTML;
for(var i = 0; i < keywords.length; i ++)
{
var strKey = keywords[i].toString();
var arrKey = strKey.split(',');
for(var j = 0; j < arrKey.length; j ++)
{
var key = arrKey[j];
content = this.formatKeyword(content, key);
}
}
document.getElementById(contentID).innerHTML = content;
}
}
{
this.KeyWords = null;
// 格式化关键词
this.formatKeyword = function(content, keyword)
{
keyword = keyword.replace(/(^\s*)|(\s*$)/g, "");
if(keyword == '')
return content;
var reg = new RegExp('('+keyword+')', 'gi');
return content.replace(reg, '<em>$1</em>');
}
// 重绘内容区域
this.refreshContent = function(contentID)
{
var content = document.getElementById(contentID).innerHTML;
for(var i = 0; i < keywords.length; i ++)
{
var strKey = keywords[i].toString();
var arrKey = strKey.split(',');
for(var j = 0; j < arrKey.length; j ++)
{
var key = arrKey[j];
content = this.formatKeyword(content, key);
}
}
document.getElementById(contentID).innerHTML = content;
}
}
页面调用:
// 关键词定义
var keywords =
[
['心情好转,好梦一场,,真不错,真好吃,哈哈,嘻嘻'],
['头晕脑胀,疲乏气短,索然无味,,,折腾,生病,抱怨,疾病,累,疼,病'],
['怎么了,啊,呀,喂']
];
$(document).ready(function(){
var hl = new XP_Highlight();
hl.keywords = keywords; // 这里是关键词的定义
hl.refreshContent('res'); // 这里是要格式化内容的元素Id号
});
var keywords =
[
['心情好转,好梦一场,,真不错,真好吃,哈哈,嘻嘻'],
['头晕脑胀,疲乏气短,索然无味,,,折腾,生病,抱怨,疾病,累,疼,病'],
['怎么了,啊,呀,喂']
];
$(document).ready(function(){
var hl = new XP_Highlight();
hl.keywords = keywords; // 这里是关键词的定义
hl.refreshContent('res'); // 这里是要格式化内容的元素Id号
});
CSS定义(可以设置多种风格,以支持不同类型的关键词):
em { font-size:small; color:#CC0033; font-style:normal; }
结束语:
以上代码在 FF3.0 及 IE8兼容模式下测试通过。
如何各位有其他方法或建议的话,请在这里回复,先谢谢了!