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 03 Javascript
ExtJS 2.0 GridPanel基本表格简明教程
May 25 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
js实现正方形颜色从下往上升的效果
Aug 04 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
Node.js的环境安装配置(使用nvm方式)
Oct 11 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 Javascript
JS库之Three.js 简易入门教程(详解之一)
Sep 13 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
Vue插件之滑动验证码
Sep 21 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
打造计数器DIY三步曲(上)
2006/10/09 PHP
PHP 危险函数解释 分析
2009/04/22 PHP
基于HTTP长连接的&quot;服务器推&quot;技术的php 简易聊天室
2009/10/31 PHP
php数字运算验证码的实现代码
2015/07/30 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
学习JavaScript图片预加载模块
2016/11/07 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
vue中的非父子间的通讯问题简单的实例代码
2017/07/19 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
JS继承实现方法及优缺点详解
2020/09/02 Javascript
微信小程序picker组件两列关联使用方式
2020/10/27 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
对python中的 os.mkdir和os.mkdirs详解
2018/10/16 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
使用Django xadmin 实现修改时间选择器为不可输入状态
2020/03/30 Python
django queryset相加和筛选教程
2020/05/18 Python
python中K-means算法基础知识点
2021/01/25 Python
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
ToysRus日本官网:玩具反斗城
2018/09/08 全球购物
体育老师的教学自我评价分享
2013/11/19 职场文书
差生评语大全
2014/05/04 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
目标责任书格式范文
2015/05/11 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
简历自我评价范文
2019/04/24 职场文书
教你如何用cmd快速登录服务器
2022/06/10 Servers
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang