js实现搜索字高亮

谁践踏了优雅 2022-05-28 05:45 235阅读 0赞

<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>

最后调用方法:

<script type="text/javascript">
    fHl(document.body, '高亮');   //对页面body的区域中的“高亮”文字背景着色
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，235人围观）

还没有评论，来说两句吧...

相关阅读

相关 es搜索高亮展示

在某些分类电商网站中，经常遇到这样一种需求，对搜索出来的数据的某些字段进行高亮展示，这样让产品的某些属性和特点更加容易受到关注，也就是突出商品卖点 ![在这里插入图片描述]

灰太狼/ 2023年10月18日 23:56/ 0 赞/ 134 阅读

相关 JS实现HTM搜索关键词高亮显示

> 如何利用JS实现HTML搜索关键词高亮显示呢？目录一、优化前的写法二、优化后的方法三、程序运行效果 -------------------- ![393

灰太狼/ 2023年09月29日 13:46/ 0 赞/ 34 阅读

相关 elasticsearch 实现搜索关键字的高亮显示（spring-data-elasticsearch）

本文主要使用spring-data-elasticsearch 对es进行操作。并且是前后端分离的项目，所以实现搜索结果的匹配字段的高亮显示有两种方式，一个是后端，一个是

落日映苍穹つ/ 2023年07月10日 08:05/ 0 赞/ 17 阅读

相关 elasticsearch 高亮搜索字段

-------------------- elasticsearch 高亮搜索字段 \\\\\\\\\\\\\\\\\\\\ 相关类与接口 H

系统管理员/ 2023年06月28日 08:39/ 0 赞/ 37 阅读

相关【实现搜索结果中搜索内容关键字高亮】

![20191119142041428.png][] ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6

待我称王封你为后i/ 2023年06月14日 10:47/ 0 赞/ 82 阅读

相关 php js导航高亮显示,js实现当前导航菜单高亮显示

为了增加用户体验度，增加网页的易用性和美观度，往往需要把当前导航菜单以特殊方式显示，通常是高亮显示或有不同于其它菜单的背景，有两种方法可以实现，第一种是用纯css来实现，二是

短命女/ 2023年01月17日 08:25/ 0 赞/ 214 阅读

相关搜索高亮显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hlcm9f

小咪咪/ 2022年11月19日 07:38/ 0 赞/ 278 阅读

相关 js实现搜索字高亮

<script type="text/javascript"> //<!\[CDATA\[ //--------begin function fHl(o, f

谁践踏了优雅/ 2022年05月28日 05:45/ 0 赞/ 236 阅读

相关 springDataSolr搜索关键词高亮的实现

@Service(timeout=5000) public class ItemSearchServiceImpl implements ItemSearchS

电玩女神/ 2022年05月17日 06:36/ 0 赞/ 238 阅读

相关 js实现关键字高亮

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>j

约定不等于承诺〃/ 2021年12月22日 06:11/ 0 赞/ 451 阅读