正则表达式验证邮箱 jQuery起点教程之插件制作

JavaScript加亮关键字

JavaScript加亮关键字,当在文章里头出现这些关键字,就把它加亮显示,文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现,不知道怎样来实现这样的功能。“点睛”的广告代码,很牛B,本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的,我看了大半天,楞是没有看出个所以然来!还是自己慢慢研究吧。
IE下有:
var range = document.createRange();
FireFox下有:
var range = document.body.createTextRange();
IE下有findText及pasteHTML,但是fireFox下就没有!怎么办?查了好多资料,都没有能说出个所以然的,皇天不负有心人,终于让我给搞出来了! 注:我这里不是用正则替换,因为正则替换有它的不足之处!不知道先前有没有高人研究过这种方法。代码在最后

下面先介绍2种实现方法。

方法二:
大家为什么非要局限在 HTML 的替换上呢,从文本对象入手不是更方便一些吗?
不管有多少关键字也不会受正则的局限,说实在的,正则不是用来干这事的。by:风云突变
<pre>
用JS让文章内容指定的关键字加亮
是这样的..
现在有这些关键字:美容,生活,购物
当在文章里头出现这些关键字,就把它加亮显示..
文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...
不知道怎样来实现这样的功能啊?特此求助
</pre>
<script language="JavaScript">
function highlight(key) {
  var key = key.split('|');
  for (var i=0; i<key.length; i++) {
    var rng = document.body.createTextRange();
    while (rng.findText(key[i]))
    rng.pasteHTML(rng.text.fontcolor('red'));
  }
}
highlight('文章|关键|功能')
</script>
方法一:
简单的例子:
<div id="txt">
用JS让文章内容指定的关键字加亮


是这样的..

现在有这些关键字:美容,生活,购物

当在文章里头出现这些关键字,就把它加亮显示..


文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...

不知道怎样来实现这样的功能啊?特此求助

</div>
<script language="JavaScript">
txt.innerHTML = txt.innerHTML.replace(/文章/gi,"<font color=red>文章</font>");
</script>
扩展的多个关键字程序
<div id="txt">
用JS让文章内容指定的关键字加亮


是这样的..

现在有这些关键字:美容,生活,购物

当在文章里头出现这些关键字,就把它加亮显示..


文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...

不知道怎样来实现这样的功能啊?特此求助

</div>
<script language="JavaScript">
txt.innerHTML = txt.innerHTML.replace(/(文章)|(关键字)|(功能)/gi,"<font color=red>$1$2$3</font>");
</script>
说明:
字符 含义
$$ $ (JScript 5.5 或更新版本)
$& 指定与整个模式匹配的 stringObj 的部分。 (JScript 5.5 或更新版本)
$` 指定由 $& 描述的匹配之前的 stringObj 部分。 (JScript 5.5 或更新版本)
$' 指定由 $& 描述的匹配之后的 stringObj 部分。 (JScript 5.5 或更新版本)
$n 捕获的第 n 个子匹配,此处 n 为从1到9的十进制一位数。 (JScript 5.5 或更新版本)
$nn 捕获的第 nn 个子匹配,此处 nn 为从01到99的十进制两位数。 (JScript 5.5 或更新版本)
g,全局模式匹配
i,不区分大小写匹配
相关知识:操作document.body的innerHTML此法将引起浏览器DOM重新解析

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

发表评论

发表评论

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

网友评论仅供网友表达个人看法,并不表明本网同意其观点或证实其描述。