Jquery 实现一个简单的 HTML 代码格式化工具

Jquery 实现一个简单的 HTML 代码格式化工具，主要功能，对中英文之间加入空格，格式化 HTML 代码：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
<html>
  <head>
    <title>HTML 代码格式化工具</title>
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
      input {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: normal;
        text-align: center;
        white-space: nowrap;
        background-image: none;
        border: 1px solid transparent;
        vertical-align: middle;
        -webkit-appearance: button;
        background-color: #16c0f8;
        bottom: 0;
        right: 0;
        box-shadow: none;
        width: 80px;
        border-radius: 0;
        color: #fff;
        opacity: 0.85;
        margin: 0 5px;
        padding: 8px 20px 7px;
        text-decoration: none; /*background-color: #ddd;
        color: #666;*/
        box-sizing: border-box;
        border-radius: 3px;
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <div style="width:60%;height:100%; margin:0 auto">
      <p>
        <strong>HTML 代码格式化工具</strong>
      </p>
      <p>
        <textarea
          name="oldHtmlCode"
          id="oldHtmlCode"
          cols="160"
          rows="24"
          style="width:100%;height:40%;"
        ></textarea>
      </p>
      <p style="text-align:right;">
        <input type="button" name="btnFormat" id="btnFormat" value="格式化" />
      </p>
      <p>
        <textarea
          name="newHtmlCode"
          id="newHtmlCode"
          cols="160"
          rows="24"
          style="width:100%;height:40%;"
        ></textarea>
      </p>
    </div>
  </body>
</html>
<script type="text/javascript">
  $(function() {
    $("#btnFormat").click(function() {
      //匹配英文临近中文
      var p1 = /([A-Za-z])((<[^<]*>)*[\u4e00-\u9fa5]+)/gi;
      var r = $("#oldHtmlCode").val();
      r = r.replace(p1, "$1 $2");
      //匹配数字临近中文
      var p2 = /([0-9])([\u4e00-\u9fa5]+)/gi;
      r = r.replace(p2, "$1 $2");
      //匹配中文临近数字
      var p3 = /([\u4e00-\u9fa5]+)([0-9])/gi;
      r = r.replace(p3, "$1 $2");
 
      var p4 = /([\u4e00-\u9fa5]+(<[^<]*>)*)([A-Za-z])/gi;
      r = r.replace(p4, "$1 $3");
      //r = r.replace("） ", "）");
      $("#newHtmlCode").val(format(r));
    });
    $("#btnFormat").click(function() {
      //获取贴入文本域的需要格式化的html代码
      var text = $("#origin").val();
      //执行格式化函数对文本进行格式化
      var fmt = format(text);
      //将格式化后的代码放入文本域进行显示
      $("#result").val(fmt);
    });
    function format(strs) {
      var left = null;
      var right = null;
      var str = "";
      var blank = "\t";
      var fmt = [];
 
      for (var i = 0; i < strs.length; i++) {
        //发现左尖括号后将其位置记录在left变量上
        if (strs[i] == "<") {
          left = i;
        } else if (strs[i] == ">") {
          //发现右尖括号后将其记录在right变量上
          right = i;
        }
        //当做尖括号右尖括号都记录了一个位置后，说明二者之间的内容为代码的一行
        if (typeof left == "number" && typeof right == "number") {
          //判断字符串左尖括号后是否为‘/’，如果满足，表明该行代码为双标签的闭合标签
          if (strs[left + 1] == "/") {
            //对数组中的空格做出栈，确保代码缩进正确
            fmt.pop();
            //将该行代码放入str变量中
            str += fmt.join("") + strs.slice(left, right + 1);
            //判断字符串右尖括号前一位是否为‘/’，如满足，表明该标签为严格闭合的单标签
          } else if (strs[right - 1] == "/") {
            str += fmt.join("") + strs.slice(left, right + 1);
            //判断字符串开头是否包含input/imig/hr/br/link/meta等字母，用于屏蔽非严格未闭合的单标签
          } else if (
            strs
              .slice(left, right)
              .search(/\<input|\<img|\<hr|\<br|\<link|\<meta/) != -1
          ) {
            str += fmt.join("") + strs.slice(left, right + 1);
            //对双标签的左标签进行的操作
          } else {
            str += fmt.join("") + strs.slice(left, right + 1);
            //向数组中堆入一个空格，确保下一行双标签的左标签的缩进正确
            fmt.push(blank);
          }
          //对 right 位置后的字符串进行遍历
          for (var j = right; j < strs.length; j++) {
            //查找right位置后，第一个左尖括号的位置，二者之间的内容即为代码中的文本内容
            if (strs[j] == "<") {
              //去掉文本中多余的空格
              var s = strs.slice(right + 1, j).replace(/\s*/g, "");
              if (s) {
                // 当文本中去掉空格后任然有内容，则将文本拼入 str 变量进行存储
                str += s;
              }
              break;
            }
          }
          // 每次获得一次左右尖括号的位置后，即得到了一行代码，为代码做换行处理
          str += "\n";
          // 重置 left、right 的值，用于 for 循环的下次存储做右尖括号的位置
          left = null;
          right = null;
        }
      }
      // 返回得到的格式化完成的 html 代码字符串
      return str;
    }
  });
</script>

目前还不是很完善，只是解决了自己常用的一些场景。

posted @   Charles Zhang  阅读(2696)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架
点击右上角即可分享
微信分享提示
AI IDE Trae