<!--怎么样只显示content 里的内容 -->
<div>关键字是关>键字是关键字是关键字是1</div><div id="content" >
用JS让文章内容指定的关键字加亮
是这样的..现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助
</div><script language="JavaScript">function keylink(key) {
 var key = key.split('|');
 //alert(nm);
 for (var i=0; i<key.length; i++) {
   var nums=key[i].split(',');
 for(var k=0;k<2;k++){
  var rng = document.body.createTextRange();
 rng.moveStart("character",nm);  
  while (rng.findText(nums[0]))
  //rng.pasteHTML(rng.text.fontcolor('red')); 
  rng.pasteHTML('<a href=\"'+nums[1]+ rng.text+'\" title='+ rng.text +'>' + rng.text + '</a>');}
 }
}
keylink('文章,1|关键,2|功能,3')
</script><div>>关键字是关键字是关键字是关键字是</div>

解决方案 »

  1.   

    急哦~`求高手出现了~`....
    createTextRange 很难控制
      

  2.   

    怎么样,才能把content里关键字的内容高亮显示????
      

  3.   

    给你一个例子,一个高人写的:
    参考一下<!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" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .adKeyword {
     color: #FF0000;
    }
    -->
    </style>
    </head>
    <body>
    <p>  一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题。主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经;此外,他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了,一个叫BPR,一个叫ERP。</p>
    <p> </p>
    <p>  书记也没闲着,他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好,于是就成立了人力资源部和寺庙工会等等,并认认真真地走起了竞聘上岗和定岗定编的过场。</p>
    <p> </p>
    <p>  几天后成效出来了,三个和尚开始拼命地挑水了,可问题是怎么挑也不够喝。不仅如此,小和尚都忙着挑水、寺庙里没人念经了,日子一长,来烧香的客人越来越少,香火钱也变得拮据起来。为了解决收入问题,寺庙管理部、人力资源部等连续召开了几天的会,最后决定,成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时,为了更好地开展工作,寺庙提拔了十几名和尚分别担任副主持、主持助理,并在每个部门任命了部门小主持、副小主持、小主持助理。</p>
    <p> </p>
    <p>  老问题终于得到缓解了,可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝,后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿,不好伺候。</p>
    <p> </p>
    <p>  为了更好地解决这一矛盾,经开会研究决定,成立一个新的部门:喝水响应部,专门负责协调前后台矛盾。为了便于沟通、协调,每个部门都设立了对口的联系和尚。   协调虽然有了,但效果却不理想,仔细一研究,原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会,决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等,让前后台签署协定、相互打分,健全考核机制。为了便于打分考核,寺院特意购买了几个计算机系统,包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统(简称IBS系统)、马上就死系统(简称MS系统)等,同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致,于是又成立了技术开发中心,负责各个系统的维护、二次开发。由于部门太多、办公场地不足,寺院专门成立了综合部来解决这一问题,最后决定把寺院整个变成办公区,香客烧香只许在山门外烧。 </p>
    <p> </p>
    <p>  部门多、当官的多档和开会自然就多,为了减少文山会海,综合办牵头召开了N次关于减少开会的会,并下达了“关于减少档的档”。同时,为了精简机构、提高效率,寺院还成立了精简机构办公室、机构改革研究部等部门。 </p>
    <p> </p>
    <p>  一切似乎都合情合理,但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢?有的和尚提出来每月应该开一次分析会,于是经营分析部就应运而生了。分析需要很多数据和报表,可系统总是做不到,于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。</p>
    <p> </p>
    <p>  寺院空前地热闹起来,有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去,水还是不够喝、香火钱还是不够用。什么原因呢?这个和尚说流程不顺、那个和尚说任务分解不合理,这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在,那三个人就是最早的那三个和尚。说来说去,就是***闲人太多了!他们说:“整天瞎分析个屁!什么***流程问题、职责问题、接口问题、考核问题,明明就是机构臃肿问题!早知今日,还不如当初咱们仨自觉自律一点算了!如今倒好,招来了这么一大帮傻B,一个个不干正经事还***人五人六的,跟屎盆子一样甩都甩不掉!”</p>
    <p> </p>
    <p>  又过了一年,寺院黄了,和尚们也都死了。人们在水井边发现了几具尸体,是累死的;在寺院里发现了几千具尸体,是渴死的。</p>
    </body>
    </html>
    <script language="JavaScript" type="text/javascript"><!--
    if(document.createRange){
     var range = document.createRange();
    }else
     var range = document.body.createTextRange(); 
    if(range.findText){
     while(range.findText("和尚")){
      range.pasteHTML(range.text.fontcolor("#ff0000"));
      range.collapse(true);
     }
    }else{ 
     var s,n;
     s = window.getSelection();
     while(window.find("和尚")){
      
      var n = document.createElement("SPAN");
      n.style.color="#ff0000" 
      s.getRangeAt(0).surroundContents(n);
     }
    }
    //--></script>
      

  4.   

    范围缩小不了啊,我想在content里的内容高亮显示 content 外的不显示
      

  5.   

    IE我测了半天也没测出来...
    IE的selection和range实在不熟悉- -#
    FF解决了
    <!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" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .adKeyword {
     color: #FF0000;
    }
    -->
    </style>
    </head>
    <body>
    <p>  一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题。主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经;此外,他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了,一个叫BPR,一个叫ERP。</p>
    <p> </p>
    <p>  书记也没闲着,他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好,于是就成立了人力资源部和寺庙工会等等,并认认真真地走起了竞聘上岗和定岗定编的过场。</p>
    <p> </p>
    <p>  几天后成效出来了,三个和尚开始拼命地挑水了,可问题是怎么挑也不够喝。不仅如此,小和尚都忙着挑水、寺庙里没人念经了,日子一长,来烧香的客人越来越少,香火钱也变得拮据起来。为了解决收入问题,寺庙管理部、人力资源部等连续召开了几天的会,最后决定,成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时,为了更好地开展工作,寺庙提拔了十几名和尚分别担任副主持、主持助理,并在每个部门任命了部门小主持、副小主持、小主持助理。</p>
    <p> </p>
    <div id="content" style="background-color:#FFFF00;">
    <p>  老问题终于得到缓解了,可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝,后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿,不好伺候。</p>
    <p> </p>
    <p>  为了更好地解决这一矛盾,经开会研究决定,成立一个新的部门:喝水响应部,专门负责协调前后台矛盾。为了便于沟通、协调,每个部门都设立了对口的联系和尚。   协调虽然有了,但效果却不理想,仔细一研究,原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会,决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等,让前后台签署协定、相互打分,健全考核机制。为了便于打分考核,寺院特意购买了几个计算机系统,包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统(简称IBS系统)、马上就死系统(简称MS系统)等,同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致,于是又成立了技术开发中心,负责各个系统的维护、二次开发。由于部门太多、办公场地不足,寺院专门成立了综合部来解决这一问题,最后决定把寺院整个变成办公区,香客烧香只许在山门外烧。 </p>
    <p> </p>
    <p>  部门多、当官的多档和开会自然就多,为了减少文山会海,综合办牵头召开了N次关于减少开会的会,并下达了“关于减少档的档”。同时,为了精简机构、提高效率,寺院还成立了精简机构办公室、机构改革研究部等部门。 </p>
    <p> </p>
    <p>  一切似乎都合情合理,但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢?有的和尚提出来每月应该开一次分析会,于是经营分析部就应运而生了。分析需要很多数据和报表,可系统总是做不到,于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。</p>
    <p> </p>
    </div>
    <p>  寺院空前地热闹起来,有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去,水还是不够喝、香火钱还是不够用。什么原因呢?这个和尚说流程不顺、那个和尚说任务分解不合理,这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在,那三个人就是最早的那三个和尚。说来说去,就是***闲人太多了!他们说:“整天瞎分析个屁!什么***流程问题、职责问题、接口问题、考核问题,明明就是机构臃肿问题!早知今日,还不如当初咱们仨自觉自律一点算了!如今倒好,招来了这么一大帮傻B,一个个不干正经事还***人五人六的,跟屎盆子一样甩都甩不掉!”</p>
    <p> </p>
    <p>  又过了一年,寺院黄了,和尚们也都死了。人们在水井边发现了几具尸体,是累死的;在寺院里发现了几千具尸体,是渴死的。</p>
    </body>
    </html>
    <script type="text/javascript">
    <!--
    var div = document.getElementById('content');if (document.createRange) {
    var range = document.createRange();
    range.selectNodeContents(div);
    } else {
    var range = document.body.createTextRange();
    //range.moveToElementText(div);
    }if (range.findText) {
    while(range.findText("和尚")) {
    range.pasteHTML(range.text.fontcolor("#ff0000"));
    range.collapse(true);
    }
    } else {
    var s,n;
    s = window.getSelection();
    while(window.find("和尚")) {
    var trange = s.getRangeAt(0);
    if (range.compareBoundaryPoints(Range.START_TO_START, trange) == -1
    && range.compareBoundaryPoints(Range.END_TO_END, trange) == 1) {
    var n = document.createElement("SPAN");
    n.style.color="#ff0000";
    trange.surroundContents(n);
    }
    }
    s.removeAllRanges();
    }
    //-->
    </script>
      

  6.   

    嘿嘿.换了个方案,不过这个理论上说,效率应该不是很爽...<!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" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .adKeyword {
     color: #FF0000;
    }
    -->
    </style>
    </head>
    <body>
    <p>  一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后,就派来了一名主持和一名书记,共同负责解决这一问题。主持上任后,发现问题的关键是管理不到位,于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验,寺庙选派唐僧等领导干部出国学习取经;此外,他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了,一个叫BPR,一个叫ERP。</p>
    <p> </p>
    <p>  书记也没闲着,他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好,于是就成立了人力资源部和寺庙工会等等,并认认真真地走起了竞聘上岗和定岗定编的过场。</p>
    <p> </p>
    <p>  几天后成效出来了,三个和尚开始拼命地挑水了,可问题是怎么挑也不够喝。不仅如此,小和尚都忙着挑水、寺庙里没人念经了,日子一长,来烧香的客人越来越少,香火钱也变得拮据起来。为了解决收入问题,寺庙管理部、人力资源部等连续召开了几天的会,最后决定,成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时,为了更好地开展工作,寺庙提拔了十几名和尚分别担任副主持、主持助理,并在每个部门任命了部门小主持、副小主持、小主持助理。</p>
    <p> </p>
    <div id="content" style="background-color:#FFFF00;">
    <p>  老问题终于得到缓解了,可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝,后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿,不好伺候。</p>
    <p> </p>
    <p>  为了更好地解决这一矛盾,经开会研究决定,成立一个新的部门:喝水响应部,专门负责协调前后台矛盾。为了便于沟通、协调,每个部门都设立了对口的联系和尚。   协调虽然有了,但效果却不理想,仔细一研究,原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会,决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等,让前后台签署协定、相互打分,健全考核机制。为了便于打分考核,寺院特意购买了几个计算机系统,包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统(简称IBS系统)、马上就死系统(简称MS系统)等,同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致,于是又成立了技术开发中心,负责各个系统的维护、二次开发。由于部门太多、办公场地不足,寺院专门成立了综合部来解决这一问题,最后决定把寺院整个变成办公区,香客烧香只许在山门外烧。 </p>
    <p> </p>
    <p>  部门多、当官的多档和开会自然就多,为了减少文山会海,综合办牵头召开了N次关于减少开会的会,并下达了“关于减少档的档”。同时,为了精简机构、提高效率,寺院还成立了精简机构办公室、机构改革研究部等部门。 </p>
    <p> </p>
    <p>  一切似乎都合情合理,但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢?有的和尚提出来每月应该开一次分析会,于是经营分析部就应运而生了。分析需要很多数据和报表,可系统总是做不到,于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。</p>
    <p> </p>
    </div>
    <p>  寺院空前地热闹起来,有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去,水还是不够喝、香火钱还是不够用。什么原因呢?这个和尚说流程不顺、那个和尚说任务分解不合理,这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在,那三个人就是最早的那三个和尚。说来说去,就是***闲人太多了!他们说:“整天瞎分析个屁!什么***流程问题、职责问题、接口问题、考核问题,明明就是机构臃肿问题!早知今日,还不如当初咱们仨自觉自律一点算了!如今倒好,招来了这么一大帮傻B,一个个不干正经事还***人五人六的,跟屎盆子一样甩都甩不掉!”</p>
    <p> </p>
    <p>  又过了一年,寺院黄了,和尚们也都死了。人们在水井边发现了几具尸体,是累死的;在寺院里发现了几千具尸体,是渴死的。</p>
    </body>
    </html>
    <script type="text/javascript">
    <!--
    var div = document.getElementById('content');if (document.createRange) {
    var range = document.createRange();
    range.selectNodeContents(div);
    } else {
    var range = document.body.createTextRange();
    range.moveToElementText(div);
    //移动到div开头
    }if (range.findText) {
    while(range.findText("和尚")) {
    if (div.contains(range.parentElement())) {
    range.pasteHTML(range.text.fontcolor("#ff0000"));
    } else {
    range.pasteHTML(range.text);
    }
    //range.collapse(true);
    }
    } else {
    var s,n;
    s = window.getSelection();
    while(window.find("和尚")) {
    var trange = s.getRangeAt(0);
    if (range.compareBoundaryPoints(Range.START_TO_START, trange) == -1
    && range.compareBoundaryPoints(Range.END_TO_END, trange) == 1) {
    var n = document.createElement("SPAN");
    n.style.color="#ff0000";
    trange.surroundContents(n);
    }
    }
    s.removeAllRanges();
    }
    //-->
    </script>
      

  7.   

    此回复为自动发出,仅用于显示而已,并无任何其他特殊作用
    楼主【topng】截止到2008-07-01 17:23:06的历史汇总数据(不包括此帖):
    发帖数:0                  发帖分:0                  
    结贴数:0                  结贴分:0                  
    未结数:0                  未结分:0                  
    结贴率:-------------------结分率:-------------------
    如何结贴请参考这里:http://topic.csdn.net/u/20080501/09/ef7ba1b3-6466-49f6-9d92-36fe6d471dd1.html