首页 ┆ 网站地图 ┆ 在线留言 ┆ 游戏资讯 ┆ 资源下载 ┆ 端午节祝福 ┆ 迅雷在线影视
设为首页
加入收藏
联系我们
高级搜索
您当前的位置: 主页>编程相关>JAVASCRIPT>使用javascript标记高亮关键词的代码示例
使用javascript标记高亮关键词的代码示例
来源: 发布时间:2008-03-05 发布人: 浏览: 人次   字体: [ ]  

  /*----------------------------------------*\ 
 * 使用 js 标记高亮关键词 
   * 参数说明: 
     * 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==nullreturn "";
            hlWords
=hlWords.replace(/\s+/g,"|").replace(/\|+/g,"|");            
            hlWords
=hlWords.replace(/(^\|*)|(\|*$)/g, "");
            
            
if(hlWords.length==0return "";
            
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;            
        }
    
    }
    
//----------------end------------------------


相 关 文 章   发布商链接
·javascript读写TEXT文本文件示例代码
·javascript实现动态多附件上传方法
·javascript利用xhtml来实现动态导入j...
·JS遍历所有以TextBox_开头匹配的文本...
·Javascript实现打印网页中定义的部分...
·javascript实现在IE中图片的拖拽
·JavaScript实现刷新框架子页面的方法
·教您如何使用Lightbox效果?
·javascript实现firefox和IE都支持的...
·JavaScript中使用DOM编程技术动态控...
 §最新评论:(评论内容只代表网友观点,与本站立场无关!)
网名: 验证码:  【所有评论】【↑返回顶部
评 分: 12 345
评论内容:(不能超过500字,请自觉遵守互联网相关政策法规。[按 Ctrl+Enter 可直接提交]
注意:请勿在本站发布政治话题、色情及违反法律的内容。
IT知道网 声明:刊登此文章是为了传递更多信息,文章内容仅供参考,转载请注明出处。
推 荐 文 章
·javscript实现鼠标移到小图片
·如何在静态页面中利用javascr...
·javascript实现WEB页面导出为...
·如何在兼容IE和Firefox的情况
·javascript读取本地excel文档
·javascript实现页面自动刷新...
·javascript解决iframe框架页...
·javascript实现网易邮箱多附...
·javascript实现模仿IE自动完...
·javacript实现关闭子窗口,刷...
·javascript脚本实现右键弹出...
·javascript结合Ajax制作的可...
·javascript实现页面载入等待...
·javascript实现一个IP只弹窗...
·javascript导航条比较实用的...
热 门 文 章
·Ext2.0框架的Grid使用介绍祥...
·JS实现多行的HTML静态表格分...
·javascript实现多张图片轮流...
·javascript使用xml数据岛的简...
·Adobe Reader利用javascript...
·javascript读写TEXT文本文件...
·幻灯片焦点图片新闻显示调用f...
·实例讲解Ext Js生成动态树,...
·javascript实现页面载入等待...
·javascript实现动态多附件上...
·Javascript在IE和FireFox中的...
·javascript解析身份证号码得...
·javascript脚本实现右键弹出...
·javascript实现的网页软键盘...
·js操作innerHTML 引起的未知...
网站首页 - 关于本站 - 加入收藏 - 网站地图 - 友情连接 - 在线留言 - 联系我们 - 返回顶部
Copyright © 2007 IT知道网.[冀ICP备07026896号]. All Rights Reserved .