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 学习小结(适合新手参考)
Jul 30 Javascript
JavaScript Event学习第五章 高级事件注册模型
Feb 07 Javascript
javascript利用初始化数据装配模版的实现代码
Nov 17 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
js拖动div 当鼠标移动时整个div也相应的移动
Nov 21 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
详解webpack+gulp实现自动构建部署
Jun 29 Javascript
angularJS的radio实现单项二选一的使用方法
Feb 28 Javascript
详解JavaScript作用域和作用域链
Mar 19 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 Javascript
小程序实现上下切换位置
Nov 16 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
php对数组排序代码分享
2014/02/24 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
PHP模板解析类实例
2015/07/09 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
Nodejs+express+html5 实现拖拽上传
2014/08/08 NodeJs
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
js获取表格的行数和列数的方法
2015/10/23 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
Bootstrap table使用方法总结
2017/05/10 Javascript
Electron-vue脚手架改造vue项目的方法
2018/10/22 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
jquery实现广告上下滚动效果
2021/03/04 jQuery
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
python实现从本地摄像头和网络摄像头截取图片功能
2019/07/11 Python
Django model select的多种用法详解
2019/07/16 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python中web框架的自定义创建
2019/09/08 Python
Python2比较当前图片跟图库哪个图片相似的方法示例
2019/09/28 Python
你可能不知道的Python 技巧小结
2020/01/29 Python
Python3加密解密库Crypto的RSA加解密和签名/验签实现方法实例
2020/02/11 Python
HTML5使用ApplicationCache接口实现离线缓存技术解决离线难题
2012/12/13 HTML / CSS
iframe跨域的几种常用方法
2019/11/11 HTML / CSS
美国的Eastbay旗下的运动款子品牌:Final-Score
2018/01/01 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
SQL Server提供的3种恢复模型都是什么? 有什么区别?
2012/05/13 面试题
请解释virtual关键字的含义
2015/06/17 面试题
服务之星获奖感言
2014/01/21 职场文书
初中英语演讲稿
2014/04/29 职场文书
2015年环卫工作总结
2015/04/28 职场文书
python必学知识之文件操作(建议收藏)
2021/05/30 Python
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
Django框架中视图的用法
2022/06/10 Python