正则匹配js代码高亮

<!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 = "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,

                ">": />/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>

 

你可能感兴趣的:(js)