Tips:点此可运行HTML源码

js代码格式化工具(简单格式化,显示进度条)

canRun

原文:js代码格式化工具

演示地址

View Code
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <title>JSer</title>
  5 <meta http-equiv="content-type" content="text/html; charset=gb2312" />
  6 <style>
  7 /* Global CSS */
  8 * { padding:0px; margin:0px; font-size:13px; font-family: arial 宋体; }
  9 body { overflow:auto; border:0px none black; background-color:buttonface; }
 10 li { margin:0px 0px 0px 40px; padding:2px 4px; }
 11 /* Class CSS */
 12  
 13 .quote { color:#999; }
 14 .comments { color: #009090; }
 15 .indent { margin-left:25px; }
 16 .regexp { color:#F000F0; }
 17  
 18 /* Identified CSS */
 19 #divTools { height:20px; border-bottom:1px solid #555; padding-left:15px; }
 20 #divTools a { color:navy; text-decoration:none; height:20px; line-height:20px; padding:0px 25px; }
 21 #divTools a:hover { color:white; background-color:navy; text-decoration:none; height:20px; line-height:20px; }
 22 #divJSInput { display:none; width:600px; height:450px; border:2px outset buttonface; position:absolute; background-color:buttonface; z-Index:2; }
 23 #divJSInputTitle { color:white; background-color:navy; height:20px; line-height:20px; padding:0px 10px; cursor:default; }
 24 #txtJSInput { width:598px; height:406px; overflow:auto; padding:4px 8px; background-color:white;}
 25 #divJSInputBar { height:24px; padding:0px 4px; }
 26 #divJSInputBar input { width:110px; height:22px; border:1px solid #555; line-height:20px; }
 27 #divJSOutput { background-color:white; border:1px inset buttonface; width:100%; height:500px; overflow:auto; }
 28 #divWaiting { display:none; width:400px; height:60px; border:1px solid buttonface; position:absolute; background-color:#E0F0F0; z-Index:3; text-align:center; padding-top:10px; }
 29 #divWaiting input { width:140px; height:22px; border:1px solid #555; line-height:20px; cursor:default; margin-top:4px; }
 30 </style>
 31 <script type="text/javascript">
 32 /**********************
 33 Author: Hutia
 34 *********************/
 35  
 36 window.onload=init;
 37  
 38 //------------------
 39 // Static Variable
 40 //------------------
 41  
 42 var KEYWORDS="abstract break byte case catch char class const continue default delete do double else extends false final finally float for function goto if implements import in instanceof int interface long native null package private protected public reset return short static super switch synchronized this throw transient true try var void while with";
 43 var OBJECTS="Anchor Applet Area Arguments Array Boolean Button Checkbox Collection Crypto Date Dictionary Document Drive Drives Element Enumerator Event File FileObject FileSystemObject FileUpload Folder Folders Form Frame Function Global Hidden History HTMLElement Image Infinity Input JavaArray JavaClass JavaObject JavaPackage JSObject Layer Link Math MimeType Navigator Number Object Option Packages Password Plugin PrivilegeManager Random RegExp Screen Select String Submit Text Textarea URL VBArray Window WScript";
 44 var METHODS_PROPERTIES="above abs acos action activeElement alert alinkColor all altKey anchor anchors appCodeName applets apply appName appVersion arguments arity asin assign atan atan2 atob   availHeight availLeft availTop availWidth ActiveXObject back background below bgColor big blink blur bold border borderWidths bottom btoa button call callee caller cancelBubble captureEvents ceil charAt charCodeAt charset checked children classes className clear clearInterval clearTimeout click clientInformation   clientX clientY close closed colorDepth compile complete concat confirm constructir contains contextual cookie cos crypto ctrlKey current data defaultCharset defaultChecked defaultSelected defaultStatus defaultValue description disableExternalCapture disablePrivilege document domain E Echo   element elements embeds enabledPlugin enableExternalCapture enablePrivilege encoding escape eval event exec exp expando FromPoint fgColor fileName find fixed floor focus fontColor fontSize form forms forward frames fromCharCode fromElement   getAttribute get getClass getDate getDay getFullYear getHours getMember getMilliseconds getMinutes getMonth getSeconds getSelection getSlot getTime getTimezoneOffset   getUTCDate getUTCDay getUTCFullYear getUTCHours getUTCMilliseconds getUTCMinutes getUTCMonth getUTCSeconds getWindow getYear global go HandleEvent Height   hash hidden history home host hostName href hspace id ids ignoreCase images index indexOf inner innerHTML innerText innerWidth insertAdjacentHTML insertAdjacentText isFinite isNAN italics java javaEnabled join keyCode Links LN10 LN2 LOG10E LOG2E   lang language lastIndex lastIndexOf lastMatch lastModified lastParen layers layerX layerY left leftContext length link linkColor load location locationBar log lowsrc MAX_VALUE MIN_VALUE   margins match max menubar method mimeTypes min modifiers moveAbove moveBelow moveBy moveTo moveToAbsolute multiline NaN NEGATIVE_INFINITY   name navigate navigator netscape next number offscreenBuffering offset offsetHeight offsetLeft offsetParent offsetTop offsetWidth offsetX offsetY onabort onblur onchange onclick ondblclick ondragdrop onerror onfocus   onHelp onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onmove onreset onresize onsubmit onunload open opener options outerHeight   outerHTML outerText outerWidth POSITIVE_INFINITY PI   paddings pageX pageXOffset pageY pageYOffset parent parentElement parentLayer parentWindow parse parseFloat parseInt pathname personalbar pixelDepth platform plugins pop   port pow preference previous print prompt protocol prototype push random readyState reason referrer refresh releaseEvents reload removeAttribute removeMember replace resizeBy resizeTo returnValue reverse right rightcontext round SQRT1_2 SQRT2   screenX screenY scroll scrollbars scrollBy scrollIntoView scrollTo search select selected selectedIndex self setAttribute setDay setFullYear setHotkeys setHours setInterval   setMember setMilliseconds setMinutes setMonth setResizable setSeconds setSlot setTime setTimeout setUTCDate setUTCFullYear setUTCHours setUTCMillseconds setUTCMinutes   setUTCMonth setUTCSeconds setYear setZOptions shift shiftKey siblingAbove siblingBelow signText sin slice smallsort source sourceIndex splice split sqrt src   srcElement srcFilter status statusbar stop strike style sub submit substr substring suffixes sun sup systemLanguage TYPE   tagName tags taint taintEnabled tan target test text title toElement toGMTString toLocaleString toLowerCase toolbar top toString toUpperCase toUTCString type typeOf UTC unescape unshift untaint unwatch userAgent userLanguage   value valueOf visibility vlinkColor vspace watch which width window write writeln x y zIndex";
 45 var OPS="! $ % & * + - // / : < = > ? [ ] ^ | ~ is   new sizeof   typeof unchecked";
 46  
 47 var regKW=new RegExp("(\\W"+KEYWORDS.replace(/ /g,"$)|(\\W")+"$)","g");
 48 var regObj=new RegExp("(\\W"+OBJECTS.replace(/ /g,"$)|(\\W")+"$)","g");
 49 var regMP=new RegExp("(\\W"+METHODS_PROPERTIES.replace(/ /g,"$)|(\\W")+"$)","g");
 50 //var regOP=new RegExp("(\\W"+OPS.replace(/ /g,"$)|(\\W")+"$)","g");
 51  
 52 var colorKW="blue";
 53 var colorObj="red";
 54 var colorMP="#FF8000";
 55 var colorOP="#004000";
 56  
 57 //------------------
 58 // Global Variables
 59 //------------------
 60 var divJSInput, txtJSInput, divJSOutput, divWaiting, spnProcess;
 61 var glbStr, glbP, glbRe, curRe, glbTimer;
 62  
 63 function init(){
 64 // init global variables
 65 divJSInput=document.getElementById("divJSInput");
 66 txtJSInput=document.getElementById("txtJSInput");
 67 divJSOutput=document.getElementById("divJSOutput");
 68 divWaiting=document.getElementById("divWaiting");
 69 spnProcess=document.getElementById("spnProcess");
 70  
 71 // init window state
 72 maximizeWindow();
 73  
 74 divJSOutput.style.width=document.body.clientWidth-2;
 75 divJSOutput.style.height=document.body.clientHeight-26;
 76  
 77 // init global events
 78 divJSInput.onkeydown=divJSInput_keydown;
 79 }
 80  
 81  
 82 //------------------
 83 // event scripts
 84 //------------------
 85  
 86 function divJSInput_keydown(e){
 87 var e=window.event?window.event:e;
 88 var srcEle=e.srcElement?e.srcElement:e.target;
 89 var sel;
 90 if(e.keyCode==27)hideJSInput();
 91 if(e.keyCode==13&&e.ctrlKey)execJSInput();
 92 if(e.keyCode==9&&srcEle==txtJSInput){
 93    document.selection.createRange().text="\t";return(false); // not support FF
 94 }
 95 }
 96  
 97  
 98 //------------------
 99 // functional scripts
100 //------------------
101  
102 function showJSInput(){
103 with(divJSInput.style){
104    display="block";
105    left=(document.body.clientWidth-divJSInput.offsetWidth)/2;
106    top=(document.body.clientHeight-divJSInput.offsetHeight)/2;
107 }
108  
109 txtJSInput.focus();
110  
111 return(false);
112 }
113  
114 function hideJSInput(){
115 divJSInput.style.display="none";
116 }
117  
118 function execJSInput(){
119 hideJSInput();
120  
121 divJSOutput.innerHTML="";
122  
123 glbStr=txtJSInput.value.replace(/\r\n[ \t]+/gi,"\r\n").replace(/(\r\n)+/gi,"\r\n");
124 glbP=0;
125 curRe=glbRe=document.createElement("div");
126  
127 divJSOutput.appendChild(glbRe);
128  
129 glbRe.className="codeRoot";
130  
131 showWait();
132 core_analysis();
133 }
134  
135 function showWait(){
136 document.body.style.cursor="wait";
137  
138 with(divWaiting.style){
139    display="block";
140    left=(document.body.clientWidth-divWaiting.offsetWidth)/2;
141    top=(document.body.clientHeight-divWaiting.offsetHeight)/2;
142 }
143 spnProcess.innerHTML="0.00%   ( 0 / 0 )"
144 return(false);
145 }
146  
147 function stopExec(){
148 document.body.style.cursor="";
149 divWaiting.style.display="none";
150 try{clearTimeout(glbTimer);}catch(e){}
151  
152 return(false);
153 }
154  
155 function core_analysis(){
156 var str=" ", c="", lastState="", seq, intNextQuote, intTemp, intCount, intWordStart;
157 spnProcess.innerHTML=parseFloat(glbP/glbStr.length*100).toFixed(2)+"%   ( "+glbP+" / "+glbStr.length+" )";
158 for(var i=glbP;i<glbStr.length;i++){
159    c=glbStr.charAt(i);
160    str+=htmlEncode(c);
161    switch(c){
162     case "\r": case " ": case "\t":
163      if(lastState=="\r\n"){str=" ";break;}
164      if(c.match(/\W/)&&glbStr.charAt(i-1).match(/\w/)){
165       str=str.substring(0,str.length-htmlEncode(c).length);
166       str=str.replace(regKW,clKW).replace(regObj,clObj).replace(regMP,clMP)+htmlEncode(c);
167      }
168     break;
169     case "\n": case ";":
170      if(lastState=="\r\n"){str=" ";break;}
171      outputLn(str);
172      str=" ";
173      lastState="\r\n";
174      if(i-glbP>200){
175       glbP=i+1;
176       glbTimer=setTimeout(core_analysis);
177       return;
178      }
179     break;
180     case "\"":
181      intNextQuote=i;
182      while(intNextQuote!=-1&&intNextQuote<glbStr.length){
183       intNextQuote=glbStr.indexOf("\"",intNextQuote+1);
184       if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break;
185       intCount=0; intTemp=intNextQuote;
186       while(glbStr.charAt(--intTemp)=="\\")intCount++;
187       if(intCount%2==0)break;
188      }
189      if(intNextQuote==-1)break;
190      str+="<span class=\"quote\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\"";
191      i=intNextQuote;
192      lastState="";
193     break;
194     case "\'":
195      intNextQuote=i;
196      while(intNextQuote!=-1&&intNextQuote<glbStr.length){
197       intNextQuote=glbStr.indexOf("\'",intNextQuote+1);
198       if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break;
199       intCount=0; intTemp=intNextQuote;
200       while(glbStr.charAt(--intTemp)=="\\")intCount++;
201       if(intCount%2==0)break;
202      }
203      if(intNextQuote==-1)break;
204      str+="<span class=\"quote\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\'";
205      i=intNextQuote;
206      lastState="";
207     break;
208     case "\/":
209      if(glbStr.charAt(i+1)=="\/"){
210       intNextQuote=i;
211       intNextQuote=glbStr.indexOf("\r\n",intNextQuote+1);
212       if(intNextQuote==-1)intNextQuote=glbStr.length;
213       str=str.substring(0,str.length-1);
214       str+="<span class=\"comments\">\/"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>";
215       i=intNextQuote;
216      }else if(glbStr.charAt(i+1)=="*"){
217       intNextQuote=i;
218       intNextQuote=glbStr.indexOf("*\/",intNextQuote+1);
219       if(intNextQuote==-1)return;
220       str=str.substring(0,str.length-1);
221       str+="<span class=\"comments\">\/"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"*\/<\/span>";
222       i=intNextQuote+1;
223      }else if(str.match(/[=(][ \t]*\//)){
224       intNextQuote=i;
225       while(intNextQuote!=-1&&intNextQuote<glbStr.length){
226        intNextQuote=glbStr.indexOf("\/",intNextQuote+1);
227        if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break;
228        intCount=0; intTemp=intNextQuote;
229        while(glbStr.charAt(--intTemp)=="\\")intCount++;
230        if(intCount%2==0)break;
231       }
232       if(intNextQuote==-1)break;
233       str+="<span class=\"regexp\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\/";
234       i=intNextQuote;
235       lastState="";
236      }
237      lastState="";
238     break;
239     case "{":
240      outputLn(str);
241      str=" ";
242      seq=document.createElement("div");
243      seq.className="indent";
244      curRe.appendChild(seq);
245      curRe=seq;
246      lastState="\r\n";
247      if(i-glbP>200){
248       glbP=i+1;
249       glbTimer=setTimeout(core_analysis);
250       return;
251      }
252     break;
253     case "}":
254      outputLn(str.substring(0,str.length-1));
255      str="} ";
256      lastState="";
257      curRe=curRe.parentNode;
258     break;
259     default:
260      if(c.match(/\w/)&&glbStr.charAt(i-1).match(/\W/)){intWordStart=i;}
261      if(c.match(/\W/)&&glbStr.charAt(i-1).match(/\w/)){
262       str=str.substring(0,str.length-htmlEncode(c).length);
263       str=str.replace(regKW,clKW).replace(regObj,clObj).replace(regMP,clMP)+htmlEncode(c);
264      }
265      lastState="";
266     break;
267    }
268 }
269  
270 if(i==glbStr.length){
271    if(str!=""){ outputLn(str); str=" "; }
272    stopExec();
273 }
274  
275 }
276  
277 function outputLn(theStr){
278 var seq=document.createElement("p");
279 seq.innerHTML=theStr;
280 curRe.appendChild(seq);
281 }
282  
283 function clKW(str){ return(str.charAt(0)+str.substring(1).fontcolor(colorKW)); }
284  
285 function clObj(str){ return(str.charAt(0)+str.substring(1).fontcolor(colorObj)); }
286  
287 function clMP(str){ return(str.charAt(0)+str.substring(1).fontcolor(colorMP)); }
288  
289 function clOP(str){ return(str.charAt(0)+str.substring(1).fontcolor(colorOP)); }
290  
291  
292 //------------------
293 // global scripts
294 //------------------
295  
296 function maximizeWindow(){
297 window.moveTo(0,0);
298 window.resizeTo(screen.availWidth,screen.availHeight);
299 }
300  
301 function htmlEncode(strS){
302 return(strS.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g," ").replace(/\r\n/g,"<br\/>"));
303 }
304 </script>
305 </head>
306 <body>
307  
308 <div id="divTools">
309 <a href="#" onclick="return(showJSInput());">Input JS</a>
310 </div>
311  
312 <div id="divJSInput">
313 <div id="divJSInputTitle">Please Input the JS:</div>
314    <textarea id="txtJSInput">
315 </textarea>
316    <div id="divJSInputBar">
317    <input type="button" value="OK" onclick="execJSInput();" />
318    <input type="button" value="Cancel" onclick="hideJSInput();" />
319 </div>
320 </div>
321  
322 <div id="divJSOutput"></div>
323  
324 <div id="divWaiting">
325 Processing...<span id="spnProcess"></span><br>
326 <input type="button" value="Stop" onclick="stopExec();" />
327 </div>
328 </body>
329 </html>

 PS:纯HTML,可运行,点击左上方Tips链接可至源码运行页。

 

posted @ 2012-06-20 14:30  Zjmainstay  阅读(707)  评论(0编辑  收藏  举报