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陷阱清单
May 31 Javascript
登陆成功后自动计算秒数执行跳转
Jan 23 Javascript
jQuery中使用data()方法读取HTML5自定义属性data-*实例
Apr 11 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
Mar 28 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
整理关于Bootstrap列表组的慕课笔记
Mar 29 Javascript
jquery append与appendTo方法比较
May 24 jQuery
jQuery为某个div加入行样式
Jun 09 jQuery
JavaScript异步加载问题总结
Feb 17 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
浅谈Vue项目骨架屏注入实践
Aug 05 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/11/29 PHP
Jquery优化效率 提升性能解决方案
2010/09/06 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
2014/05/05 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
JS延时提示框实现方法详解
2015/11/26 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
浅谈js中的this问题
2017/08/31 Javascript
vue实现选项卡及选项卡切换效果
2018/04/24 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
2018/11/25 Javascript
微信小程序 可搜索的地址选择实现详解
2019/08/28 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
2020/11/06 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
使用python 获取进程pid号的方法
2014/03/10 Python
关于你不想知道的所有Python3 unicode特性
2014/11/28 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
python 删除指定时间间隔之前的文件实例
2018/04/24 Python
Django 开发调试工具 Django-debug-toolbar使用详解
2019/07/23 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
详解Python Opencv和PIL读取图像文件的差别
2019/12/27 Python
tensorflow模型保存、加载之变量重命名实例
2020/01/21 Python
Python文件操作基础流程解析
2020/03/19 Python
python 连续不等式语法糖实例
2020/04/15 Python
基于PyQT实现区分左键双击和单击
2020/05/19 Python
PyInstaller运行原理及常用操作详解
2020/06/13 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
拉斯维加斯酒店、演出、旅游、俱乐部及更多:Vegas.com
2019/02/28 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
美术国培研修感言
2014/02/12 职场文书
大学生实习推荐信
2015/03/27 职场文书
监理中标通知书
2015/04/16 职场文书
关于感恩的作文
2019/08/26 职场文书