javascrpt 页面格式化页面
下面这个页面，格式化javaScript
1 <html> 2 <head> 3 <title>JS格式化工具 </title> 4 <meta http-equiv="content-type" content="text/html; charset=gb2312" /> 5 <style> 6 7 * { padding:0px; margin:5px; font-size:13px; font-family: arial 宋体; } 8 body { overflow:auto; border:0px none black; background-color:buttonface; } 9 li { margin:0px 0px 0px 40px; padding:2px 4px; } 10 11 12 .quote { color:#999; } 13 .comments { color: #009090; } 14 .indent { margin-left:25px; } 15 .regexp { color:#F000F0; } 16 17 #divTools { height:20px; border-bottom:1px solid #555; padding-left:15px; } 18 #divTools a { color:navy; text-decoration:none; height:20px; line-height:20px; padding:0px 25px; } 19 #divTools a:hover { color:white; background-color:navy; text-decoration:none; height:20px; line-height:20px; } 20 #divJSInput { display:none; width:600px; height:450px; border:2px outset buttonface; position:absolute; background-color:buttonface; z-Index:2; } 21 #divJSInputTitle { color:white; background-color:navy; height:20px; line-height:20px; padding:0px 10px; cursor:default; } 22 #txtJSInput { width:598px; height:406px; overflow:auto; padding:4px 8px; background-color:white;} 23 #divJSInputBar { height:24px; padding:0px 4px; } 24 #divJSInputBar input { width:110px; height:22px; border:1px solid #555; line-height:20px; } 25 #divJSOutput { background-color:white; border:1px inset buttonface; width:100%; height:500px; overflow:auto; } 26 #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; } 27 #divWaiting input { width:140px; height:22px; border:1px solid #555; line-height:20px; cursor:default; margin-top:4px; } 28 </style> 29 <script type="text/javascript"> 30 31 32 window.onload=init; 33 34 //------------------ 35 36 // Static Variable 37 38 //------------------ 39 40 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"; 41 42 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 45 46 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"; 47 48 49 var OPS="! $ % & * + - // / : < = > ? [ ] ^ | ~ is new sizeof typeof unchecked"; 50 51 var regKW=new RegExp("(\\W"+KEYWORDS.replace(/ /g,"$)|(\\W")+"$)","g"); 52 53 var regObj=new RegExp("(\\W"+OBJECTS.replace(/ /g,"$)|(\\W")+"$)","g"); 54 55 56 var regMP=new RegExp("(\\W"+METHODS_PROPERTIES.replace(/ /g,"$)|(\\W")+"$)","g"); 57 58 //var regOP=new RegExp("(\\W"+OPS.replace(/ /g,"$)|(\\W")+"$)","g"); 59 60 var colorKW="blue"; 61 62 var colorObj="red"; 63 64 var colorMP="#FF8000"; 65 66 67 var colorOP="#004000"; 68 69 //------------------ 70 71 // Global Variables 72 73 //------------------ 74 75 var divJSInput, txtJSInput, divJSOutput, divWaiting, spnProcess; 76 77 var glbStr, glbP, glbRe, curRe, glbTimer; 78 79 function init(){ 80 81 82 // init global variables 83 84 divJSInput=document.getElementById("divJSInput"); 85 86 txtJSInput=document.getElementById("txtJSInput"); 87 88 divJSOutput=document.getElementById("divJSOutput"); 89 90 divWaiting=document.getElementById("divWaiting"); 91 92 93 spnProcess=document.getElementById("spnProcess"); 94 95 // init window state 96 97 maximizeWindow(); 98 99 divJSOutput.style.width=document.body.clientWidth-2; 100 101 divJSOutput.style.height=document.body.clientHeight-26; 102 103 104 // init global events 105 106 divJSInput.onkeydown=divJSInput_keydown; 107 108 109 } 110 111 //------------------ 112 113 // event scripts 114 115 //------------------ 116 117 function divJSInput_keydown(e){ 118 119 var e=window.event?window.event:e; 120 121 var srcEle=e.srcElement?e.srcElement:e.target; 122 123 124 var sel; 125 126 if(e.keyCode==27)hideJSInput(); 127 128 if(e.keyCode==13&&e.ctrlKey)execJSInput(); 129 130 if(e.keyCode==9&&srcEle==txtJSInput){ 131 132 document.selection.createRange().text="\t"; 133 134 return(false); 135 136 // not support FF 137 138 139 } 140 141 142 } 143 144 //------------------ 145 146 // functional scripts 147 148 //------------------ 149 150 function showJSInput(){ 151 152 with(divJSInput.style){ 153 154 display="block"; 155 156 left=(document.body.clientWidth-divJSInput.offsetWidth)/2; 157 158 top=(document.body.clientHeight-divJSInput.offsetHeight)/2; 159 160 161 162 } 163 164 txtJSInput.focus(); 165 166 return(false); 167 168 169 } 170 171 function hideJSInput(){ 172 173 divJSInput.style.display="none"; 174 175 176 } 177 178 function execJSInput(){ 179 180 hideJSInput(); 181 182 divJSOutput.innerHTML=""; 183 184 glbStr=txtJSInput.value.replace(/\r\n[ \t]+/gi,"\r\n").replace(/(\r\n)+/gi,"\r\n"); 185 186 187 glbP=0; 188 189 curRe=glbRe=document.createElement("div"); 190 191 divJSOutput.appendChild(glbRe); 192 193 glbRe.className="codeRoot"; 194 195 showWait(); 196 197 core_analysis(); 198 199 200 } 201 202 function showWait(){ 203 204 document.body.style.cursor="wait"; 205 206 207 with(divWaiting.style){ 208 209 display="block"; 210 211 left=(document.body.clientWidth-divWaiting.offsetWidth)/2; 212 213 top=(document.body.clientHeight-divWaiting.offsetHeight)/2; 214 215 216 } 217 218 spnProcess.innerHTML="0.00% ( 0 / 0 )" 219 220 return(false); 221 222 223 } 224 225 function stopExec(){ 226 227 document.body.style.cursor=""; 228 229 divWaiting.style.display="none"; 230 231 txta.value=divJSOutput.innerHTML; 232 233 try{ 234 235 clearTimeout(glbTimer); 236 237 238 } catch(e){ 239 240 241 } 242 243 return(false); 244 245 246 } 247 248 function core_analysis(){ 249 250 251 var str=" ", c="", lastState="", seq, intNextQuote, intTemp, intCount, intWordStart; 252 253 spnProcess.innerHTML=parseFloat(glbP/glbStr.length*100).toFixed(2)+"% ( "+glbP+" / "+glbStr.length+" )"; 254 255 for(var i=glbP; 256 257 i<glbStr.length; 258 259 i++){ 260 261 c=glbStr.charAt(i); 262 263 str+=htmlEncode(c); 264 265 switch(c){ 266 267 case "\r": case " ": case "\t": 268 269 if(lastState=="\r\n"){ 270 271 str=" "; 272 273 break; 274 275 276 } 277 278 if(c.match(/\W/)&&glbStr.charAt(i-1).match(/\w/)){ 279 280 str=str.substring(0,str.length-htmlEncode(c).length); 281 282 283 str=str.replace(regKW,clKW).replace(regObj,clObj).replace(regMP,clMP)+htmlEncode(c); 284 285 286 } 287 288 break; 289 290 case "\n": case ";": 291 292 if(lastState=="\r\n"){ 293 294 str=" "; 295 296 break; 297 298 299 } 300 301 outputLn(str); 302 303 str=" "; 304 305 lastState="\r\n"; 306 307 308 if(i-glbP>200){ 309 310 glbP=i+1; 311 312 glbTimer=setTimeout(core_analysis); 313 314 return; 315 316 317 } 318 319 break; 320 321 case "\"": 322 323 intNextQuote=i; 324 325 while(intNextQuote!=-1&&intNextQuote<glbStr.length){ 326 327 intNextQuote=glbStr.indexOf("\"",intNextQuote+1); 328 329 330 if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break; 331 332 intCount=0; 333 334 intTemp=intNextQuote; 335 336 while(glbStr.charAt(--intTemp)=="\\")intCount++; 337 338 if(intCount%2==0)break; 339 340 341 } 342 343 if(intNextQuote==-1)break; 344 345 346 str+="<span class=\"quote\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\""; 347 348 i=intNextQuote; 349 350 lastState=""; 351 352 break; 353 354 case "\'": 355 356 intNextQuote=i; 357 358 while(intNextQuote!=-1&&intNextQuote<glbStr.length){ 359 360 361 intNextQuote=glbStr.indexOf("\'",intNextQuote+1); 362 363 if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break; 364 365 intCount=0; 366 367 intTemp=intNextQuote; 368 369 while(glbStr.charAt(--intTemp)=="\\")intCount++; 370 371 if(intCount%2==0)break; 372 373 374 375 } 376 377 if(intNextQuote==-1)break; 378 379 str+="<span class=\"quote\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\'"; 380 381 i=intNextQuote; 382 383 lastState=""; 384 385 break; 386 387 case "\/": 388 389 if(glbStr.charAt(i+1)=="\/"){ 390 391 392 intNextQuote=i; 393 394 intNextQuote=glbStr.indexOf("\r\n",intNextQuote+1); 395 396 if(intNextQuote==-1)intNextQuote=glbStr.length; 397 398 str=str.substring(0,str.length-1); 399 400 str+="<span class=\"comments\">\/"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>"; 401 402 403 i=intNextQuote; 404 405 406 } else if(glbStr.charAt(i+1)=="*"){ 407 408 intNextQuote=i; 409 410 intNextQuote=glbStr.indexOf("*\/",intNextQuote+1); 411 412 if(intNextQuote==-1)return; 413 414 str=str.substring(0,str.length-1); 415 416 str+="<span class=\"comments\">\/"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"*\/<\/span>"; 417 418 419 i=intNextQuote+1; 420 421 422 } else if(str.match(/[=(][ \t]*\//)){ 423 424 intNextQuote=i; 425 426 while(intNextQuote!=-1&&intNextQuote<glbStr.length){ 427 428 intNextQuote=glbStr.indexOf("\/",intNextQuote+1); 429 430 if(intNextQuote==-1||glbStr.charAt(intNextQuote-1)!="\\")break; 431 432 433 intCount=0; 434 435 intTemp=intNextQuote; 436 437 while(glbStr.charAt(--intTemp)=="\\")intCount++; 438 439 if(intCount%2==0)break; 440 441 442 } 443 444 if(intNextQuote==-1)break; 445 446 str+="<span class=\"regexp\">"+htmlEncode(glbStr.substring(i+1,intNextQuote))+"<\/span>\/"; 447 448 449 i=intNextQuote; 450 451 lastState=""; 452 453 454 } 455 456 lastState=""; 457 458 break; 459 460 case "{": 461 462 outputLn(str); 463 464 str=" "; 465 466 seq=document.createElement("div"); 467 468 seq.className="indent"; 469 470 curRe.appendChild(seq); 471 472 curRe=seq; 473 474 lastState="\r\n"; 475 476 477 if(i-glbP>200){ 478 479 glbP=i+1; 480 481 glbTimer=setTimeout(core_analysis); 482 483 return; 484 485 486 } 487 488 break; 489 490 case "}": 491 492 outputLn(str.substring(0,str.length-1)); 493 494 str="} "; 495 496 lastState=""; 497 498 curRe=curRe.parentNode; 499 500 break; 501 502 default: 503 504 if(c.match(/\w/)&&glbStr.charAt(i-1).match(/\W/)){ 505 506 intWordStart=i; 507 508 509 } 510 511 if(c.match(/\W/)&&glbStr.charAt(i-1).match(/\w/)){ 512 513 str=str.substring(0,str.length-htmlEncode(c).length); 514 515 str=str.replace(regKW,clKW).replace(regObj,clObj).replace(regMP,clMP)+htmlEncode(c); 516 517 518 519 } 520 521 lastState=""; 522 523 break; 524 525 526 } 527 528 529 } 530 531 if(i==glbStr.length){ 532 533 if(str!=""){ 534 535 outputLn(str); 536 537 str=" "; 538 539 540 } 541 542 stopExec(); 543 544 545 } 546 547 548 } 549 550 function outputLn(theStr){ 551 552 var seq=document.createElement("p"); 553 554 seq.innerHTML=theStr; 555 556 557 curRe.appendChild(seq); 558 559 560 } 561 562 function clKW(str){ 563 564 return(str.charAt(0)+str.substring(1).fontcolor(colorKW)); 565 566 567 } 568 569 function clObj(str){ 570 571 return(str.charAt(0)+str.substring(1).fontcolor(colorObj)); 572 573 574 } 575 576 function clMP(str){ 577 578 return(str.charAt(0)+str.substring(1).fontcolor(colorMP)); 579 580 581 } 582 583 function clOP(str){ 584 585 return(str.charAt(0)+str.substring(1).fontcolor(colorOP)); 586 587 588 } 589 590 //------------------ 591 592 // global scripts 593 594 //------------------ 595 596 function maximizeWindow(){ 597 598 window.moveTo(0,0); 599 600 window.resizeTo(screen.availWidth,screen.availHeight); 601 602 603 } 604 605 function htmlEncode(strS){ 606 607 return(strS.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/ /g," ").replace(/\r\n/g,"<br\/>")); 608 609 610 } 611 612 </script> 613 </head> 614 <body> 615 <div id="divTools"> 616 <a href="#" onclick="return(showJSInput());">点击我输入要格式化的JS</a> 617 </div> 618 <div id="divJSInput"> 619 <div id="divJSInputTitle">请输入JS:－</div> 620 <textarea id="txtJSInput"></textarea> 621 <div id="divJSInputBar"> 622 <input type="button" value="OK" onclick="execJSInput();" /> 623 <input type="button" value="Cancel" onclick="hideJSInput();" /> 624 </div> 625 </div> 626 <div id="divJSOutput"></div> 627 <textarea rows=20 cols=200 id="txta"> 628 </textarea> 629 <div id="divWaiting"> 630 Processing...<span id="spnProcess"></span><br> 631 <input type="button" value="Stop" onclick="stopExec();" /> 632 </div> 633 </body> 634 </html>
每天进步一点点
