您的位置：首页 > Web前端 > JavaScript

HTML,JAVASCRIPT代码美化demo

2016-08-10 09:24 387 查看
看见别人的博客里面的源码展示十分漂亮，一时兴起，就自己做了个。 当然，网上已经有别人做好的非常完善的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属性，单机后进入可编辑状态。 当然如果哪位朋友有好的解决方案欢迎留言我们共同探讨。 最后送上代码实例运行地址：点击运行

原文链接-摘自大公爵博客
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航