用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兼容模式下测试通过。
如何各位有其他方法或建议的话，请在这里回复，先谢谢了！