给JS代码高亮写个注释

代码来源：http://topic.csdn.net/u/20090518/10/1ef94a2d-370c-4793-8355-0d556bba946e.html 

当初看这个贴子的时候看的我很郁闷，就问zswang要注释，这大哥不给，下来又苦读正则表达式。回头再看他的代码， 但总算有了点眉目，因为在这之前我不知道怎么做一个代码高亮，不清楚扫描代码该是一个怎样的流程。

我用javascript语法高亮作例子来介绍一下代码高亮的流程：

javascript: { syntaxs: [ { pattren: /^/s+/, name: "Whitespace" } , { pattren: /^.*/, name: "LineComment" } , { pattren: /^///*[/s/S]*?/*///, name: "MultiComment" } , { pattren: /^//([^/n/r]*(//.)*)*//(i|m|g)*/, name: "Regex", start: ["", "Symbol"] } , { pattren: /^(~|/+|/-|/*|/(|/)|/[|/]|/{|/}|/||/;|:|=|<|>|/.|/,|/%|/!|&|/?|/^)+/, name: "Symbol" } , { pattren: /^///, name: "Symbol" } , { pattren: /^(/d+(?!/.|x|e|d|m)u?)|^0x([/da-fA-F]+(?!/.|x|m)u?)|^NaN/, name: "Number" } , { pattren: /^(/d+)?/./d+((/+|/-)?e/d+)?(m|d|f)?|^/d+((/+|/-)?e(/+|/-)?/d+)?(m|d|f)?/, name: "Float" } , { pattren: /^"([^//"]*(//.)*)*"/, name: "String" } , { pattren: /^'([^//']*(//.)*)*'/, name: "String" } , { pattren: /^[/w$_]+/, name: "Identifier" } ] , identifiers: [ { pattren: /^(break|delete|function|return|typeof|case|do|if|switch|var|catch|else|in|this|void|continue|false|instanceof|throw|while|debugger)$/, name: "Reserved" } , { pattren: /^(finally|new|true|with|default|for|null|try|abstract|double|goto|native|static|boolean|enum|implements|package|super|byte|prototype)$/, name: "Reserved" } , { pattren: /^(export|import|private|synchronized|char|extends|int|protected|throws|class|final|interface|public|transient|const|float|long|short|volatile)$/, name: "Reserved" } , { pattren: /^(Array|String|Boolean|undefined|Object|Enumerator|Error|Math)$/, name: "Type" } ] }  

这段代码定义了javascript语言的语法元素的pattern,

开始的时候调用Highlight.analyze方法，它会拿每一个pattern和code的最开始的元素来匹配，如果能够找到这样的code片断， 则把code片断和它所属的语法元素类型名称push到result 数组中，然后把已经匹配到的code片断删除，继续匹配。如果所有的pattern没有一个能够匹配， 则把这个code标记为Unknown也放入result中。

比如我输入的js代码是：

var a = 1234;
alert(a);

最后的result数组是这样的：

Reserved : var
Whitespace :

 

Identifier : a
Whitespace :

 

Symbol : =
Whitespace :

 

Number : 1234
Symbol : ;
Whitespace :

 

Identifier : alert
Symbol : (
Identifier : a
Symbol : );

有了这个数组，再来代码高亮就不难了。

整个代码相当的完美，但也很复杂，只是俺当初不是计算机的，其中涉及到嵌套分析的部分，我觉得暂时超出了我的理解范围，需要消化良久。