正则匹配js代码高亮

浏览数：23 / 时间：2015年06月09日
<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
    /* 高亮样式 */
    
    * {
        font-size: 16px;
        font-family: microsoft yahei;
    }
    
    pre {
        word-break: break-all;
        word-wrap: break-word;
        width: 900px;
        background: #000;
        color: #D4D1D1;
        padding: 20px;
    }
    
    .com {
        color: #7F7979;
    }
    /* 注释 */
    
    .comkey {
        color: #FFA500;
    }
    /* 注释标记 */
    
    .str {
        color: #F6B846;
    }
    /* 字符串 */
    
    .val {
        color: #03031B;
    }
    /* true|false|null|undefined|NaN */
    
    .kwd {
        color: #CF3E3E;
    }
    /* 关键词 */
    
    .obj {
        color: #22AD95;
    }
    /* 内置对象 */
    
    .num {
        color: #6C05F7;
    }
    /* 数字 */
    
    .reg {
        color: orange;
    }
    /* 正则 */
    
    .func {
        color: green;
    }
    /* 函数 */
    </style>
</head>

<body>
    <pre id="regdemon">
// 单行注释

/**
 * 多行注释
**/


var str1 = "123\"456";
var str2 = ‘123\‘456‘;
var str3 = "123456";

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

    window.prettify = prettify;
})(window);
</pre>
    <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*|(?: )*\*(?: )*)(@\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);

    var code = document.getElementById("regdemon");
    code.innerHTML = prettify(code);
    </script>
</body>

</html>