日期格式化,之前就想写语法高亮匹配来着

简单一招实现json数据可视化

2015/07/21 · JavaScript · JSON, 数据可视化

原文出处: 吕大豹   

开发一个内部功能时碰到的需求,要把json数据在页面上展示出来,平时浏览器会安装jsonView这样的扩展来看json数据,但是程序要用到的话该怎么办呢?今天在网上搜索的时候,发现了这个小技巧,分享一下。

要用到的核心是JSON.stringify这个函数,没想到吧,平时我们只把它用来序列号json数据。但是这个stringify是有三个参数的,

JavaScript

JSON.stringify(value [, replacer] [, space])

1
JSON.stringify(value [, replacer] [, space])

,具体描述请看这里:

我们要用到的就是这第三个参数,它可以指定在生成的字符串中加多少空格,从而生成有一定格式的字符串。生成的字符串我们可以放在<pre>标签中,这样就能很好的显示缩进。然后呢,为了让生成的数据有高亮效果,我们还可以写一个简单的高亮函数。基本就是这么个原理啦,请看代码实现:

JavaScript

function output(inp) { document.body.appendChild(document.createElement('pre')).innerHTML = inp; } function syntaxHighlight(json) { json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>'); return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) { var cls = 'number'; if (/^"/.test(match)) { if (/:$/.test(match)) { cls = 'key'; } else { cls = 'string'; } } else if (/true|false/.test(match)) { cls = 'boolean'; } else if (/null/.test(match)) { cls = 'null'; } return '<span class="' + cls + '">' + match + '</span>'; }); } var obj = { num: 1234, str: '字符串', arr: [1,2,3,4,5,6], obj: { name: 'tom', age: 10, like: ['a', 'b'] } }; var str = JSON.stringify(obj, undefined, 4); output(syntaxHighlight(str));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function output(inp) {
    document.body.appendChild(document.createElement('pre')).innerHTML = inp;
}
 
function syntaxHighlight(json) {
    json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    return json.replace(/("(\u[a-zA-Z0-9]{4}|\[^u]|[^\"])*"(s*:)?|b(true|false|null)b|-?d+(?:.d*)?(?:[eE][+-]?d+)?)/g, function (match) {
        var cls = 'number';
        if (/^"/.test(match)) {
            if (/:$/.test(match)) {
                cls = 'key';
            } else {
                cls = 'string';
            }
        } else if (/true|false/.test(match)) {
            cls = 'boolean';
        } else if (/null/.test(match)) {
            cls = 'null';
        }
        return '<span class="' + cls + '">' + match + '</span>';
    });
}
 
var obj = {
    num: 1234,
    str: '字符串',
    arr: [1,2,3,4,5,6],
    obj: {
        name: 'tom',
        age: 10,
        like: ['a', 'b']
    }
};
var str = JSON.stringify(obj, undefined, 4);
 
output(syntaxHighlight(str));

最终生成的效果就是这样的:

图片 1

是不是简单而又实用呢~

1 赞 1 收藏 评论

图片 2

 

复制代码 代码如下:

json字符串很有用,有时候一些后台接口返回的信息是字符串格式的,可读性很差,这个时候要是有个可以格式化并高亮显示json串的方法那就好多了,下面看看一个正则表达式完成的json字符串的格式化与高亮显示

学了几天正则,差不多该总结整理写成果了,之前就想写语法高亮匹配来着,不过水平不够,看着例子都不理解。

var utils = {

function obj2str(o){
var r = [];
if(typeof o =="string") return """+o.replace(/(['"\])/g,"\$1").replace(/(n)/g,"\n").replace(/(r)/g,"\r").replace(/(t)/g,"\t")+""";
if(typeof o == "object"){
if(!o.sort){
for(var i in o)
r.push(i+":"+obj2str(o[i]));
if(!!document.all && !/^n?functions*toString()s*{n?s*[native code]n?s*}n?s*$/.test(o.toString)){
r.push("toString:"+o.toString.toString());
}
r="{"+r.join()+"}"
}else{
for(var i =0;i<o.length;i++)
r.push(obj2str(o[i]))
r="["+r.join()+"]"
}
return r;
}
return o.toString();
}

首先是对输入进行转换,如果是对象则转化为规范的json字符串,不是对象时,先将字符串转化为对象(防止不规范的字符串),然后再次转化为json串。其中json为输入。

那么我们来分析下两位大神 次碳酸钴 和 Barret Lee 语法高亮实现。

/**
* 日期格式化
*

您可能感兴趣的文章:

  • JavaScript中json对象和string对象之间相互转化
  • JS中JSON对象和String之间的互转及处理技巧
  • 谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
  • Json对象与Json字符串互转(4种转换方式)
  • JSON字符串转换JSONObject和JSONArray的方法
  • Javascript json object 与string 相互转换的简单实现

复制代码 代码如下:

先说 Barret Lee 的这篇 《几个小例子教你如何实现正则表达式highlight高亮》

* @param {Date} date 指定日期
* @param {String} format
* @returns {String}
* @summary 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符,
* 年(y)可以用 1-4个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* @example (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02
* 08:09:04.423 (new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18

if (typeof json !== 'string') {
    json = JSON.stringify(json);
} else {
    json = JSON.parse(json);
    json = JSON.stringify(json);
}

之前看的时候只觉的神奇,特别是下面那个一步一步分开匹配的例子,更是霸气测漏,不过作者也说了,分开只是为了演示方便,可以很直观的看到这一步匹配了什么,不然一步到位匹配完成,你都不知道发生了什么就处理完毕了。
来看下他的正则

*/

等规范完数据之后对字符串进行标记,为了后面的切分、重新组合

复制代码 代码如下:

formatDate: function(date, format) {
var o = {

这里有几个地方要添加标记,包括大括号、小括号的前后和逗号的后面都要添加标记,我这里使用的是换行rn(这样在命令行下测试时效果会比较好看)。

(/^s+|s+$/) // 匹配首尾空格
(/(["'])(?:\.|[^\n])*?1/) // 匹配字符串
(//(?!*|span).+/(?!span)[gim]*/) // 匹配正则 span 是他上次处理加上的,我觉得这里不应该出现
(/(//.*|/*[Ss]+?*/)/) // 匹配注释
(/(*s*)(@w+)(?=s*)/) // 匹配 注释中的标记
(/b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)b/) // 匹配关键词

'M+': date.getMonth() + 1, //month

复制代码 代码如下:

小胡子哥可能是不想重复造轮子,只是想弄清楚如何造这样的轮子而已,所以他写这个东西点到即止,没有深入详细的处理,做的比较粗糙。
当然我也不是说他什么,只是简单评论一下而已,毕竟优秀的语法高亮插件多的是,没必要自己重复造,学习下原理即可。

'd+': date.getDate(), //day

// 在大括号前后添加换行
reg = /([{}])/g;
json = json.replace(reg, 'rn$1rn');
// 中括号前后添加换行
reg = /([[]])/g;
json = json.replace(reg, 'rn$1rn');
// 逗号后面添加换行
reg = /(,)/g;
json = json.replace(reg, '$1rn');

我们再来分析下 次碳酸钴 这篇 《如何实现正则表达式的JavaScript的代码高亮》
其实这篇已经分析的非常详细了,我只能简单补充说明下。
次碳酸钴 思维一向比较严谨,这篇文章之前我看了一个多小时,只能看个大概,这次重新分析了一遍,然后自己实现了一遍,竟然也花去我半天时间,
不过非常值得,真心学到了很多。

'h+': date.getHours(), //hour

添加完成标记之后就要做一些优化处理,去掉多余的换行、去掉逗号前面的换行,这样做是为了在切分是免得出现空串浪费一次循环处理,最后在冒号后面添加空格,看起来更漂亮。

先来看一下大体的逻辑吧。

'm+': date.getMinutes(), //minute

复制代码 代码如下:

复制代码 代码如下:

's+': date.getSeconds(), //second

// 去除多余的换行
reg = /(rnrn)/g;
json = json.replace(reg, 'rn');
// 逗号前面的换行去掉
reg = /rn,/g;
json = json.replace(reg, ',');
//冒号前面缩进
reg = /:/g;
json = json.replace(reg, ': ');

(//.*|/*[Ss]+?*/) // 匹配注释
((["'])(?:\.|[^\n])*?3) // 匹配字符串
b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)b // 匹配关键词
b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)b // 匹配内置对象
b(true|false)b // 匹配布尔值
b(null|undefined|NaN)b // 匹配各种空值, 我觉得这个和布尔值一组比较合适。
(?:[^Wd]|$)[$w]* // 匹配普通的变量名
(0[xX][0-9a-fA-F]+|d+(?:.d+)?(?:[eE]d+)?) // 匹配数字 (前者不占用,这里就会有问题)
(?:[^)]}]|^)(/(?!*)(?:\.|[^\/n])+?/[gim]*) // 匹配正则
[Ss] // 其他不能匹配的任意值

'q+': Math.floor((date.getMonth() + 3) / 3), //quarter
'S': date.getMilliseconds() //millisecond

接下来就是对这个初步处理过的串进行进一步处理了,我会在function(index, node) {}函数中添加逻辑,对每一个切分单元进行处理,包括缩进和美化格式。

原文对最后一个 [Ss] 的描述:我们必须匹配到每一个字符。因为它们都需要做一次HTML转义。
然后下面有详细的代码。

};
if (/(y+)/.test(format)) {

复制代码 代码如下:

这是一篇非常不错的文章,我前前后后至少看了不下10次了,前两天才差不多完全明白。

format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));

$.each(json.split('rn'), function(index, node) {});

不过这个代码还有一些小小的瑕疵,比如字符串不能匹配折行那种,字符串匹配优化。

}
for ( var k in o) {
if (new RegExp('(' + k + ')').test(format)) {

首先说下缩进,缩进的方法很简单,遇到{、[符号时缩进增加1,遇到}、]符号时缩进减少1,否则缩进量不变。

还有数字匹配不够全面只能匹配 0xff, 12.34, 1e3 这几类,如 .123 12.3e+3 等格式都无法匹配到。
还有关键词顺序我觉得可以稍微优化下。
因为 传统型NFA 引擎的只是从左往右匹配,匹配到了就停止下一个分支的操作。
所以把最常出现的关键词放前面,可以提升一部分性能。
最后,最好是 new RegExp 这样对于代码量大的代码性能上会有所提升。

format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length));

复制代码 代码如下:

下面就给出我的正则和简单的demo吧。(其实只是对 次碳酸钴 源码的优化而已。。)
先来看正则部分:

}

//这里遇到{、[时缩进等级加1,遇到}、]时缩进等级减1,没遇到时缩进等级不变
if (node.match(/{$/) || node.match(/[$/)) {
    indent = 1;
} else if (node.match(/}/) || node.match(/]/)) {
    if (pad !== 0) {
        pad -= 1;
    }
} else {
    indent = 0;
}

复制代码 代码如下:

}

完成缩进后就该美化高亮显示代码了,这里要用到几个css规则,下面可以看到,对切分单元进行高亮显示的时候这里用正则进行判断,如果匹配到大括号标记为对象class、中括号标记为数组class、属性名称、属性值,一次对这些进行css规则添加,添加完成之后拼接起来就可以了。

(//.*|/*[sS]*?*/) // 匹配注释 没改
("(?:[^"\]|\[sS])*"|'(?:[^'\]|\[sS])*') // 匹配注释 优化过
b(true|false|null|undefined|NaN)b // 匹配 布尔和空值,这几个比较常用,分组提前
b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)b // 匹配关键词,关键词顺序改了下
b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)b //内置对象,单词顺序改了下
(?:[^Wd]|$)[$w]* // 匹配普通的变量名 没改
(0[xX][0-9a-fA-F]+|d+(?:.d+)?(?:[eE][+-]?d+)?|.d+(?:[eE][+-]?d+)?) // 匹配数字,修复了匹配
(?:^|[^)]}])(/(?!*)(?:\.|[^\/n])+?/[gim]*) // 匹配正则,这个最复杂,情况很多,我暂时没实力修改
[sS] // 匹配其他

return format;

复制代码 代码如下:

合并了布尔和空值一个分组,然后优化了正则分组,所以比他减少了2个分组。
他 2,3 是字符串分组,因为 (["']) 捕获了前面的引号,而我的正则没这么做。
这个 (true|false|null|undefined|NaN) 如果你不喜欢放在一个分组了,分开也行、
是不是同一个分组,只是为了区分着色而已。
sublime text 下 true|false|null|undefined|NaN 都是一个颜色,而 notepad++ 则只着色了 true|false ,我只想说 呵呵。

},

.ObjectBrace{color:#00AA00;font-weight:bold;}
.ArrayBrace{color:#0033FF;font-weight:bold;}
.PropertyName{color:#CC0000;font-weight:bold;}
.String{color:#007777;}
.Number{color:#AA00AA;}
.Comma{color:#000000;font-weight:bold;}

好了,差不多该给例子了。
我相信,不少人在看到这之前已经关掉了,或者只是拉了下滚动条然后关掉了。
不过我写这个就是为了给这些认真看下来的朋友,只要有一个人看,我觉得就不会白写了。
例子:

// 获取过去的n天

复制代码 代码如下:

复制代码 代码如下:

getBeforeDay: function(date, days) {
var date = date || new Date();

//添加代码高亮
node = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1</span>");
node = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1</span>");
node = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
node = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"</span><span class='Comma'>$2</span>");
node = node.replace(/(-?d+)(,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");

// 单行注释
/**
 * 多行注释
 * @date 2014-05-12 22:24:37
 * @name 测试一下
 */
var str1 = "123"456";
var str2 = '123'456';
var str3 = "123
456";

return new Date(Date.parse(date.toString()) - 86400000 * days);

最后我们看看完整的方法代码(这里我使用了jquery类库),以及测试地址:

var num = 123;
var arr = [12, 12.34, .12, 1e3, 1e+3, 1e-3, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12/34"/];

},

要对jsonstr进行美化,这样就可以了APP.format(jsonstr),直接输出至<pre></pre>标签中就可以看到效果,

for (var i=0; i<1e3; i++) {
  var node = document.getElementById("a"+i);
  arr.push(node);
}

// 查询字符串

下面是一个测试地址, 可以进去试一下,看看完整的源代码

function test () {
  return true;
}
test();

getQueryString: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg); // 获取url中"?"符后的字符串并正则匹配
var context = "";
if (r != null) {

复制代码 代码如下:

 

context = r[2];

<script>
    var APP=function(){
        var format=function(json){
            var reg=null,
                result='';
                pad=0,
                PADDING='    ';
            if (typeof json !== 'string') {
                json = JSON.stringify(json);
            } else {
                json = JSON.parse(json);
                json = JSON.stringify(json);
            }
            // 在大括号前后添加换行
            reg = /([{}])/g;
            json = json.replace(reg, 'rn$1rn');
            // 中括号前后添加换行
            reg = /([[]])/g;
            json = json.replace(reg, 'rn$1rn');
            // 逗号后面添加换行
            reg = /(,)/g;
            json = json.replace(reg, '$1rn');
            // 去除多余的换行
            reg = /(rnrn)/g;
            json = json.replace(reg, 'rn');
            // 逗号前面的换行去掉
            reg = /rn,/g;
            json = json.replace(reg, ',');
            //冒号前面缩进
            reg = /:/g;
            json = json.replace(reg, ': ');
            //对json按照换行进行切分然后处理每一个小块
            $.each(json.split('rn'), function(index, node) {
                var i = 0,
                    indent = 0,
                    padding = '';
                //这里遇到{、[时缩进等级加1,遇到}、]时缩进等级减1,没遇到时缩进等级不变
                if (node.match(/{$/) || node.match(/[$/)) {
                    indent = 1;
                } else if (node.match(/}/) || node.match(/]/)) {
                    if (pad !== 0) {
                        pad -= 1;
                    }
                } else {
                    indent = 0;
                }
                   //padding保存实际的缩进
                for (i = 0; i < pad; i++) {
                    padding += PADDING;
                }
                //添加代码高亮
                node = node.replace(/([{}])/g,"<span class='ObjectBrace'>$1</span>");
                node = node.replace(/([[]])/g,"<span class='ArrayBrace'>$1</span>");
                node = node.replace(/(".*")(:)(.*)(,)?/g,"<span class='PropertyName'>$1</span>$2$3$4");
                node = node.replace(/"([^"]*)"(,)?$/g,"<span class='String'>"$1"</span><span class='Comma'>$2</span>");
                node = node.replace(/(-?d+)(,)?$/g,"<span class='Number'>$1</span><span class='Comma'>$2</span>");
                result += padding + node + '<br>';
                pad += indent;
            });
            return result;
        };
        return {
            "format":format,
        };
    }();
</script>

(function(window, undefined) {
    var _re_js = new RegExp('(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*')|\b(true|false|null|undefined|NaN)\b|\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\b|\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\.\d+(?:[eE][+-]?\d+)?)|(?:^|[^\)\]\}])(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[\s\S]', 'g');

}
reg = null;
r = null;

怎么样,json字符串是不是美观了很多呢,超级实用吧,这么好的东东,当然不能独享,这里推荐给小伙伴们。

    function prettify(node) {
        var code = node.innerHTML.replace(/rn|[rn]/g, "n").replace(/^s+|s+$/g, "");
        code = code.replace(_re_js, function() {
            var s, a = arguments;
            for (var i = 1; i <= 7; i++) {
                if (s = a[i]) {
                    s = htmlEncode(s);
                    switch (i) {
                        case 1: //注释 com
                            return '<span class="com">' + s + '</span>';
                        case 2: //字符串 str
                            return '<span class="str">' + s + '</span>';
                        case 3: //true|false|null|undefined|NaN val
                            return '<span class="val">' + s + '</span>';
                        case 4: //关键词 kwd
                            return '<span class="kwd">' + s + '</span>';
                        case 5: //内置对象 obj
                            return '<span class="obj">' + s + '</span>';
                        case 6: //数字 num
                            return '<span class="num">' + s + '</span>';
                        case 7: //正则 reg
                            return htmlEncode(a[0]).replace(s, '<span class="reg">' + s + '</span>');
                    }
                }
            }
            return htmlEncode(a[0]);
        });
        code = code.replace(/(?:s**s*|(?: )**(?: )*)(@w+)b/g, ' * <span class="comkey">$1</span>') // 匹配注释中的标记
                   .replace(/(w+)(s*(|(?: )*()|(w+)(s*=s*function|(?: )*=(?: )*function)/g, '<span class="func">$1</span>$2') // 匹配函数
        return code;
    }

return (context == null || context == "" || context == "undefined") ? "" : context;

您可能感兴趣的文章:

  • String字符串匹配javascript 正则表达式
  • JS使用正则表达式除去字符串中重复字符的方法
  • javascript正则表达式和字符串RegExp and String(一)
  • js 正则表达式学习笔记之匹配字符串
  • js将字符串转成正则表达式的实现方法
  • javascript中使用正则表达式进行字符串验证示例
  • javascript中使用正则表达式实现删除字符串中的前后空格
  • 用正则表达式判断字符串是汉字还是拼音的js函数代码
  • JS正则表达式提取字符串中所有汉字的脚本
  • JavaScript利用正则表达式替换字符串中的内容

    function htmlEncode(str) {
        var i, s = {
                //"&": /&/g,
                """: /"/g,
                "'": /'/g,
                "<": //g,
                "<br>": /n/g,
                " ": / /g,
                "  ": /t/g
            };
        for (i in s) {
            str = str.replace(s[i], i);
        }
        return str;
    }

},

    window.prettify = prettify;
})(window);

// 删除空白字符串

你们可以用下面的代码进行测试。

delBlankSpace: function(str) {
var str = str.replace(/</?[^>]*>/gim, "");// 去掉所有的html标记
var result = str.replace(/(^s+)|(s+$)/g, "");// 去掉前后空格

代码:

return result.replace(/s/g, "");// 去除文章中间空格

复制代码 代码如下:

},

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    /* 高亮样式 */
    *{font-size:12px;}
    code{word-break:break-all;}

// 判断参数非空

    .com {color:#008000;} /* 注释 */
    .comkey {color:#FFA500;} /* 注释标记 */
    .str {color:#808080;} /* 字符串 */
    .val {color:#000080;} /* true|false|null|undefined|NaN */
    .kwd {color:#000080;font:bold 12px 'comic sans ms', sans-serif;} /* 关键词 */
    .obj {color:#000080;} /* 内置对象 */
    .num {color:#FF0000;} /* 数字 */
    .reg {color:#8000FF;} /* 正则 */
    .func {color:#A355B9;} /* 函数 */
    </style>
</head>
<body>

validateBlank: function(tmp) {
if (!tmp && typeof (tmp) != "undefined" && tmp != 0) {
// null

<code id="regdemon">
// 单行注释
/**
 * 多行注释
 * @date 2014-05-12 22:24:37
 * @name 测试一下
 */
var str1 = "123"456";
var str2 = '123'456';
var str3 = "123
456";

return;
} else if (typeof (tmp) == "undefined") {
// undefined

var num = 123;
var arr = [12, 12.34, .12, 1e3, 1e+3, 1e-3, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12/34"/];

return;
} else if (Array.isArray(tmp) && tmp.length === 0) {
// 空数组

for (var i=0; i<1e3; i++) {
    var node = document.getElementById("a"+i);
    arr.push(node);
}

return;
} else if ($.trim(tmp) == "") {
// 空串

function test () {
    return true;
}
test();

return;
} else if (Object.prototype.isPrototypeOf(tmp) && Object.keys(tmp).length === 0) {
// 空对象

 

return;
} else {

(function(window, undefined) {
    var _re_js = new RegExp('(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*')|\b(true|false|null|undefined|NaN)\b|\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\b|\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\.\d+(?:[eE][+-]?\d+)?)|(?:^|[^\)\]\}])(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[\s\S]', 'g');

return tmp;

    function prettify(node) {
        var code = node.innerHTML.replace(/rn|[rn]/g, "n").replace(/^s+|s+$/g, "");
        code = code.replace(_re_js, function() {
            var s, a = arguments;
            for (var i = 1; i <= 7; i++) {
                if (s = a[i]) {
                    s = htmlEncode(s);
                    switch (i) {
                        case 1: //注释 com
                            return '<span class="com">' + s + '</span>';
                        case 2: //字符串 str
                            return '<span class="str">' + s + '</span>';
                        case 3: //true|false|null|undefined|NaN val
                            return '<span class="val">' + s + '</span>';
                        case 4: //关键词 kwd
                            return '<span class="kwd">' + s + '</span>';
                        case 5: //内置对象 obj
                            return '<span class="obj">' + s + '</span>';
                        case 6: //数字 num
                            return '<span class="num">' + s + '</span>';
                        case 7: //正则 reg
                            return htmlEncode(a[0]).replace(s, '<span class="reg">' + s + '</span>');
                    }
                }
            }
            return htmlEncode(a[0]);
        });
        code = code.replace(/(?:s**s*|(?: )**(?: )*)(@w+)b/g, ' * <span class="comkey">$1</span>') // 匹配注释中的标记
                   .replace(/(w+)(s*(|(?: )*()|(w+)(s*=s*function|(?: )*=(?: )*function)/g, '<span class="func">$1</span>$2') // 匹配函数
        return code;
    }

}

    function htmlEncode(str) {
        var i, s = {
                //"&": /&/g,
                """: /"/g,
                "'": /'/g,
                "<": /</g,
                ">": />/g,
                "<br>": /n/g,
                " ": / /g,
                "  ": /t/g
            };
        for (i in s) {
            str = str.replace(s[i], i);
        }
        return str;
    }

},

    window.prettify = prettify;
})(window);
</code>

// 检测段落里空格和换行,转换成html输出

<script>
(function(window, undefined) {
    var _re_js = new RegExp('(\/\/.*|\/\*[\s\S]*?\*\/)|("(?:[^"\\]|\\[\s\S])*"|'(?:[^'\\]|\\[\s\S])*')|\b(true|false|null|undefined|NaN)\b|\b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)\b|\b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE][+-]?\d+)?|\.\d+(?:[eE][+-]?\d+)?)|(?:^|[^\)\]\}])(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[\s\S]', 'g');

blankRegExp: function(str) {
if (typeof str != "string")

    function prettify(node) {
        var code = node.innerHTML.replace(/rn|[rn]/g, "n").replace(/^s+|s+$/g, "");
        code = code.replace(_re_js, function() {
            var s, a = arguments;
            for (var i = 1; i <= 7; i++) {
                if (s = a[i]) {
                    s = htmlEncode(s);
                    switch (i) {
                        case 1: //注释 com
                            return '<span class="com">' + s + '</span>';
                        case 2: //字符串 str
                            return '<span class="str">' + s + '</span>';
                        case 3: //true|false|null|undefined|NaN val
                            return '<span class="val">' + s + '</span>';
                        case 4: //关键词 kwd
                            return '<span class="kwd">' + s + '</span>';
                        case 5: //内置对象 obj
                            return '<span class="obj">' + s + '</span>';
                        case 6: //数字 num
                            return '<span class="num">' + s + '</span>';
                        case 7: //正则 reg
                            return htmlEncode(a[0]).replace(s, '<span class="reg">' + s + '</span>');
                    }
                }
            }
            return htmlEncode(a[0]);
        });
        code = code.replace(/(?:s**s*|(?: )**(?: )*)(@w+)b/g, ' * <span class="comkey">$1</span>') // 匹配注释中的标记
                   .replace(/(w+)(s*(|(?: )*()|(w+)(s*=s*function|(?: )*=(?: )*function)/g, '<span class="func">$1</span>$2') // 匹配函数
        return code;
    }

return "";

    function htmlEncode(str) {
        var i, s = {
                //"&": /&/g,
                """: /"/g,
                "'": /'/g,
                "<": /</g,
                ">": />/g,
                "<br>": /n/g,
                " ": / /g,
                "  ": /t/g
            };
        for (i in s) {
            str = str.replace(s[i], i);
        }
        return str;
    }

本文由必威发布于必威-前端,转载请注明出处:日期格式化,之前就想写语法高亮匹配来着

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。