用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;
        }

    }


页面调用:

    // 关键词定义
    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兼容模式下测试通过。
如何各位有其他方法或建议的话,请在这里回复,先谢谢了!

posted @ 2009-03-13 17:03 jeky 阅读(...) 评论(...) 编辑 收藏
友情链接:逗死了笑话网 | 网络记事本