使用javascript标记高亮关键词!!!

 

<!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=gb2312" />
<meta name="Author" content="markcxz">
<title>js标记高亮关键词演示</title>

<style type="text/css">

body{
    margin:0px 5px 0px 5px; font-size:12px; line-height:140%;
    text-align:center;
}
.highlight {
    background-color:#ff0; color:#000;
}

.ComandBar{
    width:700px;  height:30px;text-align:left; margin:20px 0px 0px 0px;
    background-color:#eee; text-indent:10px; padding-top:3px;
    border-bottom:1px #666 dashed;
}

.ComandBar input{
     border:1px #333 groove; margin:0px;
}

.ComandBar span{
     cursor:pointer; border:1px #333 solid; padding:2px 5px 0px 5px;
}

#ArticleWrapper{
    width:700px; text-align:left;
}

#ArticleWrapper li{
    list-style-type:decimal; margin:5px 0px 10px 0px;
}

h1.title { font-size: 1.2em; background: #f5f5f5; padding-left: 0.2em; line-height: 2em;  text-align:center;}
p{
    text-indent:2em;
}


</style>
<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("ArticleWrapper");
        MarkHighLight(divObj,txtObj.value);
    }
</script>

</head>

<body>

<div class="ComandBar">
    标记高亮的关键词(超过一个可用竖杠(|)或空格分隔)
    <input name="txtInput" id="txtInput" type="text" />
    <span οnclick="MarkHighLightDemo()" >标记高亮</span>
</div>

<div id="ArticleWrapper">
    <h1 class="title">第一最好不相见,如此便可不相恋 - 六世达赖喇嘛 仓央嘉措(转)</h1>
    <ul>
        <li>
            第一最好不相见,如此便可不相恋。<br />
            第二最好不相知,如此便可不相思。<br />
            第三最好不相伴,如此便可不相欠。<br />
            第四最好不相惜,如此便可不相忆。<br />
            第五最好不相爱,如此便可不相弃。<br />
            第六最好不相对,如此便可不相会。<br />
            第七最好不相误,如此便可不相负。<br />
            第八最好不相许,如此便可不相续。<br />
            第九最好不相依,如此便可不相偎。<br />
            第十最好不相遇,如此便可不相聚。<br />
            但曾相见便相知,相见何如不见时。<br />
            安得与君相诀绝,免教生死作相思。
        </li>
        <li>           
            那一天,闭目在经殿香雾中,蓦然听见,你颂经中的真言; <br />   
            那一月我摇动所有的经筒,不为超度,只为触摸你的指尖; <br />   
            那一年磕长头在山路,不为觐见,只为贴着你的温暖; <br />   
            那一世转山,不为修来世,只为途中与你相见 。<br />
           
            <p>        ——六世达赖喇嘛     仓央嘉措</p>
        </li>
    </ul>
    <div>
        <p>仓央嘉措,公元1683 年生于藏南门隅地区一户信奉宁玛派佛教的农民家庭。15岁被选定为五世达赖的“转世灵童”,9月自藏南到拉萨,途经朗卡子县时,以五世班禅罗桑益喜为师,剃发受戒,取法名罗桑仁钦仓央嘉措。10月25日,于拉萨布达拉宫举行坐床典礼,成为六世达赖喇嘛。学习佛学、天文历算、医学及文学等,对诗的造诣很深。</p>
        <p>通常转世灵童在五、六岁就已坐床成为活佛,而仓央嘉措已经14岁才开始作为一位法王的学习和生活。他的童年及少年时光是在民间无拘无束地度过的,突然间远离故乡、亲人,面对大量的经书和修行,身边只有僧侣,仓央嘉措的苦恼可想而知。仓央嘉措家中世代信奉宁玛派(红教)佛教,教规并不禁止僧徒娶妻生子。而达赖所属的格鲁派(黄教)佛教则严禁僧侣结婚成家、接近妇女。对于这种清规戒律,仓央嘉措难以接受。年轻胆大的他没有以教规来约束自己,屡屡“行为不检”、“不守戒规”。</p>
        <p>一天他微服出行,化名荡桑汪波到拉萨街头,结识了漂亮姑娘仁珍翁姆。难以隐藏心里的爱情,他写道:</p>
        <p>
            <ul>
                <font color="#9933cc">接受了她的爱,<br />我却牺牲了佛缘。<br />    若毅然入山修行,<br />又违背了她的心愿。</font>
            </ul>
        </p>
        <p>他最终选择了爱情。1703年,仓央嘉措回绝了五世班禅授的比丘戒。仓央嘉措到扎什伦布寺访问五世班禅时,正式向班禅回绝了他过去所受的沙弥戒。以后他改名化装常在拉萨的公园和居民中游玩,接触了许多平民,并来往仁珍翁姆家中。在这些日子里,他写出了大量优美动人的爱情诗歌。</p>                   
        <p>这一时刻,西藏的政治矛盾已经极其尖锐。蒙古人在西藏的统治者拉藏汗桑为了取得对西藏的统治地位,从政治、宗教、经济上联合起西藏的主要僧侣和贵族,与藏王桑结嘉措展开了激烈的斗争。1705年7月,爆发了蒙藏两军之间的一场恶战。结果桑结嘉措被俘,不久被处死。拉藏汗向康熙皇帝进言仓央嘉措的种种“劣行”,借以皇帝诏,将仓央嘉措解送京师。关于仓央嘉措被黜后的命运有多种传闻:在解送京师的途中,行至青海湖(位于青海省海西藏族自治州)湖畔圆寂。一说病死,一说被杀,没留下尸体,时年仅25岁。另一说法则是仓央嘉措行至青海湖后,于一个风雪夜失踪。后半生周游印度、尼泊尔、康藏、甘、青、蒙古等处,继续宏扬佛法。此外还另有一新的说法:他被解送至内地后,软禁于五台山,并在五台山圆寂</p>
        <p>============================================== </p>
        <p><font color="#000000">他写给那个姑娘的诗,古文译版是: "曾虑多情损梵行,入山又恐别倾城, 世间安得双全法,不负如来不负卿"</font>            </p>
        <br /><br /><br /><br /><br /><br /><br />
    </div>

</div>

</body>

</html>

转载于:https://www.cnblogs.com/xiazhi33/articles/878002.html

已标记关键词 清除标记
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页