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 判断浏览器类型 去全角、半角空格 自动关闭当前窗口
Apr 10 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
Mar 04 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 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
Terran剧情介绍
2020/03/14 星际争霸
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP文件上传判断file是否己选择上传文件的方法
2014/11/10 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
写的htc的数据表格
2007/01/20 Javascript
Nodejs实现的一个简单udp广播服务器、客户端
2014/09/25 NodeJs
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
JavaScript DOM元素尺寸和位置
2015/04/13 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
2015/06/01 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
javascript防篡改对象实例详解
2017/04/10 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
[55:35]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第二场 1月22日
2021/03/11 DOTA
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python中实现最小二乘法思路及实现代码
2018/01/04 Python
python实现泊松图像融合
2018/07/26 Python
用python脚本24小时刷浏览器的访问量方法
2018/12/07 Python
在Pandas中处理NaN值的方法
2019/06/25 Python
centos7之Python3.74安装教程
2019/08/15 Python
CentOS7下安装python3.6.8的教程详解
2020/01/03 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
初中生300字旷课检讨书
2014/11/19 职场文书
2016社区平安家庭事迹材料
2016/02/26 职场文书
数据库的高级查询六:表连接查询:外连接(左外连接,右外连接,UNION关键字,连接中ON与WHERE的不同)
2021/04/05 MySQL
JavaScript数组 几个常用方法总结
2021/11/11 Javascript
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL
Python Matplotlib绘制动画的代码详解
2022/05/30 Python