首页 > 网络编程 > JavaScript > javascript技巧 > CSS代码高亮

Javascript实现的CSS代码高亮显示

2009-11-10 11:49:03 作者：

到网上一位别出心裁的高手使用字符串而不是正则表达式实现了Javascript代码高亮显示，自己受益匪浅，于是就构思了CSS代码的高亮显示。

相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。

<!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实现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 id="pre" style="color:#F0F;"></div> 
<script type="text/javascript"> 
function $(id) { 
    return document.getElementById(id); 
}; 
$("btn").onclick=function(){ 
    var code=$("area").value; 
    //处理注释：注释替换成 _数字_ 
    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需刷新才能执行]

Javascript实现的CSS代码高亮显示

您可能感兴趣的文章: