一个将指定html标签内特定关键词高亮显示的javascript 函数。

 

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

ExpandedSubBlockEnd.gif            }

ExpandedSubBlockEnd.gif        }
        
InBlock.gif
InBlock.gif        
//----------分析关键词----------------------
InBlock.gif
        function AnalyzeHighLightWords(hlWords)
ExpandedSubBlockStart.gifContractedSubBlock.gif        
dot.gif{
InBlock.gif            
if(hlWords==nullreturn "";
InBlock.gif            hlWords
=hlWords.replace(/\s+/g,"|").replace(/\|+/g,"|");            
InBlock.gif            hlWords
=hlWords.replace(/(^\|*)|(\|*$)/g, "");
InBlock.gif            
InBlock.gif            
if(hlWords.length==0return "";
InBlock.gif            
var wordsArr=hlWords.split("|"); 
InBlock.gif            
ExpandedSubBlockStart.gifContractedSubBlock.gif            
if(wordsArr.length>1)dot.gif{
InBlock.gif                
var resultArr=BubbleSort(wordsArr);
InBlock.gif                
var result="";
ExpandedSubBlockStart.gifContractedSubBlock.gif                
for(var i=0;i<resultArr.length;i++)dot.gif{
InBlock.gif                    result
=result+"|"+resultArr[i];
ExpandedSubBlockEnd.gif                }
                
InBlock.gif                
return result.replace(/(^\|*)|(\|*$)/g, "");
InBlock.gif
ExpandedSubBlockStart.gifContractedSubBlock.gif            }
elsedot.gif{
InBlock.gif                
return hlWords;
ExpandedSubBlockEnd.gif            }
 
ExpandedSubBlockEnd.gif        }
    
InBlock.gif        
InBlock.gif        
//-----利用冒泡排序法把长的关键词放前面-----    
ExpandedSubBlockStart.gifContractedSubBlock.gif
        function BubbleSort(arr)dot.gif{        
InBlock.gif            
var temp, exchange;    
ExpandedSubBlockStart.gifContractedSubBlock.gif            
for(var i=0;i<arr.length;i++)dot.gif{            
InBlock.gif                exchange
=false;                
ExpandedSubBlockStart.gifContractedSubBlock.gif                
for(var j=arr.length-2;j>=i;j--)dot.gif{                
ExpandedSubBlockStart.gifContractedSubBlock.gif                    
if((arr[j+1].length)>(arr[j]).length)dot.gif{                    
InBlock.gif                        temp
=arr[j+1]; arr[j+1]=arr[j]; arr[j]=temp;
InBlock.gif                        exchange
=true;
ExpandedSubBlockEnd.gif                    }

ExpandedSubBlockEnd.gif                }
                
InBlock.gif                
if(!exchange)break;
ExpandedSubBlockEnd.gif            }

InBlock.gif            
return arr;            
ExpandedSubBlockEnd.gif        }

InBlock.gif    
ExpandedBlockEnd.gif    }

None.gif    
// ----------------end------------------------

转载于:https://www.cnblogs.com/hzuIT/articles/818585.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值