用JS实现高亮显示文章或搜索结果中的关键词

2022-07-15 80酷酷网 80kuku.com

用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 =
    [
        [’阿里西西,alixixi.com,,Web开发,真好吃,哈哈,嘻嘻’],
        [’头晕脑胀,疲乏气短,索然无味,,,折腾,源码下载,西西,站长,程序员,技术,开发’],
        [’怎么了,啊,呀,喂’]
    ];


    $(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; }