前言
(写代码实在有点头疼于是来简书更新一些东西）咳咳。。。跳过
近日正在做一个在线网页可视化编辑器，由于需要显示HTML源码，便遇到了一个用户体验问题：源码没有高亮以及缩进/换行很影响阅读，于是乎打开简书，找到了我以前的测试代码，打开F12探究一番，发现是这样的：
TIM截图20180112133627.png
机智的我貌似明白了什么。。。
原理
上色
将HTML源码当做一个字符串来看待，将HTML标签（<div> <img>等等）、行内属性(class value)等等统统包裹进一个新的<span>元素内，然后利用更改<span>元素的class类名，进而影响样式。
注意：不是都包裹进同一个<span>，而是每替换一个地方对应一个<span>
缩进
利用HTML5的新元素<blockquote>即可实现
<blockquote>是什么？
步骤
基本解释已经写在注释中，对于正则不了解的朋友可以自行学习,这里推荐deerchao前辈的讲解：
30分钟正则入门
直接上代码了：
函数：
htmlcode:function(target){
//获取HTML源码
var str = $(this).html();
//批量转义HTML特殊符号
var mark = /[&<>]/g, mark_val = {"&":"&","<":"<",">":">"};
str = str.replace(mark, function(c){
return mark_val[c];
});
//缩进
str=str.trim()
.replace(/<(?!\/)(.*?)>/g,function(f){
return "<blockquote>"+f;
}).replace(/<\/(.*?)>/g,function(b){
return b+"</blockquote>";
});
//标签上色
str=str.replace(/<(.*?)>/g,function(tag){
//属性上色
tag=tag.replace(/\w+(?==)/g,function(attr){
return "<span class='attr'>"+attr+"</span>";
});
//引号上色
//设置span的class全部使用单引号，再次替换引号内容即可互不干扰
tag=tag.replace(/("(.*?)")/g,function(sign){
return "<span class='sign'>"+sign+"</span>";
});
return "<span class='tag'>"+tag+"</span>"
});
target.html(str);
}
css:
.tag{
color: blueviolet;
}
.sign{
color:gray;
}
.attr{
color:rgb(60,122,3);
}
引用：
//targe需为jq对象
$('div').htmlcode(target);
效果
正面：
TIM截图20180112140618.png
反面源码：
TIM截图20180112140628.png
结语
项目地址：FreeUI
还在开发中，喜欢的点个star
