一个简略的语法高亮实现-JavaSript-爱易网页

一个简略的语法高亮实现

日期：2014-05-16　浏览次数：20418 次

一个简单的语法高亮实现

HTML code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>color keywords</title>
<style type="text/css">
* {
    font-family: "新宋体";
}

#txtCode{
    width : 100%;
    height: 200px;
    resize: vertical;
}

.Output{
    border        : 1px solid #396;
    color         : white;
    width        : 100%;
    resize        : both;
    font-size    : 16px;
    line-height    : 150%;
    background-color:#0B161D;
}

Span.Comments{
    color:#159AE0
}

Span.String{
    color:#27A735;
}

Span.RegExp{
    color:#EA842B;    
}

Span.Keywords{
    color:#FFAA00;
}

Span.Number{
    color:#9C3583;
}

Span.Operator{
    color:#8CBBAD;
}
</style>

<script type="text/javascript">
function colorKeywords(){
    var keywords = "Array|arguments|alert|window|document|location|Boolean|Date|Enumerator|Error|Function|Global|Math|Number|Object|RegExp|String|break|delete|function|return|typeof|case|do|if|switch|var|catch|else|in|this|void|continue|false|instanceof|throw|while|debugger|finally|new|true|with|default|for|null|try|abstract|double|goto|native|static|boolean|enum|implements|package|super|byte|export|import|private|synchronized|char|extends|int|protected|print|throws|class|final|interface|public|transient|const|float|long|short|volatile";
    
        //解析优先级: 注释 > 字符串 > 正则 > 关键字 > 数字 > 运算符    
        var regStr     = "(/\\*[\\S\\s]*?\\*/|//.*?\\r?\\n)"
                 + "|((?:\"(?:[^\"]*?\\\\\")*.*?\")|(?:'(?:[^']*?\\\\')*.*?'))"
                 + "|(/(?:[^/]+?\\\\/)*.*?/[a-zA-Z]*)"
                 + "|(\\b(?:"+keywords+")\\b)"
                 + "|(\\b\\d+\\b)"
                 + "|(\\+\\+|--|===|==|\\+=|-=|\\*=|%=|~=|\\^=|\\|=|\\+|\\-|\\*|%|=|\\?|\\:|\\{|\\}|\\(|\\)|\\[|\\]|&&|&|\\|\\||\\|)";    
    
    var reg        = new RegExp(regStr, "gi");    
    var source    = $("txtCode").value;
    if( source == "" ) return;
    
    var ds = new Date();
    //着色前对特殊字符：<、>进行处理，否则格式会乱掉。
    source = source.replace(/</g, "&lt;")
                   .replace(/>/g, "&gt;");
    
    //对关键字进行着色
    var output = source.replace(reg, function(){
                    var args     = [].slice.call(arguments, 0);
                    var lstIdx    = args[args.length - 2];
                    var match   = args[0];
                    
                    if( args[1] ) return "<span class='Comments'>"    + args[1] + "</span>";
                    if( args[2] ) return "<span class='String'>"    + args[2] + "</span>";
                    if( args[3] ) return "<span class='RegExp'>"    + args[3] + "</span>";
                    
                    if( args[4] ) return  (source.charAt(lstIdx-1) != "$")
                                         ? "<span class='Keywords'>"+ args[4] + "</span>"
                                         : match;
                    
                    if( args[5] ) return  (source.charAt(lstIdx-1) != "$")
                                         ? "<span class='Number'>"    + args[5] + "</span>"
                                         : match;
                    
                    if( args[6] ) return "<span class='Operator'>"    + args[6] + "</span>";
                    
                    return match;
               });
    
    //替换掉空格和回车使能够正常格式化输出
    output = output.replace(/\r?\n/g, "<br/>"    )

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

一个简略的语法高亮实现

相关资料更多>

推荐阅读更多>