前言

(写代码实在有点头疼于是来简书更新一些东西）咳咳。。。跳过
近日正在做一个在线网页可视化编辑器，由于需要显示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 = {"&":"&amp;","<":"&lt;",">":"&gt;"};
    str = str.replace(mark, function(c){
        return mark_val[c];
    });
    //缩进
    str=str.trim()
      .replace(/&lt;(?!\/)(.*?)&gt;/g,function(f){
        return "<blockquote>"+f;
    }).replace(/&lt;\/(.*?)&gt;/g,function(b){
        return b+"</blockquote>";
    });
    //标签上色
    str=str.replace(/&lt;(.*?)&gt;/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