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 相关文章推荐
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
jquery 操作DOM的基本用法分享
Apr 05 Javascript
jquery easyui combox一些实用的小方法
Dec 25 Javascript
js的2种继承方式详解
Mar 04 Javascript
javascript制作2048游戏
Mar 30 Javascript
完美实现bootstrap分页查询
Dec 09 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
Javascript实现图片不间断滚动的代码
Jun 22 Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
简单通过settimeout看javascript的运行机制
May 10 Javascript
Vue动态生成表格的行和列
Jul 18 Javascript
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
解析如何修改phpmyadmin中的默认登陆超时时间
2013/06/25 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
如何写php守护进程(Daemon)
2015/12/30 PHP
Smarty实现页面静态化(生成HTML)的方法
2016/05/23 PHP
PHP convert_cyr_string()函数讲解
2019/02/13 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
基于thinkphp5框架实现微信小程序支付 退款 订单查询 退款查询操作
2020/08/17 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
javascript数组使用调用方法汇总
2007/12/08 Javascript
CCPry JS类库 代码
2009/10/30 Javascript
node.js中的http.request方法使用说明
2014/12/14 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
jQuery插件pagewalkthrough实现引导页效果
2015/07/05 Javascript
jQuery简单入门示例之用户校验demo示例
2016/07/09 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
vue实现下拉加载其实没那么复杂
2019/08/13 Javascript
[03:27]《辉夜杯》线下训练营 导师CU和海涛指点迷津
2015/10/23 DOTA
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
从局部变量和全局变量开始全面解析Python中变量的作用域
2016/06/16 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python实现的堆排序算法原理与用法实例分析
2017/11/22 Python
python3中获取文件当前绝对路径的两种方法
2018/04/26 Python
用django-allauth实现第三方登录的示例代码
2019/06/24 Python
python实现高斯(Gauss)迭代法的例子
2019/11/20 Python
Python pip install如何修改默认下载路径
2020/04/29 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
Pycharm编辑器功能之代码折叠效果的实现代码
2020/10/15 Python
python 进程池pool使用详解
2020/10/15 Python
党员先锋岗事迹材料
2014/05/08 职场文书
2014年班组建设工作总结
2014/12/01 职场文书
介绍信范文
2015/01/31 职场文书
社区五一劳动节活动总结
2015/02/09 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
北京青年观后感
2015/06/15 职场文书
2015暑期爱心支教策划书
2015/07/14 职场文书