JavaScript实现关键字高亮功能

高亮功能主要是指对页面中指定区域的指定文字进行高亮显示，也就是背景着色。一般在搜索结果页面会经常用到这个功能。

下面就为大家提供一种解决方案，用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>

怎么样，很简单吧~

赞 (0)

相关推荐

  • javascript网页关键字高亮代码

    //高亮网页关键字的javascript代码 var keys = [ ["脚本",http://www.jb51.net,"#ff0000"], ["小说",http://www.kanshule.com,"#00ff00"], ["念经","http://www.baidu.com","#0000ff"], ["工会","http:/

  • JavaScript识别网页关键字并进行描红的方法

    JavaScript识别网页关键字并进行描红的方法

    本文实例讲述了JavaScript识别网页关键字并进行描红的方法.分享给大家供大家参考,具体如下: 这里演示JavaScript智能识别网页关键字并加红显示出来,相信这个效果大家不陌生吧,用JS加红关键字要比程序控制输出好得多,必竟将一部分功能交给了客户浏览器,相应减轻了服务器的压力. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-keyword-show-red-color-codes/ 具体代码如下: <!DOCTYPE html P

  • javascript 关键字高亮显示实现代码

    关键字高亮显示 我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET

  • javascript关键字加亮加连接

    Untitled Document #box{border:1px solid #ddd;width:100px;height:100px;} 一个和尚挑水吃.两个和尚抬水吃.三个和尚没水吃.总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题.主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程.为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经:此外,他们还专门花钱请了天主教.基督教的神父传授MBA.神父呆了不久留下几个

  • JavaScript实现关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色.一般在搜索结果页面会经常用到这个功能. 下面就为大家提供一种解决方案,用javascript实现. 首先在<head>中引入下面javascript方法: 复制代码 代码如下: <script type="text/javascript"> //<![CDATA[     //--------begin function fHl(o, flag, rndColor, url)-----

  • vue+Element实现搜索关键字高亮功能

    最近做了一个日志搜索的需求,要在页面上实现海量日志的关键字搜索.为了搜索更清晰,我最终实现了多条件搜索,且搜索结果的记录中的关键字全部高亮. 一.实现思路 1 实时监控表格,实现关键字的定位: 2 点击搜索按钮以后,实现记录中关键字的样式变化(即高亮). 二.实现过程 1 搜索条件表单 了解了实现思路,就让我们一起来看一下实现过程(关键位置均给了注释) <el-form :inline="true" :model="formQuery" > <el

  • JavaScript版代码高亮

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JavaScript版代码高亮</title><link href=&

  • 如何实现IOS_SearchBar搜索栏及关键字高亮

    如何实现IOS_SearchBar搜索栏及关键字高亮

    搜索框的效果演示: 这个就是所谓的搜索框了,那么接下来我们看看如何使用代码来实现这个功能. 我所使用的数据是英雄联盟的英雄名单,是一个JSON数据的txt文件, JSON数据的处理代码如下所示: //获取文件的路径path NSString *path = [[NSBundle mainBundle] pathForResource:@"heros" ofType:@"txt"]; //将路径下的文件转换成NSData数据 NSData *data = [NSDat

  • PHP实现多关键字加亮功能

    PHP实现多关键字加亮功能

    本文主要介绍的是PHP实现多关键字加亮功能,可以实现在搜索的时候进行高亮提醒,具体实现代码如下: 项目结构: 搜索结果:  高亮显示 项目所需数据库结构: 实现代码: conn.php <?php $conn = @ mysql_connect("localhost", "root", "") or die("数据库链接错误"); mysql_select_db("form", $conn); mys

  • 在 Angular 中实现搜索关键字高亮示例

    在 Angular 中,我们不应该试图直接修改 DOM 的内容,当需要更新 DOM 内容的时候,应该修改的其实是我们的数据模型,也就是 $scope 中的数据,Angular 会帮助我们将修改之后的数据展示在页面中. 但是,在有些情况下,比如我们有一个搜索框,希望将搜索的关键字在正文中高亮出来,这时候就会感觉比较吃力了,filter 可以帮助我们处理这种情况. 实际上,很多时候,我们的数据是不能直接输出到 DOM 中的,典型的比如日期,或者货币等等,通常需要将我们内部的数据格式化之后,再输出到页

  • 菜鸟蔡之Ajax复习第一篇(后台asp.net)(传统的JavaScript方法实现Ajax功能)

    其实最简单的可以理解为:JavaScript + XMLHttpRequest + CSS +服务器端的集合,其本质上是一种浏览器端的技术.好了, 简单的描述了一下,现在直接上代码吧! (1).功能描述: 新建两个html页面分别为1.html和2.html,在不刷新的情况下点击1.html页面上的"获取数据"按钮后,将2.html页中的内容显示在1.html页面的<div>标记中. (2).实现代码: 1.html实现代码: 复制代码 代码如下: <head>

  • JavaScript实现换肤功能

    JavaScript实现换肤功能

    一,js换肤的基本原理 基本原理很简单,就是使用 JS 切换对应的 CSS 样式表文件.例如导航网站 Hao123 的右上方就有网页换肤功能.除了切换 CSS 样式表文件之外,通常的网页换肤还需要通过 Cookie 来记录用户之前更换过的皮肤,这样下次用户访问的时候,就可以自动使用上次用户配置的选项. 那么基本工作流程就出来了:访问网页--JS 读取 Cookie --如果没有,使用默认皮肤--如果有,使用指定皮肤:用户点击换肤选项--JS 控制替换对应的 CSS 样式表--将皮肤选项写进 Co

  • 常用Javascript函数与原型功能收藏(必看篇)

    如下所示: // 重复字符串 String.prototype.repeat = function(n) { return new Array(n+1).join(this); } // 替换全部 String.prototype.replaceAll = function(str1, str2) { return this.replace(new RegExp(str1, "gm"), str2); } // 清除空格 String.prototype.trim = function

随机推荐