Javascript實(shí)現(xiàn)的CSS代碼高亮顯示

更新時(shí)間：2009年11月10日 11:49:03 作者：

到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示，自己受益匪淺，于是就構(gòu)思了CSS代碼的高亮顯示。

相比JavaScript，CSS的語法就簡單多了，主要是處理注釋、字符串、CSS樣式名稱、CSS樣式值、縮進(jìn)和換行，具體詳情請看代碼。

<!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>Javascript實(shí)現(xiàn)CSS代碼高亮顯示 </title> <style type="text/css"> body{     font-size:12px;     line-height:1.8;     font-family:'Courier New', Courier, monospace; } #area{     width:320px;     height:120px; } </style> </head> <body> <textarea id="area"> body{     font-size:12px;     line-height:1.8; } #area{     width:320px;     line-height:1.5;     font-family:"Courier New", Courier, monospace; } /* ul{ margin:0; padding:0; } */ </textarea> <button id="btn">This'S Testing……</button> <div   class="qgq2qam"   id="pre" style="color:#F0F;"></div> <script type="text/javascript"> function $(id) {     return document.getElementById(id); }; $("btn").onclick=function(){     var code=$("area").value;     //處理注釋：注釋替換成 _數(shù)字_     var startIdx=endIndex=-1;     var at=0;     var commentList=[];     while(true){         startIndex=code.indexOf("/*",at);         if(startIndex==-1)break;         endIndex=code.indexOf("*/",startIndex);         if(endIndex==-1)break;                  at=endIndex+2;         commentList.push(code.substring(startIndex,at));         code=code.replace(commentList[commentList.length-1],"_"+(commentList.length-1)+"_");     }          //字符串     code=code.replace(/(['"]).*\1/g,function(m){return "<span style=\"color:#060;\">"+m+"</span>"});     //CSS樣式值     code=code.replace(/:(.+);/g,function(m,n){return ":<span style=\"color:#00F;\">"+n+"</span>;"});     //CSS樣式名稱     code=code.replace(/[{}]/g,function(m){         if(m=="{"){             return "{<span style=\"color:#006;\">";         }else{             return "</span>}";         }     });          //注釋     code=code.replace(/_(\d+)_/g,function(m,n){return "<span style=\"color:#999;\">"+commentList[n]+"</span>"});     //處理\t     code=code.replace(/^(\t+)/gm,function(m){         return (new Array(m.length+1)).join("&nbsp;&nbsp;&nbsp;&nbsp;");                                         });     //處理空格     code=code.replace(/^( +)/gm, function(m) {         return (new Array(m.length + 1)).join("&nbsp;");     });     //處理換行     code=code.replace(/\r?\n/g,"<br>");     $("pre").innerHTML=code; } </script> </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: