HTML,JAVASCRIPT代码美化demo

时间:2023-03-08 16:41:45
HTML,JAVASCRIPT代码美化demo

看见别人的博客里面的源码展示十分漂亮,一时兴起,就自己做了个。 当然,网上已经有别人做好的非常完善的codemirror、highlight、prettify。而我在写自己的这个小demo之前呢,也没有做多少参考,按着自己的思路写了一个能简单实现效果的demo。 先上源码:

0 <!DOCTYPE html>
1 <html lang="en">
2 <head>
3 <meta charset="UTF-8">
4 <title>Document</title>
5 <style>
6 *{
7 margin: 0;
8 padding: 0;
9 }
10 body{
11 font-family: "微软雅黑";
12 }
13 textarea{
14 vertical-align: middle;
15 }
16 td{
17 height: 24px;
18 line-height: 24px;
19 }
20 </style>
21 </head>
22 <body>
23 <textarea cols="70" rows="15" placeholder="请将HTML和javascript代码粘贴进来,生成table后可以双击进行再次编辑,点击湖区代码即可获取表格代码,请注意请注意请注意请注意请注意请注意请注意请注意请注意----------单双引号内若是包了单个单双引号,着色会出错,可提前删除,生成后再次编辑"></textarea>
24 <br>
25 <button class="sc">生成</button>
26 <button class="zt">获取代码</button>
27 <pre>
28 <table cellspacing="0" cellpadding="0" style="table-layout:fixed;">
29 </table>
30 </pre>
31 <script>
32 var btn = document.querySelector('.sc');
33 var zt = document.querySelector('.zt');
34 var text = document.querySelector('textarea');
35 var tab = document.querySelector('table');
36 btn.addEventListener('click', function(){
37 if(text.value == ''){
38 alert('请重新输入!');
39 return false;
40 }
41 var arr = text.value.split(/\n/);
42 var htm = '<tr><td contenteditable="false">0</td><td contenteditable="false">';
43 for(var i = 0; i < arr.length; i += 1){
44 var brr = arr[i].replace(/ /g,' ');
45 brr = brr.replace(/</g,'<');
46 brr = brr.replace(/>/g,'>');
47 brr = yin(brr);
48 brr = '<code>' + brr + '</code>';
49 if(i == arr.length-1){
50 htm += brr + '</td></tr>';
51 }else{
52 htm += brr + '</td></tr><tr><td contenteditable="false">' + (i+1) + '</td><td contenteditable="false">';
53 }
54 }
55 tab.innerHTML = htm;
56  
57 go();
58 })
59  
60 function go(){
61 var td = document.querySelectorAll('td');
62 var tr = document.querySelectorAll('tr');
63 var em = document.querySelectorAll('em');
64 [].forEach.call(td,function(v,i){
65 if(i % 2 == 0){
66 v.style.cssText = "text-align: center;width:24px;font-weight: bold;border-right:2px solid green;word-wrap:break-word;";
67 }else{
68 v.style.cssText = "padding:0 6px;word-wrap:break-word;outline-style:none;";
69 v.addEventListener('click', dbc);
70 }
71 });
72 [].forEach.call(tr,function(v,i){
73 if(i % 2 == 0){
74 v.style.cssText = "background-color:#f9f9f9;color:#333;"
75 }else{
76 v.style.cssText = 'background-color:#ddd;color:#333;'
77 }
78 })
79 }
80  
81 function dbc(event){
82 clearAll();
83 this.contentEditable = 'true';
84 this.style.color = 'green';
85 event.stopPropagation();
86 }
87  
88 function clearAll(){
89 var td = document.querySelectorAll('td');
90 [].forEach.call(td,function(v,i){
91 v.contentEditable = 'false';
92 if(i % 2 != 0){
93 v.style.color = '#333';
94 }
95 })
96 }
97  
98 function yin(str){
99 var arr = str.split('"');
100 if(arr.length > 1){
101 arr.forEach(function(v,i){
102 if(i != arr.length - 1){
103 if(i % 2 == 0){
104 arr[i] = v + '"<em style="color:#369;">';
105 }else{
106 arr[i] = v + '</em>"';
107 }
108 }
109 })
110 }
111 arr = arr.join('').split("'");
112 if(arr.length > 1){
113 arr.forEach(function(v,i){
114 if(i != arr.length - 1){
115 if(i % 2 == 0){
116 arr[i] = v + "'<em style='color:#369;'>";
117 }else{
118 arr[i] = v + "</em>'";
119 }
120 }
121 })
122 }
123 return arr.join('');
124 }
125 zt.addEventListener('click', function(){
126 text.value = document.querySelector('pre').innerHTML;
127 });
128 document.onclick = function(){
129 clearAll();
130 }
131 </script>
132 </body>
133 </html>

上图这些就是这部分代码完成的。 思路比较简单。

1.获取到textarea的value值。

2.我决定采用table完成展示。

3.通过字符串split方法用正则/\n/换行符将每一行提取出来放入数组。

4.数组arr每一项放入一个tr,tr的左边td就是行号++,右边td是内容。

5.由于html标签无法直接在页面中展示,所以在这里我将数组每一项里的html标签转换成了实体名称。

6.最后将表格进行遍历偶数行背景色不一样。

7.点击提取代码,可将表格的html代码设置为texareavalue值。

注意:这个美化代码的demo有一个bug。我希望引号包围的字符串可以颜色与众不同,所以我就又重新以引号分割数组每项,在数组前后添加相应的样式。可以初步实现效果。但这样做有一个问题,当遇到单引号包一个双引号字符串,双引号包一个单引号字符串的时候,是会出现误差的。

所以,我给td添加了contenteditable属性,单机后进入可编辑状态。 当然如果哪位朋友有好的解决方案欢迎留言我们共同探讨。 最后送上代码实例运行地址:点击运行

原文链接-摘自大公爵博客