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属性，单机后进入可编辑状态。 当然如果哪位朋友有好的解决方案欢迎留言我们共同探讨。 最后送上代码实例运行地址：点击运行
HTML,JAVASCRIPT代码美化demo的更多相关文章
- JS Nice – JavaScript 代码美化和格式化工具
JS Nice 是一款让经过混淆处理的 JavaScript 代码可读更好的工具.它使用一种新型的用于 JavaScript 代码美化的去混淆和去压缩引擎.JSNice 采用先进的机器学习和程序分析技 ...
- javascript代码 调试方法
你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现. 通常,如果 JavaScript 出现错误,是不会有提示信息,这样你就无法找到代码错误的位置. 在程序代码中寻找错误叫做代 ...
- JavaScript代码段整理笔记系列（二）
上篇介绍了15个常用代码段,本篇将把剩余的15个补齐,希望对大家有所帮助!!! 16.检测Shift.Alt.Ctrl键: event.shiftKey; //检测Shift event.altKey ...
- 博客代码美化(SyntaxHighlighter)
这篇博文主要讲解自己使用SyntaxHighlighter对代码进行美工中遇见的问题以及如何使用SyntaxHighlighter? 首先来看看SyntaxHighlighter对代码美工的效果吧! ...
- 编写更加稳定/可读的javascript代码
每个人都有自己的编程风格,也无可避免的要去感受别人的编程风格--修改别人的代码."修改别人的代码"对于我们来说的一件很痛苦的事情.因为有些代码并不是那么容易阅读.可维护的,让另一个 ...
- Dirty Markup - 在线代码美化工具
如果你需要一个帮助你规整书写混乱的代码的工具的话,我强烈推荐给你这个在线代码美化工具 - Dirty Markup.这个在线工具能够帮助你有效的处理HTML/HTML5,CSS和javascript代 ...
- JSLint JavaScript代码质量审查工具汉化中文版隆重发布
JSLint是一款JavaScript代码质量审查工具,它可以指出代码中错误.不规范的地方,非常之严格,甚至多写一个空格都会发出警告. JSLint的审查规则,根据众多前辈多年编程经验而写,字字珠玑, ...
- 文字列表无缝向上滚动JavaScript代码
<!DOCTYPE html> <html> <head> <meta charset=utf-> <title>文字列表无缝向上滚动Jav ...
- JavaScript 代码规范
所有的 JavaScript 项目适用同一种规范. JavaScript 代码规范 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格,缩进,注释的使用规则. 其他常用规范-- 规范的代码可以 ...
随机推荐
- 微软Windows 7 “可启动U盘”制作工具及使用方法，非常的简单
目前,用“可启动U盘”替代光驱光盘安装操作系统,已经成为一种时尚(至少对没有刻录机或不愿购买光碟的群体是这样).制作“可启动U盘”的方法和工具很多,区别无非是制作的难易程度和对“U盘类型”的支持程度. ...
- POJ 2400 最小权匹配
吐槽:首先,这道题的输入居然是错的.要将上下两个矩阵的位置换一下才可以出样例,也就是上面那个矩阵是employee对Supervisor的打分,下面那个矩阵才是Supervisor对employee的 ...
- JAVA实现字符串反转，借助字符数组实现
public static String reverseStr(String str) { int len = str.length(); char ch[] = str.toCharArray(); ...
- hdu 4598 Difference（奇圈判定+差分约束）
这是通化邀请赛的题,当时比赛的时候还完全没想法呢,看来这几个月的训练还是有效果的... 题意要求(1) |ai| < T for all i (2) (vi, vj) in E <=& ...
- 04737_C++程序设计_第10章_面向对象设计实例
10.6.2 使用包含的参考程序及运行结果. 头文件cpp10.h 源文件cpp10.cpp 源文件Find10.cpp 头文件cpp10.h #if ! defined(CPP10_H) #defi ...
- poj2186 Popular Cows --- 强连通
给一个有向图,问有多少结点是其它全部结点都能够到达的. 等价于,在一个有向无环图上,找出度为0 的结点.假设出度为0的结点仅仅有一个,那么这个就是答案.假设大于1个.则答案是0. 这题有环.所以先缩点 ...
- 2013 多校联合 F Magic Ball Game （hdu 4605）
http://acm.hdu.edu.cn/showproblem.php?pid=4605 Magic Ball Game Time Limit: 10000/5000 MS (Java/Other ...
- SQLSERVER 列名无效
很多时候对数据库表修改字段后会出现“列名无效”,或者在查询分析器里面是红色的下划线,造成这个现象的原因是:SQL Server的intellisense(智能感知功能),没有感知到更改,需要重新整理一 ...
- 关于cell中添加子视图 复用重叠问题的解决方法
问题本质: 因为你要添加的子视图并不是在自定义的cell中实现的,而是根据系统给的UITableViewCell这个类创建的实例,每次进图 cellForRow方法都会创建一个cell,每次都要创 ...
- android Fragment相关概念简介
Fragment 详细介绍连接:http://blog.csdn.net/harvic880925/article/details/44927375 fragment是一种控制器对象,activity ...