Javascript實現CSS代碼高亮顯示_綜合其它特效

看到網上一位別出心裁的高手使用字符串而不是正則表達式實現了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" mrc="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>

所屬頻道：綜合其它特效/更新時間：2013-01-08

[收藏][報錯][返回列表]

相關綜合其它特效：

Javascript實現CSS代碼高亮顯示_綜合其它特效

綜合其它特效Rss訂閱特效代碼搜索

綜合其它特效推薦

猜你也喜歡看這些