Tips:点此可运行HTML源码

js代码格式化工具(格式化、压缩、加密压缩)

canRun

原文:JavaScript/HTML格式化工具

演示地址

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         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5         <title>
  6             JavaScript/HTML格式化 - 站长工具
  7         </title>
  8         <link href="https://files.cnblogs.com/Zjmainstay/toolsite.css" rel="stylesheet" type="text/css">
  9         <script src="https://files.cnblogs.com/Zjmainstay/base.js" type="text/javascript"></script>
 10         <script src="https://files.cnblogs.com/Zjmainstay/jsformat.js" type="text/javascript"></script>
 11         <script src="https://files.cnblogs.com/Zjmainstay/htmlformat.js" type="text/javascript"></script>
 12     </head>    
 13     <body>
 14         <div class="wrap">
 15             <div class="main">
 16                 <script type="text/javascript">
 17                     function do_js_beautify() {
 18                         document.getElementById('beautify').disabled = true;
 19                         js_source = document.getElementById('content').value.replace(/^\s+/, '');
 20                         tabsize = document.getElementById('tabsize').value;
 21                         tabchar = ' ';
 22                         if (tabsize == 1) {
 23                             tabchar = '\t';
 24                         }
 25                         if (js_source && js_source.charAt(0) === '<') {
 26                             document.getElementById('content').value = style_html(js_source, tabsize, tabchar, 80);
 27                         } else {
 28                             document.getElementById('content').value = js_beautify(js_source, tabsize, tabchar);
 29                         }
 30                         document.getElementById('beautify').disabled = false;
 31                         return false;
 32                     }
 33                     function pack_js(base64) {
 34                         var input = document.getElementById('content').value;
 35                         var packer = new Packer;
 36                         if (base64) {
 37                             var output = packer.pack(input, 1, 0);
 38                         } else {
 39                             var output = packer.pack(input, 0, 0);
 40                         }
 41                         document.getElementById('content').value = output;
 42                     }
 43                     function Empty() {
 44                         document.getElementById('content').value = '';
 45                         document.getElementById('content').select();
 46                     }
 47                     function GetFocus() {
 48                         document.getElementById('content').focus();
 49                     }
 50                 </script>
 51                 <form>
 52                     <div class="box">
 53                         <div id="b_1">
 54                             <h1>
 55                                 <div class="titleft">
 56                                     <a href="http://tool.chinaz.com/Tools/JsFormat.aspx">
 57                                         JavaScript/HTML格式化工具
 58                                     </a>
 59                                 </div>
 60                             </h1>
 61                             <div class="box1">
 62                                 <div style="color:#006AAD;font-size:16px;font-weight:bold;" align="center">
 63                                     JavaScript/HTML格式化
 64                                 </div>
 65                                 <div style="padding-top:10px;" align="center">
 66                                     <textarea id="content" name="content" style="width: 850px; border: 1px solid rgb(197, 226, 242); height: 300px; overflow: visible;"
 67                                     cols="20" rows="20">
 68                                     </textarea>
 69                                 </div>
 70                                 <div style="padding:7px 0px 0px 6px;">
 71                                     <select name="tabsize" id="tabsize">
 72                                         <option value="1">
 73                                             制表符缩进
 74                                         </option>
 75                                         <option value="2">
 76                                             2个空格缩进
 77                                         </option>
 78                                         <option value="4" selected="selected">
 79                                             4个空格缩进
 80                                         </option>
 81                                         <option value="8">
 82                                             8个空格缩进
 83                                         </option>
 84                                     </select>
 85                                     <input class="but2" value="格式化" onclick="return do_js_beautify()" id="beautify"
 86                                     type="button">
 87                                     <input class="but2" value="普通压缩" onclick="pack_js(0)" type="button">
 88                                     <input class="but2" value="加密压缩" onclick="pack_js(1)" type="button">
 89                                     <input class="but2" value="清空结果" onclick="Empty();" type="button">
 90                                 </div>
 91                             </div>
 92                         </div>
 93                     </div>
 94                 </form>
 95                 <div class="box">
 96                     <div id="b_14">
 97                         <h1>
 98                             <div style="float:left;">
 99                                 工具简介
100                             </div>
101                         </h1>
102                         <div class="box1">
103                             <span class="info2" style=" font-size: 14px; line-height: 24px; text-align: left;white-space:normal; width:860px;overflow:hidden;">
104                                 可以把混乱的代码进行分行,整齐的显示出来。
105                             </span>
106                         </div>
107                     </div>
108                     <div style=" height:5px;">
109                     </div>
110                 </div>
111             </div>
112         </div>
113     </body>
114 </html>

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

 

 

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