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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20%24(id)%20%7B%20%0D%0A%20%20%20%20return%20document.getElementById(id)%3B%20%0D%0A%7D%3B%20%0D%0A%24(%22btn%22).onclick%3Dfunction()%7B%20%0D%0A%20%20%20%20var%20code%3D%24(%22area%22).value%3B%20%0D%0A%20%20%20%20%2F%2F%E5%A4%84%E7%90%86%E6%B3%A8%E9%87%8A%EF%BC%9A%E6%B3%A8%E9%87%8A%E6%9B%BF%E6%8D%A2%E6%88%90%20_%E6%95%B0%E5%AD%97_%20%0D%0A%20%20%20%20var%20startIdx%3DendIndex%3D-1%3B%20%0D%0A%20%20%20%20var%20at%3D0%3B%20%0D%0A%20%20%20%20var%20commentList%3D%5B%5D%3B%20%0D%0A%20%20%20%20while(true)%7B%20%0D%0A%20%20%20%20%20%20%20%20startIndex%3Dcode.indexOf(%22%2F*%22%2Cat)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(startIndex%3D%3D-1)break%3B%20%0D%0A%20%20%20%20%20%20%20%20endIndex%3Dcode.indexOf(%22*%2F%22%2CstartIndex)%3B%20%0D%0A%20%20%20%20%20%20%20%20if(endIndex%3D%3D-1)break%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%20%20%20%20at%3DendIndex%2B2%3B%20%0D%0A%20%20%20%20%20%20%20%20commentList.push(code.substring(startIndex%2Cat))%3B%20%0D%0A%20%20%20%20%20%20%20%20code%3Dcode.replace(commentList%5BcommentList.length-1%5D%2C%22_%22%2B(commentList.length-1)%2B%22_%22)%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E5%AD%97%E7%AC%A6%E4%B8%B2%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F(%5B'%22%5D).*%5C1%2Fg%2Cfunction(m)%7Breturn%20%22%3Cspan%20style%3D%5C%22color%3A%23060%3B%5C%22%3E%22%2Bm%2B%22%3C%2Fspan%3E%22%7D)%3B%20%0D%0A%20%20%20%20%2F%2FCSS%E6%A0%B7%E5%BC%8F%E5%80%BC%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F%3A(.%2B)%3B%2Fg%2Cfunction(m%2Cn)%7Breturn%20%22%3A%3Cspan%20style%3D%5C%22color%3A%2300F%3B%5C%22%3E%22%2Bn%2B%22%3C%2Fspan%3E%3B%22%7D)%3B%20%0D%0A%20%20%20%20%2F%2FCSS%E6%A0%B7%E5%BC%8F%E5%90%8D%E7%A7%B0%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F%5B%7B%7D%5D%2Fg%2Cfunction(m)%7B%20%0D%0A%20%20%20%20%20%20%20%20if(m%3D%3D%22%7B%22)%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%22%7B%3Cspan%20style%3D%5C%22color%3A%23006%3B%5C%22%3E%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7Delse%7B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20return%20%22%3C%2Fspan%3E%7D%22%3B%20%0D%0A%20%20%20%20%20%20%20%20%7D%20%0D%0A%20%20%20%20%7D)%3B%20%0D%0A%20%20%20%20%20%0D%0A%20%20%20%20%2F%2F%E6%B3%A8%E9%87%8A%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F_(%5Cd%2B)_%2Fg%2Cfunction(m%2Cn)%7Breturn%20%22%3Cspan%20style%3D%5C%22color%3A%23999%3B%5C%22%3E%22%2BcommentList%5Bn%5D%2B%22%3C%2Fspan%3E%22%7D)%3B%20%0D%0A%20%20%20%20%2F%2F%E5%A4%84%E7%90%86%5Ct%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F%5E(%5Ct%2B)%2Fgm%2Cfunction(m)%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20(new%20Array(m.length%2B1)).join(%22%26nbsp%3B%26nbsp%3B%26nbsp%3B%26nbsp%3B%22)%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0D%0A%20%20%20%20%7D)%3B%20%0D%0A%20%20%20%20%2F%2F%E5%A4%84%E7%90%86%E7%A9%BA%E6%A0%BC%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F%5E(%20%2B)%2Fgm%2C%20function(m)%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20(new%20Array(m.length%20%2B%201)).join(%22%26nbsp%3B%22)%3B%20%0D%0A%20%20%20%20%7D)%3B%20%0D%0A%20%20%20%20%2F%2F%E5%A4%84%E7%90%86%E6%8D%A2%E8%A1%8C%20%0D%0A%20%20%20%20code%3Dcode.replace(%2F%5Cr%3F%5Cn%2Fg%2C%22%3Cbr%3E%22)%3B%20%0D%0A%20%20%20%20%24(%22pre%22).innerHTML%3Dcode%3B%20%0D%0A%7D%20%0D%0A%3C%2Fscript%3E"> 
</body> 
</html>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程