大难题来了！有什么办法通过JavaScript实现实时的语法高亮显示？

有什么办法通过JavaScript实现实时的JS语法高亮显示？
（在ASP.Net的一个输入页面上执行输入）
（可以调用第三方免费控件）

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

本文来自互连网：
firefox下的文本高亮解决方法
2007-7-19 16:57:00 By:xling
“点睛”的广告代码，很牛B，本想从中找出在FireFox下如何实现findText及pasteHTML类似效果的，我看了大半天，楞是没有看出个所以然来！还是自己慢慢研究吧。
IE下有:
var range = document.body.createTextRange();
FireFox下有：
var range = document.createRange();
IE下有findText及pasteHTML，但是fireFox下就没有！怎么办？查了好多资料，都没有能说出个所以然的，皇天不负有心人，终于让我给搞出来了！
注：我这里不是用正则替换，因为正则替换有它的不足之处！
下面是代码：
<!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">

</style>
</head>
<body>
　　一个和尚挑水吃、两个和尚抬水吃、三个和尚没水吃。总寺的方丈大人得知情况后，就派来了一名主持和一名书记，共同负责解决这一问题。主持上任后，发现问题的关键是管理不到位，于是就招聘一些和尚成立了寺庙管理部来制定分工流程。为了更好地借鉴国外的先进经验，寺庙选派唐僧等领导干部出国学习取经；此外，他们还专门花钱请了天主教、基督教的神父传授MBA。神父呆了不久留下几个东东就走了，一个叫BPR，一个叫ERP。
 
　　书记也没闲着，他认为问题的关键在于人才没有充分利用、寺庙文化没有建设好，于是就成立了人力资源部和寺庙工会等等，并认认真真地走起了竞聘上岗和定岗定编的过场。
 
　　几天后成效出来了，三个和尚开始拼命地挑水了，可问题是怎么挑也不够喝。不仅如此，小和尚都忙着挑水、寺庙里没人念经了，日子一长，来烧香的客人越来越少，香火钱也变得拮据起来。为了解决收入问题，寺庙管理部、人力资源部等连续召开了几天的会，最后决定，成立专门的挑水部负责后勤和专门的烧香部负责市场前台。同时，为了更好地开展工作，寺庙提拔了十几名和尚分别担任副主持、主持助理，并在每个部门任命了部门小主持、副小主持、小主持助理。
 
　　老问题终于得到缓解了，可新的问题跟着又来了。前台负责念经的和尚总抱怨口渴水不够喝，后台挑水的和尚也抱怨人手不足、水的需求量太大而且没个准儿，不好伺候。
 
　　为了更好地解决这一矛盾，经开会研究决定，成立一个新的部门：喝水响应部，专门负责协调前后台矛盾。为了便于沟通、协调，每个部门都设立了对口的联系和尚。 协调虽然有了，但效果却不理想，仔细一研究，原来是由于水的需求量不准、水井数量不足等原因造成的。于是各部门又召开了几次会，决定加强前台念经和尚对饮用水的预测和念经和尚对挑水和尚满意度测评等，让前后台签署协定、相互打分，健全考核机制。为了便于打分考核，寺院特意购买了几个计算机系统，包括挑水统计系统、烧香统计系统、普通香客捐款分析系统、大香客捐款分析系统、挨上必死系统（简称IBS系统）、马上就死系统（简称MS系统）等，同时成立香火钱管理部、香火钱出账部、打井策略研究部、打井建设部、打井维护部等等。由于各个系统出来的数总不准确、都不一致，于是又成立了技术开发中心，负责各个系统的维护、二次开发。由于部门太多、办公场地不足，寺院专门成立了综合部来解决这一问题，最后决定把寺院整个变成办公区，香客烧香只许在山门外烧。 
 
　　部门多、当官的多档和开会自然就多，为了减少文山会海，综合办牵头召开了N次关于减少开会的会，并下达了“关于减少档的档”。同时，为了精简机构、提高效率，寺院还成立了精简机构办公室、机构改革研究部等部门。 
 
　　一切似乎都合情合理，但香火钱和喝水的问题还是迟迟不能解决。问题在哪呢？有的和尚提出来每月应该开一次分析会，于是经营分析部就应运而生了。分析需要很多数据和报表，可系统总是做不到，于是每个部门都指派了一些和尚手工统计、填写报表、给系统打工。
 
　　寺院空前地热闹起来，有的和尚在拼命挑水、有的和尚在拼命念经、有的和尚在拼命协调、有的和尚在拼命分析……忙来忙去，水还是不够喝、香火钱还是不够用。什么原因呢？这个和尚说流程不顺、那个和尚说任务分解不合理，这个和尚说部门界面不清、那个和尚说考核力度不够。只有三个人最清楚问题之关键所在，那三个人就是最早的那三个和尚。说来说去，就是***闲人太多了！他们说：“整天瞎分析个屁！什么***流程问题、职责问题、接口问题、考核问题，明明就是机构臃肿问题！早知今日，还不如当初咱们仨自觉自律一点算了！如今倒好，招来了这么一大帮傻B，一个个不干正经事还***人五人六的，跟屎盆子一样甩都甩不掉！”
 
　　又过了一年，寺院黄了，和尚们也都死了。人们在水井边发现了几具尸体，是累死的；在寺院里发现了几千具尸体，是渴死的。
</body>
</html>
<script language="JavaScript" type="text/javascript"></script>
我也准备搞这个，FCKeditor据说有几个插件。能不能即时动态就不知道。一开始自己想了一下  在部分ide里面有的是空格激发高亮有的是键盘任何事件都激发高亮我的想法是用一个不带高亮代码的隐藏容器，这个容器同步输入的数据只是不包含HTML高亮样式，当事件激活后，从容器内取纯净的数据再正则或者替换实现动态高亮。
感觉很不好，这样如果数据量大...
还有一个办法就是直接每次扫描最后几个字符，匹配就替换了
这份代码肯定对你有帮助
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>shawl.qiu template</title>
<script type="text/javascript">
//<![CDATA[
onload=function(){
var keyword=new keywords();
 keyword.body=document.body; // 要高亮显示关键词的 HTML 元素
 keyword.flag='keyword|纸伞|她|雨巷|儿女情|独自|芬芳|忧愁'; // 传递要匹配的关键词, 使用正则匹配.
 keyword.func=iLink; // 自定义链接函数, 可选, 参数为 yourfunc(sMatch, sBgCor, sFgCor);
 keyword.go(); // 执行本程序
 keyword=null;
} function iLink(sMatch, sBgCor, sFgCor){
 return '<a href="http://127.0.0.1:83/search.asp?sb=gl&key='+sMatch+'&fm=y&sc=desc&sct=stt">'+
 ''+sMatch+'</a>';
} /*-----------------------------------------------------------------------------------*\
 * shawl.qiu javascript dom 关键词高亮类 v1.0
\*-----------------------------------------------------------------------------------*/
//---------------------------------begin class keywords()-------------------------------// function keywords(){ // shawl.qiu code
 //------------------------------------begin public variable
 //---------------begin about
 this.auSubject='shawl.qiu javascript dom 关键词高亮类';
 this.auVersion='1.0';
 this.au='shawl.qiu';
 this.auEmail='[email protected]';
 this.auBlog='http://blog.csdn.net/btbtd';
 this.auCreateDate='2006-12-31';
 //---------------end about
 this.body=document.body;
 this.flag='';
 this.func='';
 this.iFlag1='@@';
 this.iFlag2='##';
 //------------------------------------end public variable
 //------------------------------------begin public method
 this.go=function(){
 fGetWord(tl.body);
 }; //------------------------------------end public method
 //------------------------------------begin private variable
 var tl=this;
 var tlTemp='';
 //------------------------------------end private variable
 //------------------------------------begin private method function fGetWord(oEle){
 for(var i=0, j=oEle.childNodes.length; i<j; i++){
 var oTemp=oEle.childNodes[i];
 if(oTemp.nodeType==1){
 arguments.callee(oTemp);
 } else if (oTemp.nodeType==3){
 var oRe=new RegExp(tl.flag,'gi');
 if(oRe.test(oTemp.data)){
 var sTemp=oTemp.data;
 sTemp=sTemp.replace(oRe,function(sMatch){
 if(tlTemp.indexOf(tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2)==-1){
 var sBgCor=fRndCor(10, 20);
 var sFgCor=fRndCor(230, 255);
 tlTemp+=tl.iFlag1+sMatch+tl.iFlag1+tl.iFlag2+sBgCor+tl.iFlag2+sFgCor;
 return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
 } else {
 var sBgCor=sFgCor='';
 var iRe=new RegExp(tl.iFlag1+'('+sMatch+')'+tl.iFlag1+tl.iFlag2+'(.*?)'+
 tl.iFlag2+'(.*?)('+tl.iFlag1+'|'+tl.iFlag2+'|$)','i');
 tlTemp.replace(iRe, function($0,$1,$2,$3){
 sBgCor=$2;sFgCor=$3;
 });
 return fReturnStr(oTemp, sMatch, sBgCor, sFgCor);
 }// end if 3
 });
 if(typeof sTemp!='undefined'){
 if(sTemp=='')break;
 var oSpan=document.createElement('span');
 oSpan.innerHTML=sTemp;
 oTemp.parentNode.replaceChild(oSpan, oTemp);
 oSpan=null;
 } // end if 3
 } // end if 2
 oRe=null;
 } // end if 1
 } // end for
 } // end function fGetWord(oEle) function fReturnStr(oNode, sMatch, sBgCor, sFgCor){
 if(tl.func==''||oNode.parentNode.nodeName=='A'){
 return ''+
 sMatch+'';
 } else {
 return tl.func(sMatch, sBgCor, sFgCor);
 }
 } // end function fReturnStr(oNode, sMatch, sBgCor, sFgCor) function fRndCor(under, over){
 if(arguments.length==1){
 var over=under;
 under=0;
 }else if(arguments.length==0){
 var under=0;
 var over=255;
 }
 var r=fRandomBy(under, over).toString(16);
 r=fStrPadStr(r, r, 2);
 var g=fRandomBy(under, over).toString(16);
 g=fStrPadStr(g, g, 2);
 var b=fRandomBy(under, over).toString(16);
 b=fStrPadStr(b, b, 2);
 //defaultStatus=r+' '+g+' '+b
 return '#'+(r+g+b).toUpperCase()+';';
 } // shawl.qiu code function fRandomBy(under, over){
 switch(arguments.length){
 case 1: return parseInt(Math.random()*under+1);
 case 2: return parseInt(Math.random()*(over-under+1) + under);
 default: return 0;
 }
 } // shawl.qiu code function fStrPadStr(sSrc, sPad, nLen){
 if(!sSrc)return false;
 if(!sPad)sPad='0';
 if(!nLen)nLen=2;
 sSrc+='';
 if(sSrc.length>=nLen)return sSrc;
 sPad=new Array(nLen+1).join(sPad);
 var re=new RegExp('.*(.{'+(nLen)+'})$');
 return (sPad+sSrc).replace(re,'$1');
 }
 //------------------------------------end private method
} // shawl.qiu code
//---------------------------------end class keywords()---------------------------------//
//]]>
</script>
</head>
<body>
keyword
<div class="at_maindd" id="at_main">CITE:<cite><div class=u_cite>戴望舒写女孩 
 
 雨 巷  
撑着油纸伞，独自  
彷徨在悠长、悠长  
又寂寥的雨巷，  
我希望逢着  
一个丁香一样地  
结着愁怨的姑娘。  
她是有  
丁香一样的颜色，  
丁香一样的芬芳，  
丁香一样的忧愁，  
在雨中哀怨，  
哀怨又彷徨；  
她彷徨在这寂寥的雨巷，  
撑着油纸伞  
像我一样，  
像我一样地  
默默踟躇着  
冷漠、凄清，又惆怅。  
她默默地走近，  
走近，又投出  
叹息一般的眼光  
她飘过  
像梦一般地，  
像梦一般地凄婉迷茫。  
像梦中飘过  
一枝丁香地，  
我身旁飘过这个女郎；  
她默默地远了，远了，  
到了颓圮的篱墙，  
走尽这雨巷。  
在雨的哀曲里，  
消了她的颜色，  
散了<a href="/">她</a>的芬芳，  
消散了，甚至她的  
叹息般的眼光  
丁香般的惆怅。  
撑着油纸伞，独自  
彷徨在悠长、悠长  
又寂寥的雨巷，  
我希望飘过  
一个丁香一样地  
结着愁怨的姑娘。</div></cite></div>
<a href="article.asp?classid=14&nclassid=178&articleid=12830#anchor">戴望舒写女孩</a> <a href="article.asp?classid=14&nclassid=178&articleid=12819#anchor">悲惨世界 - 第四部卜吕梅街的儿女情和圣德尼街的英雄血 - 第五卷　结尾不象开头 - 四　石头下面的一颗心</a> <a href="article.asp?classid=14&nclassid=178&articleid=12835#anchor">青玉案 元夕</a> <a href="article.asp?classid=14&nclassid=178&articleid=12855#anchor">“科学精神”语义分析</a> <a href="article.asp?classid=14&nclassid=178&articleid=3053#anchor">再别康桥－－徐志摩</a> <a href="article.asp?classid=14&nclassid=178&articleid=12862#anchor">学术论文格式</a> <a href="article.asp?classid=14&nclassid=178&articleid=12836#anchor">一棵开花的树</a> <a href="article.asp?classid=14&nclassid=178&articleid=12840#anchor">书信写作格式</a> <a href="article.asp?classid=14&nclassid=178&articleid=12818#anchor">悲惨世界 - 第四部卜吕梅街的儿女情和圣德尼街的英雄血 - 第十二卷　科林斯 - 六　等　待</a> <a href="article.asp?classid=14&nclassid=178&articleid=12834#anchor">卿云歌</a> 雨 巷  
撑着油纸伞，独自  
彷徨在悠长、悠长  
又寂寥的雨巷，  
我希望逢着  
一个丁香一样地  
结着愁怨的姑娘。  
她是有  
丁香一样的颜色，  
丁香一样的芬芳，  
丁香一样的忧愁，  
在雨中哀怨，  
哀怨又彷徨；  
她彷徨在这寂寥的雨巷，  
撑着油纸伞  
像我一样，  
像我一样地  
默默踟躇着  
冷漠、凄清，又惆怅。  
她默默地走近，  
走近，又投出  
叹息一般的眼光  
她飘过  
像梦一般地，  
像梦一般地凄婉迷茫。  
像梦中飘过  
一枝丁香地，  
我身旁飘过这个女郎；  
她默默地远了，远了，  
到了颓圮的篱墙，  
走尽这雨巷。  
在雨的哀曲里，  
消了她的颜色，  
散了<a href="/">她</a>的芬芳，  
消散了，甚至她的  
叹息般的眼光  
丁香般的惆怅。  
撑着油纸伞，独自  
彷徨在悠长、悠长  
又寂寥的雨巷，  
我希望飘过  
一个丁香一样地  
结着愁怨的姑娘。</div></cite>
</body>
</html>
关注一下。
感觉这个就是css或css框架的应用。

大难题来了！ 有什么办法通过JavaScript实现实时的语法高亮显示？

解决方案 »

大难题来了！有什么办法通过JavaScript实现实时的语法高亮显示？