js高亮关键词代码备忘

zuroc

浏览: 1307347 次
性别:
来自: 江苏

最近访客更多访客>>

tiger754

u012363178

xxxcccvvv

surprise

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

网络

Exchange J#JavaScript CSS XHTML

当然是抄的啊:)
管理后台用这个很方便

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
.highlight {
background-color:#ff0; color:#000;
}
</style>
</head><body>
<div id="Stxt">
美丽的大自然和谐社会共同发展

</div>
<textarea style="display: none;" id="txtInput">和谐
发展</textarea>
<script type="text/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;
    }

}
//----------------end------------------------

function MarkHighLightDemo(){
var txtObj=document.getElementById("txtInput");
var divObj=document.getElementById("Stxt");
MarkHighLight(divObj,txtObj.value);
}
MarkHighLightDemo()
</script>
</body></html>

分享到：

行路随笔 | 临窗望

2009-02-17 11:42
浏览 2581
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论