`
tdwm
  • 浏览: 50008 次
  • 性别: 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>
 记录一下
分享到:
评论

相关推荐

    jQuery查找关键词文字高亮显示代码

    本示例中的"jQuery查找关键词文字高亮显示代码"是一个实用的功能,用于提升用户体验,特别是在用户进行搜索时。当用户在搜索框中输入关键词后,页面上与关键词匹配的部分会被高亮显示,使得用户能快速定位到相关内容...

    Jquery 文字高亮显示

    综上所述,通过结合 jQuery 的选择器、事件处理和 CSS 样式,我们可以轻松实现网页上的文字高亮显示。在实际项目中,可以根据需求调整代码,例如添加动画效果,或者限制高亮的元素类型,以提供更佳的用户体验。在...

    jquery段落文字内容高亮显示.rar

    总的来说,“jquery段落文字内容高亮显示”是一个实用的前端技术,它结合了jQuery的强大功能和CSS的样式控制,帮助开发者创造出更加生动和互动的网页。通过深入理解这个主题,开发者能够更好地满足用户在查找、阅读...

    html5双击选中文字高亮显示.zip

    在这个"html5双击选中文字高亮显示.zip"文件中,我们关注的是一个基于HTML5的特定交互效果:当用户双击段落文字时,被选中的文字会以高亮的形式显示出来,同时可能伴随着遮罩层效果,为用户提供更直观的操作反馈。...

    Js高亮显示文本输入框.rar

    在JavaScript编程中,高亮显示文本输入框是一个常见的需求,特别是在开发富文本编辑器、代码编辑器或搜索功能时。这个“Js高亮显示文本输入框.rar”压缩包可能包含了实现这一功能的相关代码和资源。下面我们将深入...

    jQuery查找关键词文字高亮显示代码.zip

    在这个名为"jQuery查找关键词文字高亮显示代码.zip"的压缩包中,包含了一个使用jQuery实现的搜索关键词高亮显示的示例。这个功能在很多场合都非常实用,比如搜索引擎结果展示或者文本搜索定位。 首先,`index.html`...

    jquery text文本框搜索段落文本关键词文字高亮显示

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题聚焦于利用jQuery实现一个功能:在文本框输入关键词后,自动搜索页面中的段落文本,并高亮显示匹配到的...

    jQuery段落文字内容高亮显示提示-20130712

    本文将深入探讨如何使用jQuery实现段落文字内容的高亮显示提示,以此提升网页用户体验。 首先,我们要了解jQuery的核心概念。jQuery通过一个简洁的语法封装了大量的JavaScript方法,使得开发者可以更高效地进行页面...

    jquery段落文字内容高亮显示提示

    在标题“jquery段落文字内容高亮显示提示”中,我们聚焦于一个特定的功能:如何使用 jQuery 实现文本高亮显示,并提供用户提示。下面将详细介绍这个主题。 首先,要实现文本高亮显示,我们需要找到目标段落(`&lt;p&gt;`...

    jquery高亮插件(支持textarea内容高亮)

    在网页开发中,有时我们需要对页面上的特定文本或者关键词进行高亮显示,以突出其重要性或帮助用户快速定位。这时,jQuery高亮插件就能派上用场。本文将详细介绍一个支持textarea内容高亮的jQuery插件,及其应用方法...

    高亮显示关键字 -- js插件

    总的来说,这个"高亮显示关键字 -- js插件"是一个解决特定问题的实用工具,它体现了JavaScript在网页交互和数据可视化方面的强大能力。对于开发者而言,掌握如何创建和使用这样的插件,有助于提升网页的用户体验和...

    html5鼠标双击段落文字高亮显示遮罩层效果代码

    HTML5是一种先进的网页开发语言,它为网页开发者提供了...这就是HTML5、JavaScript和CSS3结合实现的鼠标双击段落文字高亮显示遮罩层效果。这个技术在创建交互式网页或在线阅读应用时非常有用,可以提升用户的浏览体验。

    搜索内容高亮显示

    本示例主要探讨如何实现这个功能,以"搜索栏输入文字后,在内容中高亮显示搜索文字demo"为例进行讲解。 首先,我们要明白搜索高亮的基本原理。当用户在搜索栏输入关键词后,系统会遍历内容,找到与关键词匹配的部分...

    vue高亮显示插件

    为了更好地编写 Vue.js 代码,我们可以安装特定的插件来实现代码的高亮显示,提升代码可读性和编写体验。 "vue高亮显示插件"是专门为 Sublime Text 设计的,用于在编辑 Vue.js 项目时提供语法高亮支持。这样的插件...

    页面高亮搜索到的文字

    在前端开发中,"页面高亮搜索到的文字"是一个常见的需求,特别是在文本检索或阅读器应用中。这个功能能够帮助用户快速定位并突出显示他们在页面上搜索的关键字,提高用户体验。下面将详细介绍这一技术实现的核心知识...

    纯CSS3实现DIV高亮显示特效

    "纯CSS3实现DIV高亮显示特效"是一种技术,它利用CSS3的特性,无需依赖JavaScript或图像,就能创建出吸引人的高亮效果。这篇文章将深入探讨如何使用CSS3来实现这一效果。 首先,我们要了解CSS3的一些基本概念。CSS3...

    鼠标悬停LOGO高亮显示.zip

    "鼠标悬停LOGO高亮显示"就是一个很好的例子,它利用JavaScript技术实现了一个吸引用户注意力的特效,当用户将鼠标指针移动到LOGO上时,LOGO会呈现高亮状态,从而增强用户与网页的互动感。 JavaScript是一种广泛应用...

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

    在网页开发中,有时我们需要对用户搜索的关键字进行高亮显示,以突出这些关键字在页面内容中的重要性。本文将详细介绍如何使用JavaScript实现这一功能,特别是对于动态生成的静态页面和可更新的关键字列表。 首先,...

    下拉列表框自动补全,高亮显示所需js和css

    3. 高亮样式:为匹配的文本设置特殊的背景色或文字颜色,使用户能快速识别出当前匹配的关键部分。 4. 悬停效果:当鼠标移动到选项上时,可以改变其背景色或增加边框,提示用户可以点击。 5. 响应式设计:确保在不同...

Global site tag (gtag.js) - Google Analytics