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

转载于:https://www.cnblogs.com/jeky/archive/2009/03/13/1410914.html