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

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

HTML,JAVASCRIPT代码美化demo的更多相关文章

  1. JS Nice – JavaScript 代码美化和格式化工具

    JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...

  2. javascript代码 调试方法

    你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...

  3. JavaScript代码段整理笔记系列（二）

    上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...

  4. 博客代码美化(SyntaxHighlighter)

    这篇博文主要讲解自己使用SyntaxHighlighter对代码进行美工中遇见的问题以及如何使用SyntaxHighlighter? 首先来看看SyntaxHighlighter对代码美工的效果吧! ...

  5. 编写更加稳定/可读的javascript代码

    每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...

  6. Dirty Markup - 在线代码美化工具

    如果你需要一个帮助你规整书写混乱的代码的工具的话,我强烈推荐给你这个在线代码美化工具 - Dirty Markup.这个在线工具能够帮助你有效的处理HTML/HTML5,CSS和javascript代 ...

  7. JSLint JavaScript代码质量审查工具汉化中文版隆重发布

    JSLint是一款JavaScript代码质量审查工具,它可以指出代码中错误.不规范的地方,非常之严格,甚至多写一个空格都会发出警告. JSLint的审查规则,根据众多前辈多年编程经验而写,字字珠玑, ...

  8. 文字列表无缝向上滚动JavaScript代码

    <!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...

  9. JavaScript 代码规范

    所有的 JavaScript 项目适用同一种规范. JavaScript 代码规范 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格,缩进,注释的使用规则. 其他常用规范-- 规范的代码可以 ...

随机推荐

  1. VM 映像 PowerShell 教学系列博客文章

     编辑人员注释:本文章是与Microsoft Azure工程的项目经理Kay Singh共同撰写的 正如我在第一篇博客文章中所承诺的,我又回来了,为大家分步介绍如何在PowerShell中使用VM ...

  2. 10.30 NFLS-NOIP模拟赛 解题报告

    总结:今天去了NOIP模拟赛,其实是几道USACO的经典的题目,第一题和最后一题都有思路,第二题是我一开始写了个spfa,写了一半中途发现应该是矩阵乘法,然后没做完,然后就没有然后了!第二题的暴力都没 ...

  3. Dot模板的使用小结2

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 自定义标签体、MVC

    自定义标签 文件以tld结尾,放在webinfo中 标签名 引用类 标签体 继承SimpleTagSupport,复写doTag() getContext(); getjspBody()   invo ...

  5. 从零开始学习UNITY3D(GUI篇 GUI.Window)

    unity3d里面,也是包含window窗体的,下面看一下GUI.Window方法的详情 下面我们用代码实现一个通过开关显示窗体的隐藏和显示的功能,代码如下: public class windows ...

  6. Node.cloneNode()方法

    概述 返回调用该方法的节点的一个副本. 语法 var dupNode = node.cloneNode(deep);node将要被克隆的节点dupNode克隆生成的副本节点deep 可选是否采用深度克 ...

  7. [编程题] 最大的LeftMax与rightMax之差绝对值

    [编程题] 最大的LeftMax与rightMax之差绝对值 给定一个长度为N的整型数组arr,可以划分成左右两个部分: 左部分arr[0..K],右部分arr[K+1..arr.length-1], ...

  8. SQL中存储过程和自定义函数的区别（转载）

    存储过程:     存储过程可以使得对数据库的管理.以及显示关于数据库及其用户信息的工作容易得多.存储过程是 SQL 语句和可选控制流语句的预编译集合,以一个名称存储并作为一个单元处理.存储过程存储在 ...

  9. vim常用命令总结 （转)

      在命令状态下对当前行用== (连按=两次), 或对多行用n==(n是自然数)表示自动缩进从当前行起的下面n行.你可以试试把代码缩进任意打乱再用n==排版,相当于一般IDE里的code format ...

  10. STL模板_概念

    模板和STL一.模板的背景知识1.针对不同的类型定义不同函数版本.2.借助参数宏摆脱类型的限制,同时也因为失去的类型检查而引 入风险.3.借助于编译预处理器根据函数宏框架,扩展为针对不同类型的 具体函 ...