个将指定html标签内特定关键词高亮显示的javascript 函数。
    /*----------------------------------------*\ 
     * 使用 js 标记高亮关键词 by markcxz(markcxz@aol.com)
     * 参数说明: 
     * obj: 对象, 要进行高亮显示的html标签节点. 
     * hlWords: 字符串, 要进行高亮的关键词词, 使用 竖杠(|)或空格 分隔多个词 . 
     * cssClass: 字符串, 定义关键词突出显示风格的css伪类. 
     * 参考资料: javascript HTML DOM 高亮显示页面特定字词 By shawl.qiu
    \*----------------------------------------*/ 
    function MarkHighLight(obj,hlWords,cssClass){
    
        hlWords=AnalyzeHighLightWords(hlWords);
        
        if(obj==null || hlWords.length==0)
            return;
        if(cssClass==null)
            cssClass="highlight";
        MarkHighLightCore(obj,hlWords);
        
        //------------执行高亮标记的核心方法----------------------------
        function MarkHighLightCore(obj,keyWords){
            var re=new RegExp(keyWords, "i"); 
            
            for(var i=0; i<obj.childNodes.length; i++){
            
                var childObj=obj.childNodes[i];
                if(childObj.nodeType==3){
                    if(childObj.data.search(re)==-1)continue; 
                    var reResult=new RegExp("("+keyWords+")", "gi"); 
                    var objResult=document.createElement("span");
                    objResult.innerHTML=childObj.data.replace(reResult,"<span class='"+cssClass+"'>$1</span>");                     
                    if(childObj.data==objResult.childNodes[0].innerHTML) continue; 
                    obj.replaceChild(objResult,childObj);                                      
                }else if(childObj.nodeType==1){
                    MarkHighLightCore(childObj,keyWords);
                }
            }
        }

//----------分析关键词----------------------
        function AnalyzeHighLightWords(hlWords)
        {
            if(hlWords==null) return "";
            hlWords=hlWords.replace(/\s+/g,"|").replace(/\|+/g,"|");            
            hlWords=hlWords.replace(/(^\|*)|(\|*$)/g, "");
            
            if(hlWords.length==0) return "";
            var wordsArr=hlWords.split("|"); 
            
            if(wordsArr.length>1){
                var resultArr=BubbleSort(wordsArr);
                var result="";
                for(var i=0;i<resultArr.length;i++){
                    result=result+"|"+resultArr[i];
                }                
                return result.replace(/(^\|*)|(\|*$)/g, "");

}else{
                return hlWords;
            } 
        }    
        
        //-----利用冒泡排序法把长的关键词放前面-----    
        function BubbleSort(arr){        
            var temp, exchange;    
            for(var i=0;i<arr.length;i++){            
                exchange=false;                
                for(var j=arr.length-2;j>=i;j--){                
                    if((arr[j+1].length)>(arr[j]).length){                    
                        temp=arr[j+1]; arr[j+1]=arr[j]; arr[j]=temp;
                        exchange=true;
                    }
                }                
                if(!exchange)break;
            }
            return arr;            
        }
    
    }

使用 javascript 标记高亮关键词相关推荐

  1. 改变Eclipse标记高亮的颜色

    http://www.thinksaas.cn/group/topic/200196/ 改变Eclipse标记高亮的颜色 开源中国 发表于 2014-09-01 15:10:43 开启"标记 ...

  2. javascript 标记_如何使用JavaScript更改Google Maps标记的颜色

    javascript 标记 by Tan Le Tian 谭乐天 如何使用JavaScript更改Google Maps标记的颜色 (How to change the color of Google ...

  3. 9款有用的Javascript代码高亮脚本

    原文:9款有用的Javascript代码高亮脚本 译自:webdesignbooth 转自:http://www.qianduan.net/9-useful-javascript-syntax-hig ...

  4. springboot——集成elasticsearch进行搜索并高亮关键词

    目录 1.elasticsearch概述 3.springboot集成elasticsearch 4.实现搜索并高亮关键词 1.elasticsearch概述 (1)是什么: Elasticsearc ...

  5. JavaScript中查找关键词

    查找关键字的四种方法(查找关键字指找到关键字的位置或内容): 在正则匹配时,i表示忽略大小写,g表示全局匹配 1.根据关键字查找其位置, i返回的是关键词'd'第一次出现时的下标:    这个i返回的 ...

  6. 搜索关键字高亮_Django Haystack 全文检索与关键词高亮

    作者:HelloGitHub-追梦人物[1] 文中所涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库[2] 点击本文最下方的"阅读原文"即可获取 博客提供 RS ...

  7. Diango博客--22.Django Haystack 全文检索与关键词高亮

    文章目录 1. Django Haystack 简介 2. 安装 django-haystack和elasticsearch 2 3. 构建容器来运行 elasticsearch 服务 4. 配置 H ...

  8. javascript实现代码高亮

    9款有用的Javascript代码高亮脚本 Syntax highlighting is very important especially when we want to show our code ...

  9. js+正文规则 高亮搜索关键字(二)

    [原创]JavaScript高亮搜索关键字(改进版) [2009-1-6 16:25:00] by mwfls 11 我顶 .maks { line-height: 150%; padding: 10 ...

最新文章

  1. 发布html页面图像不显示不出来,图像不显示htmlimg/
  2. 计算机领域的顶级会议和期刊
  3. System Center 2012 Process Automatic
  4. (15)FPGA模块化设计原则
  5. 洛谷1048 采药(01背包)
  6. (转)淘淘商城系列——使用Jedis操作集群
  7. mysql导出excel出乱码_Mysql中文乱码以及导出为sql语句和Excel问题解决方法[图文]...
  8. 魔兽世界稳定服务器,魔兽世界美服服务器趋于稳定 排队新技术将实装
  9. mysql 查询最早 表_MySQL-如何查询表中最早时间和最晚时间
  10. 电感的两种模式——DCM和CCM的区别
  11. ubuntu镜像安装教程
  12. 《Machine Learning in Action》—— 女同学问Taoye,KNN应该怎么玩才能通关
  13. JAVA设计模式理解与总结(下)代理模式适配器模式观察者模式
  14. Udesk全场景客服系统FAQ分享(202010期)
  15. FCN全卷积网络和Deconv转置卷积原理描述
  16. FICO 里面的替代和校验 以及调试
  17. 编程之美学习笔记(三):一摞烙饼的排序
  18. Android 剩余可用时长的计算公式
  19. 早该把B站打回原形了
  20. python读-Python之文件读写

热门文章

  1. Hexo-theme-Fluid Material Design 风格的 Hexo 主题
  2. slf4j日志的最优使用方式
  3. lnmp 0.4 安装指南
  4. 20个最佳WordPress SEO插件
  5. PHP的password_hash()使用实例
  6. Python实例讲解 -- 图片处理
  7. 类与对象的关系 java 1615134802
  8. 目录浏览器对话框控件 c# 1614822374
  9. 学习日报 day03 实体与标识符 变量与数据类型
  10. 前端知识笔记汇总200304