zoukankan      html  css  js  c++  java
  • 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链接可至源码运行页。

    作者:Zjmainstay
             
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
    版权信息
  • 相关阅读:
    浅谈UML学习笔记之用例图
    浅谈UML学习笔记之类图
    浅谈UML学习笔记动态模型之序列图、协作图
    七天LLVM零基础入门(Linux版本)第一天
    浅谈UML学习笔记之构件图和部署图
    浅谈UML的概念和模型之UML类图关系
    浅谈UML的概念和模型之UML九种图
    浅谈UML学习笔记动态图之状态图和活动图
    Oracle Data Types
    Chapter 04Tuning the shared Pool
  • 原文地址:https://www.cnblogs.com/Zjmainstay/p/JS_format_1.html
Copyright © 2011-2022 走看看