`
tdwm
  • 浏览: 49443 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js控制页面文字高亮显示

阅读更多

<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>
 记录一下
分享到:
评论

相关推荐

    页面高亮搜索到的文字

    工作之后整理的关于前端页面,高亮显示搜索到的文字的例子。

    vue高亮显示插件

    使用sublime编写vue时,可以让vue.js代码高亮显示的插件,

    用JS将搜索的关键字高亮显示实现代码

    介绍了JS将搜索的关键字高亮显示实现代码,有需要的朋友可以参考一下

    highlight.js实现网页关键词高亮显示

    highlight.js是一个高亮显示插件,可实现网页上的搜索关键词高亮显示,如示例演示,在文本框中输入搜索的关键字,下面的一段文字中,所有出现搜索词的地方,都会被高亮显示,醒目的将结果显示给用户,而且使用起来...

    记事本软件 还原 可以高亮显示各种语法 自定义语法高亮 支持ANSI,Unicode,UTF-8等编码互换

    6 对括号{}〔〕()可以高亮配对显示,方便查看(仅对英文符号有效) 7 可以自定义代码页和字符集,对中文支持良好 8 使用标准的正则表达式搜索和替换 9 可以使用半透明模式,cool 10 快速放大、缩小页面,不用...

    【原创】多关键词搜索高亮标红关键词的JS方法

    实现JS多关键词高亮方法,可以改造查询条件直接引用该JS方法使用,更加简单简洁实现查询高亮关键词。多关键词当前以空格隔开演示。

    前端实现页面搜索高亮

    通过js实现当前页面搜索文字高亮,挺好用的,项目用到搜索高亮,要前端实现,我也是找了好久确定用这个包,感谢原分享者,想免费分享这个包,为何资源分数最低为1

    jquery鼠标悬停头像高亮显示说明效果

    适合做网站上会员头像排列效果,当鼠标悬停在头像上,当前头像高亮显示,并显示对应的文字说明,效果很不错 使用方法: 1、在网页head中引入lanrenzhijia.css样式以及jquery库 2、将html代码复制到你...

    页面内搜索关键字符高亮并定位

    页内搜索并高亮定位网上有很多代码的例子,都是一样的,主要是用js实现的,下载下来之后,在页顶部若有多余字符第二次定位搜索会出现"{searchHL}",但楼主是用C#,顶部有声明信息,于是修改了下代码,还好解决了这个...

    JavaScript实现关键字高亮功能

    高亮功能主要是指对页面中指定区域的指定文字进行高亮显示,也就是背景着色。一般在搜索结果页面会经常用到这个功能。 下面就为大家提供一种解决方案,用javascript实现。 首先在&lt;head&gt;中引入下面javascript...

    js获取页面控件坐标.pdf

    js获取页面控件坐标.pdf

    jQuery过滤HTML标签并高亮显示关键字的方法

    jQuery实现网页关键字过滤效果,将需要过滤的文字定义在JavaScript中,可定义多个,不过要修改JS代码为数组,这样可过滤出多个不同的关键字,本例只是为你演示一个基本的功能,更多过滤功能请自己挖掘吧。...

    高亮红色的纯CSS网站导航菜单代码.rar

    高亮红色的纯CSS网站导航菜单代码,默认状态下菜单是深灰色的,当鼠标放在任意一个菜单文字上时,该菜单背景变红色,高亮显示,变得光彩夺目,色彩对比强烈起来,高亮显示的菜单项也可很好的向用户指引当前的位置,...

    文字高亮过滤插件jcTextHighlighterFilter

    一款文字高亮过滤插件,可以实现用户输入字符后页面上指定区域高亮显示,当然此插件也可以部分代替浏览器自带的搜索功能。

    pdfjs_1.1.159添加在指定页码使用关键词检索

    pdfjs_1.1.159内添加在指定页码使用关键词进行在当前页面进行检索,并且可选所有关键词高亮

    详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案

    最近需要给HTML5的WebAPP在页面上实现一个复制功能:用户点击长按文本会全选文字并弹出系统“复制”菜单,用户可以点击“复制”进行复制操作,然后粘贴到App...包括模拟focus input,JavaScript Selection, 使用a标签尝

    <编程高亮文本编辑器>Notepad2改良版(修复特殊字符崩溃BUG)

    在部分系统中, 使用文字高亮方案, 输入部分特殊字符程序会崩溃. 例如批处理高亮方案中,在文本输入“for %%”程序出错的现象. 【基本介绍】 这是一个用来取代 Notepad 的免费程序。绿色软件,安装完毕后只有一个主...

    tinybox JS网页高亮弹出框插件

    摘要:脚本资源,jQuery,tinybox,lightbox,高亮弹出框 JS网页高亮框插件,一个使用jquery实现的高亮弹出框插件tinybox,可以实现文字、图片、普通html内容的高亮弹出显示,可以设置弹出框自动关闭时间,可以通过ajax...

    文字高亮博客

    查看按单词分组的所有突出显示的单词的页面,单击后将显示所有带有突出显示单词的博客,并且这也是突出显示单词之前和之后的原始文本的摘要版本 单击突出显示的单词进入实际的博客文章 响应式和整洁的用户界面 ...

    IOS WebVIew 获取百度搜索框内容

    用WebView打开Http://www.baidu.co网页 在搜索框输入需要搜索的内容 点击百度一下按钮 得到框内文字 。

Global site tag (gtag.js) - Google Analytics