Javascript实现的CSS代码高亮显示_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:45:24

Javascript实现的CSS代码高亮显示_javascript技巧

Javascript实现的CSS代码高亮显示_javascript技巧:相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。 Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Cou

推荐度：

点击下载本文 文档为doc格式

导读Javascript实现的CSS代码高亮显示_javascript技巧:相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。 Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Cou

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

<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> 
 
 
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 ""+m+""}); 
 //CSS样式值 
 code=code.replace(/:(.+);/g,function(m,n){return ":"+n+";"}); 
 //CSS样式名称 
 code=code.replace(/[{}]/g,function(m){ 
 if(m=="{"){ 
 return "{"; 
 }else{ 
 return "}"; 
 } 
 }); 
 
 //注释 
 code=code.replace(/_(\d+)_/g,function(m,n){return ""+commentList[n]+""}); 
 //处理\t 
 code=code.replace(/^(\t+)/gm,function(m){ 
 return (new Array(m.length+1)).join(" "); 
 }); 
 //处理空格 
 code=code.replace(/^( +)/gm, function(m) { 
 return (new Array(m.length + 1)).join(" "); 
 }); 
 //处理换行 
 code=code.replace(/\r?\n/g,"<br>"); 
 $("pre").innerHTML=code; 
} 
</ script> 
</body> 
</html>

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

Javascript实现的CSS代码高亮显示_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：显示实现 js

热门焦点

Javascript实现的CSS代码高亮显示_javascript技巧

Javascript实现的CSS代码高亮显示_javascript技巧

Javascript实现的CSS代码高亮显示_javascript技巧

最新推荐

猜你喜欢

热门推荐