js 正则练习之语法高亮

学了几天正则，差不多该总结整理写成果了，之前就想写语法高亮匹配来着，不过水平不够，看着例子都不理解。
今天就分析下次碳酸钴和 Barret Lee 语法高亮实现。

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

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

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

先来看一下大体的逻辑吧。
(\/\/.*|\/\*[\S\s]+?\*\/) // 匹配注释
((["'])(?:\\.|[^\\\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 // 匹配各种空值，我觉得这个和布尔值一组比较合适。
(?:[^\W\d]|\$)[\$\w]* // 匹配普通的变量名
(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?) // 匹配数字 (前者不占用，这里就会有问题)
(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*) // 匹配正则
[\S\s] // 其他不能匹配的任意值
原文对最后一个 [\S\s] 的描述：我们必须匹配到每一个字符。因为它们都需要做一次HTML转义。
然后下面有详细的代码。

这是一篇非常不错的文章，我前前后后至少看了不下10次了，前两天才差不多完全明白。
不过这个代码还有一些小小的瑕疵，比如字符串不能匹配折行那种，字符串匹配优化，我之前文章大篇幅的讨论了这个问题。
详见：《js 正则学习小记之匹配字符串》和《js 正则学习小记之匹配字符串优化篇》
还有数字匹配不够全面只能匹配 0xff, 12.34, 1e3 这几类，如 .123 12.3e+3 等格式都无法匹配到。
还有关键词顺序我觉得可以稍微优化下。
因为传统型NFA 引擎的只是从左往右匹配，匹配到了就停止下一个分支的操作。
所以把最常出现的关键词放前面，可以提升一部分性能。
最后，最好是 new RegExp 这样对于代码量大的代码性能上会有所提升。

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

(\/\/.*|\/\*[\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] // 匹配其他

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

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

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"/];

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

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

(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');

    function prettify(node) {
        var code = node.innerHTML.replace(/\r\n|[\r\n]/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,
                "<br>": /\n/g,
                " ": / /g,
                "  ": /\t/g
            };
        for (i in s) {
            str = str.replace(s[i], i);
        }
        return str;
    }

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

这就是渲染后的代码了，由于代码比较长，复制上来后被博客园格式化后代码格式不对了，所以我直接把渲染后的html直接复制上来了。

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

代码：

<!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>

<code id="regdemon">

// 单行注释

/**

 * 多行注释

 * @date 2014-05-12 22:24:37

 * @name 测试一下

 */

var str1 = "123\"456";

var str2 = '123\'456';

var str3 = "123\

456";

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"/];

for (var i=0; i<1e3; i++) {

    var node = document.getElementById("a"+i);

    arr.push(node);

}

function test () {

    return true;

}

test();

(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');

    function prettify(node) {

        var code = node.innerHTML.replace(/\r\n|[\r\n]/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*|(?:&nbsp;)*\*(?:&nbsp;)*)(@\w+)\b/g, '&nbsp;*&nbsp;<span class="comkey">$1</span>') // 匹配注释中的标记

                   .replace(/(\w+)(\s*\(|(?:&nbsp;)*\()|(\w+)(\s*=\s*function|(?:&nbsp;)*=(?:&nbsp;)*function)/g, '<span class="func">$1</span>$2') // 匹配函数

        return code;

    }

    function htmlEncode(str) {

        var i, s = {

                //"&amp;": /&/g,

                "&quot;": /"/g,

                "'": /'/g,

                "&lt;": /</g,

                "&gt;": />/g,

                "<br>": /\n/g,

                "&nbsp;": / /g,

                "&nbsp;&nbsp;": /\t/g

            };

        for (i in s) {

            str = str.replace(s[i], i);

        }

        return str;

    }

    window.prettify = prettify;

})(window);

</code>

<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');

    function prettify(node) {

        var code = node.innerHTML.replace(/\r\n|[\r\n]/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*|(?:&nbsp;)*\*(?:&nbsp;)*)(@\w+)\b/g, '&nbsp;*&nbsp;<span class="comkey">$1</span>') // 匹配注释中的标记

                   .replace(/(\w+)(\s*\(|(?:&nbsp;)*\()|(\w+)(\s*=\s*function|(?:&nbsp;)*=(?:&nbsp;)*function)/g, '<span class="func">$1</span>$2') // 匹配函数

        return code;

    }

    function htmlEncode(str) {

        var i, s = {

                //"&amp;": /&/g,

                "&quot;": /"/g,

                "'": /'/g,

                "&lt;": /</g,

                "&gt;": />/g,

                "<br>": /\n/g,

                "&nbsp;": / /g,

                "&nbsp;&nbsp;": /\t/g

            };

        for (i in s) {

            str = str.replace(s[i], i);

        }

        return str;

    }

    window.prettify = prettify;

})(window);

var code = document.getElementById("regdemon");

code.innerHTML = prettify(code);

</script>

</body>

</html>

差不多结合了小胡子哥和次碳酸钴两个思路的结果，现在比较完善了。
兼容性什么的还没测试，也没必要测试了，我也没打算自己写各种语法的高亮，太TM累了。。

好了，今天花了比较多的时间写例子，也没时间检查了，如果有不对的地方请跟帖谢谢。

js 正则练习之语法高亮的更多相关文章

JS正则四个反斜杠的含义
我们首先来看如下代码,在浏览器中输出的是什么? // 在浏览器中输出的 console.log('\\'); // 输出 \ console.log('\\\\'); // 输出 \\ 一:js正则直 ...
用 highlight.js 为文章中的代码添加语法高亮
来源:http://www.ghostchina.com/adding-syntax-highlighting-to-ghost-using-highlight-js/ --------------- ...
js 语法高亮插件之 Prism.js
之前也介绍过几款语法高亮插件<为博客园选择一个小巧霸气的语法高亮插件>以及关于他们的综合性能<再议语法高亮插件的选择>.今天在小影志博客看到<使用 Prism.js 实 ...
JavaScript语法高亮库highlight.js使用
highlight.js是一款基于JavaScript的语法高亮库,目前支持125种编程语言,有63种可供选择的样式,而且能够做到语言自动识别,和目前主流的JS框架都能兼容,可以混合使用. 这款高亮库 ...
js 正则学习小记之匹配字符串
原文:js 正则学习小记之匹配字符串今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高 ...
浅谈 js 正则之 test 方法
原文:浅谈 js 正则之 test 方法其实我很少用这个,所以之前一直没注意这个问题,自从落叶那厮写了个变态的测试我才去看了下这东西.先来看个东西吧. var re = /\d/; console. ...
ace -- 语法高亮
Creating a Syntax Highlighter for Ace 给ace创建一个语法高亮 Creating a new syntax highlighter for Ace is extr ...
js 正则学习小记之匹配字符串字面量
今天看了第5章几个例子,有点收获,记录下来当作回顾也当作分享. 关于匹配字符串问题,有很多种类型,今天讨论 js 代码里的字符串匹配.(因为我想学完之后写个语法高亮练手,所以用js代码当作例子) va ...
代码语法高亮踩坑-原理，问题, PRE元素及htmlentity
语法高亮库基础原理在研究使用能够在web页面上代码语法高显的解决方案时,发现有很多现成的开源库.比较中意的有prism.js,highlightjs.他们的原理基本上核心就两点: 1. 利用html ...

随机推荐

C++ primer札记10-继承
包.继承,多态性C++的三个基本概念,在这里,我们重点总结继承的东西 1 类派生列表类派生列表中指定一个派生类继承基类,来自列表与一个或多个基类如: class B : public A1,prot ...
国内外MD5在线解密网站
-http://www.cmd5.com/english.aspx (457,354,352,282) - http://www.md5crack.com - http://www.hashcheck ...
开源Math.NET基础数学类库使用(01)综合介绍
原文:[原创]开源Math.NET基础数学类库使用(01)综合介绍开源Math.NET基础数学类库使用系列文章总目录: 1.开源.NET基础数学计算组件Math.NET(一)综合介绍 2. ...
Chapter 1 Securing Your Server and Network(10):使用扩展保护避免授权中继攻击
原文:Chapter 1 Securing Your Server and Network(10):使用扩展保护避免授权中继攻击原文出处:http://blog.csdn.net/dba_huang ...
SystemTrayDemo
遗留问题:win7 java.awt.TrayIcon的displayMessage方法没有生效,通知消息不能正常弹出. 许多桌面环境都有一个区域用于放置在后台运行的程序的图标,这些程序偶尔会将某些 ...
apache tomcat 集群！ (转)
公司需要一个内部测试局域网, 要求可以支持3000并发访问!以前也没做过服务器这方面.临时抱佛脚,查看了N多文档,他人经验,布置好之后,又遇到了N多问题,功夫不负有心人.终于还是完成了要求!观他人的布 ...
Chapter 1 Securing Your Server and Network(12):保护链接server
原文出处:http://blog.csdn.net/dba_huangzj/article/details/38438363.专题文件夹:http://blog.csdn.net/dba_huangz ...
GoldenGate组态（四）它veridata组态
GoldenGate组态(四)它veridata组态环境: Item Source System Target System Platform Red Hat Enterprise Linux Se ...
QlikView一年计算，以最新的销售数据
总销量的新财年后年初今天是非常需要的学生经常会遇到,有两种思路: 1. 能Load当数据是生成一个称为场YTDFlag.这是本财年的时刻,本场会1,除此以外,0.因此,在报告中可使用非常方便Sum(S ...
Linux 字符驱动程序（一）
Linux 字符驱动程序(一) 于linux有三个主要的内核设备: 1 字符设备: •字符设备的读写以字节为单位,存取时没有缓存. •对字符设备发出读写请求时.实际的硬件I/ ...

js 正则练习之语法高亮

js 正则练习之语法高亮的更多相关文章

随机推荐

热门专题