用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 = 
    [
        [’阿里西西,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; }

时间： 2024-11-02 20:30:15

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

JS实现表格数据各种搜索功能的方法

 这篇文章主要介绍了JS实现表格数据各种搜索功能的方法,可实现忽略大小写,模糊搜索,多关键搜索等功能,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&

利用原生JS自动生成文章标题树的实例_javascript技巧

实现原理很简单,就是循环文章模块,并抽取其中的h2.h3标签,将其中的内容赋予给新建的title树. 代码如下: HTML代码: <div class="contextBox"> <div id="article"> <h2>二级标题</h2> <h3>三级标题</h3> <p>hello hello hello hello hello hello hello hello hello

关键字-搜索网页中的内容html+js

问题描述 搜索网页中的内容html+js 用js实现,按照输入的搜索关键字,筛选网页当中的内容.网页上主要是新闻链接.只显示包含关键字的新闻链接.然后在别的网页搜索的时候,如果选择搜索新闻,也会跳转到这个网页,然后执行新闻的筛选. 解决方案 获取页面上的所有a对象变量innerHTML属性是否包含你的关键字,包含就显示,不包含隐藏.不知道你的新闻链接怎么导入页面的,如果是iframe框架别人的网页跨域了是获取不到链接对象的 <a href="#">关键字1</a>

【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

原文:[高德地图API]从零开始学高德JS API(四)搜索服务--POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示)

JS实现表格数据各种搜索功能的方法_javascript技巧

本文实例讲述了JS实现表格数据各种搜索功能.可忽略大小写,模糊搜索,多关键搜索.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html>  <head>   <meta charset="utf-8">   <title></title>   <script type="text/javascript">    window.onl

js实现YouKu的漂亮搜索框效果_javascript技巧

本文实例讲述了js实现YouKu的漂亮搜索框效果.分享给大家供大家参考.具体如下: 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-youku-search-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

浅析百度搜索结果中出现标准格式日期的原因

自打奇虎上线了搜索业务以后,百度一直都在做调整,声称是为了进一步提高用户的搜索体验以及净化互联网环境,虽然众多站长被这一系列的调整搞得心里七上八下,很多"中枪"的站长甚至说百度这一系列的举动完全是为了它自己.毫无疑问,百度作为一家商业公司不管他做什么样的调整,不管是好是坏最终肯定是为了自己,但通过我对普通用户的调研发现似乎他们这些调整用户确实感觉更好了. 百度近两年来的那些变化我想作为站长们来说肯定是最熟悉不过的了,比如说什么绿萝算法.石榴算法等等,而我今天要跟大家分析的就是百度搜索结

细数百度搜索结果中出现的五大变化

百度作为国内使用人数最多的搜索引擎,也是不断进步的(排除搜索结果中以自己产品结果为优先),从笔者开始关注搜索引擎开始,搜索结果总是不断在变化着.一方面是为了更好的用户体验,另一方面则是百度自身的垄断野心.本篇文章特别对百度搜索结果中出现的四大变化进行图解和说明,不同行业的网站做优化必然要参考搜索结果,对症下药才是王道. 一.搜索结果中出现的"百度提醒您"; 其实搜索结果中出现诈骗网站的概率还是挺大的,度娘也无法一一识别,记得去年月饼诈骗事件让度娘的声誉受损,度娘可不能总因为诈骗而受毁谤

细谈文章页seo优化技巧之关键词分布

之前分享了自己关于利用文章页打造长尾关键词的经验,参见<巧用文章页快速打造长尾排名>.在交流的过程中,很多朋友以为堆砌关键词在文章页面seo中是关键.这里就不得不提页面的关键词分布了. 目前的关键词分布理论中,比较推崇的是夫唯老师提出的四处一词概念,百度百科中有很详细的解释.主要操作如下: 1.网页标题与链接中含有目标关键词.标题是至关重要的位置,不用多讲了.而网页链接中的关键词,对于目前的部分程序来说,也可以实现. 2.meta元素中的关键词分布.以目前搜索引擎的技术来说,meta元素所占的