JavaScript实现关键字高亮功能


Posted in Javascript onNovember 12, 2014

高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色。一般在搜索结果页面会经常用到这个功能。

下面就为大家提供一种解决方案,用javascript实现。

首先在<head>中引入下面javascript方法:

<script type="text/javascript">

//<![CDATA[ 

    //--------begin function fHl(o, flag, rndColor, url)------------------// 

    function fHl(o, flag, rndColor, url){ 

        /// <summary>

        ///     使用 javascript HTML DOM 高亮显示页面特定字词.

        ///     实例:

        ///         fHl(document.body, '纸伞|她'); 

        ///         这里的body是指高亮body里面的内容。

        ///         fHl(document.body, '希望|愁怨', false, '/'); 

        ///         fHl(document.getElementById('at_main'), '独自|飘过|悠长', true, 'search.asp?keyword='); 

        ///         这里的'at_main'是指高亮id='at_main'的div里面的内容。search.asp?keyword=指给关键字加的链接地址,

        ///         我这里加了一个参数,在后面要用到。可以是任意的地址。        

        /// </summary>

        /// <param name="o" type="Object">

        ///     对象, 要进行高亮显示的对象. 

        /// </param>

        /// <param name="flag" type="String">

        ///     字符串, 要进行高亮的词或多个词, 使用 竖杠(|) 分隔多个词 . 

        /// </param>

        /// <param name="rndColor" type="Boolean">

        ///     布尔值, 是否随机显示文字背景色与文字颜色, true 表示随机显示. 

        /// </param>

        /// <param name="url" type="String">

        ///     URI, 是否对高亮的词添加链接.

        /// </param>                        

        /// <return></return>

        var bgCor=fgCor=''; 

        if(rndColor){ 

            bgCor=fRndCor(10, 20); 

            fgCor=fRndCor(230, 255); 

        } else { 

            bgCor='#F0F'; 

            fgCor='black'; 

        } 

        var re=new RegExp(flag, 'i'); 

        for(var i=0; i<o.childNodes.length; i++){     

            var o_=o.childNodes[i]; 

            var o_p=o_.parentNode; 

            if(o_.nodeType==1) { 

                fHl(o_, flag, rndColor, url);                 

             } else if (o_.nodeType==3) { 

                if(!(o_p.nodeName=='A')){ 

                    if(o_.data.search(re)==-1)continue; 

                    var temp=fEleA(o_.data, flag); 

                    o_p.replaceChild(temp, o_); 

                } 

            }

        } 

        //------------------------------------------------ 

        function fEleA(text, flag){ 

            var style=' style="background-color:'+bgCor+';color:'+fgCor+';" ' 

            var o=document.createElement('span'); 

            var str=''; 

            var re=new RegExp('('+flag+')', 'gi'); 

            if(url){ 

                str=text.replace(re, '<a href="'+url+ 

                '$1"'+style+'>$1</a>'); //这里是给关键字加链接,红色的$1是指上面链接地址后的具体参数。

            } else { 

                str=text.replace(re, '<span '+style+'>$1</span>'); //不加链接时显示

            } 

            o.innerHTML=str; 

            return o; 

        } 

        //------------------------------------------------ 

        function fRndCor(under, over){ 

            if(arguments.length==1){ 

                var over=under; 

                    under=0; 

            }else if(arguments.length==0){ 

                var under=0; 

                var over=255; 

            } 

            var r=fRandomBy(under, over).toString(16); 

                r=padNum(r, r, 2); 

            var g=fRandomBy(under, over).toString(16); 

                g=padNum(g, g, 2); 

            var b=fRandomBy(under, over).toString(16); 

                b=padNum(b, b, 2); 

                //defaultStatus=r+' '+g+' '+b 

            return '#'+r+g+b; 

            function fRandomBy(under, over){ 

                switch(arguments.length){ 

                    case 1: return parseInt(Math.random()*under+1); 

                    case 2: return parseInt(Math.random()*(over-under+1) + under); 

                    default: return 0; 

                } 

            }

            function padNum(str, num, len){ 

                var temp='' 

                for(var i=0; i<len;temp+=num, i++); 

                return temp=(temp+=str).substr(temp.length-len); 

            } 

        } 

    }

    //--------end function fHl(o, flag, rndColor, url)--------------------// 

//]]> 

</script>

上面的fHl方法就是用来实现高亮的,参数的含义在注释中有写。

然后在页面最后调用fHl方法,对指定区域指定文字高亮着色,例如:

<script type="text/javascript">

fHl(document.body, '高亮');   //对页面body的区域中的“高亮”文字背景着色

</script>

怎么样,很简单吧~

Javascript 相关文章推荐
显示js对象所有属性和方法的函数
Oct 16 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
JavaScript比较两个对象是否相等的方法
Feb 06 Javascript
JavaScript中循环遍历Array与Map的方法小结
Mar 12 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
JS实现的四级密码强度检测功能示例
May 11 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
Mar 01 Javascript
vue-cli项目使用mock数据的方法(借助express)
Apr 15 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
javascript的函数作用域
Nov 12 #Javascript
浅析javascript的间隔调用和延时调用
Nov 12 #Javascript
jQuery的deferred对象详解
Nov 12 #Javascript
探寻Javascript执行效率问题
Nov 12 #Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 #Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 #Javascript
JavaScript中提前声明变量或函数例子
Nov 12 #Javascript
You might like
php 分库分表hash算法
2009/11/12 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
js活用事件触发对象动作
2008/08/10 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
2015/09/09 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
Vue插件写、用详解(附demo)
2017/03/20 Javascript
JS使用百度地图API自动获取地址和经纬度操作示例
2019/04/16 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
vue Tab切换以及缓存页面处理的几种方式
2019/11/05 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[54:19]完美世界DOTA2联赛PWL S2 Magma vs PXG 第二场 11.28
2020/12/01 DOTA
Python的Bottle框架中获取制定cookie的教程
2015/04/24 Python
Python 多进程并发操作中进程池Pool的实例
2017/11/01 Python
python 获取字符串MD5值方法
2018/05/29 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
python语言中有算法吗
2020/06/16 Python
python脚本和网页有何区别
2020/07/02 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
学校七一活动方案
2014/01/19 职场文书
教学实验楼管理制度
2014/02/01 职场文书
保护水资源的标语
2014/06/17 职场文书
作文评语集锦
2014/12/25 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
如何设计高效合理的MySQL查询语句
2021/05/26 MySQL