javascript开发代码高亮预研报告

此报告是前一阵开发在线代码编辑器时，对代码高亮功能预研的成果，放在此处以备将来参考。附件是报告中所涉及的文件。

 

JS开发代码高亮预研成果报告

 

       代码高亮功能分为整篇代码高亮处理，和即时代码高亮处理，预研目标为即时代码高亮，但是由于存在效率的问题，备选整篇代码高亮处理方案。

       整篇代码高亮处理

即对一篇代码或一段代码加入语法高亮，要求代码完整，如：html匹配、括号匹配完全，对完整代码语句进行高亮处理，转换速度相对较快。

 

       即时代码高亮处理

即在代码输入过程中实时对代码语法进行分析（包括不完全语句）进行高亮处理，转换速度相对较慢。

      

       基本原理

在RichEditor中使用正则表达式对代码中语法和关键字进行匹配，对匹配的内容增加类似<font color=”red”>的标签改变其在RichEditor中表现的颜色。

 

       关键字高亮和语法结构高亮

在语法匹配中使用的匹配手段分关键字匹配和语法结构匹配。关键字匹配，即只对语法中的key关键字和值关键字进行高亮处理。语法结构匹配，即匹配语法中的定界符内的内容进行转换，如：{}、<>内；冒号前、后；分号前。由于不同语言的关键字库大小不同，关键字匹配对于不同语言代码高亮处理效率不同，但总的效率没有语法结构匹配高。

 

 

实例演示及效率测试结果

        测试环境：Windows XP  IE6  CPU主频：2.93GHz  内存：1G

1.HTML语法结构高亮

演示文件：代码高亮演示\HTML语法结构高亮.html

处理速度：600行代码 约1秒

2. css关键字代码高亮

演示文件：代码高亮演示\css关键字代码高亮.html

处理速度：100行代码 约1分半

3. css结构代码高亮

演示文件：代码高亮演示\css结构代码高亮.html

处理速度：800行代码 约4秒

 

以上测试使用的正则匹配是适用即时高亮的正则表达式，如用适用整篇高亮的正则表达式，效率会有所提高，另外客户端的主机性能和CPU占用情况对效率有不同影响。

 

其他成果

       1.SyCODE Syntax Highlighter

用于对整篇代码进行高亮处理，国内人士开发，js文件中有相关介绍。

支持20种语法，转换速度快，易扩展，跨浏览器。目前没有个人或小组对其进行维护，测试中没有发现bug。

       在SyCODE Syntax Highlighter目录下有相关js文件及测试文件。

 

       2. codepress

              即时高亮处理，国外人士开发，opensource许可。

支持多种语法，跨浏览器，整合方便，易扩展。目前没有个人或小组对其进行维护（官方网站上不去http://codepress.org/）。

特点：对区域进行高亮处理和对特殊按键（空格、回车等）时高亮处理让使用者在编辑时减少延时感。另外增加很多编辑控制功能，如：tab输入、行号、s自动完成等。

其他：在测试过程中发现一些小bug,如在ie下粘贴失败，滚轮滑动时出现延时等，在源码中可找到修改点，源码结构清晰。

源代码及演示在codepress-v.0.9.6.zip

 

       以上两个开源项目是目前找到的比较适用于在线编辑器的，除此之外还有其他一些代码高亮开源程序，但不适用于在线编辑。Codepress实现功能多一些，适用于即时高亮编辑器，如不用即时高亮的功能，建议采用SyCODE Syntax Highlighter，在高亮处理的效率上相信要比前者高。

 

总结

        用Javascript开发的代码高亮处理程序，主要存在运行效率、和源代码侵入问题。运行效率低的问题，可通过优化语法匹配正则表达式和只对局部代码做处理（codepress已实现）进行改善，源代码侵入的问题虽然对获得最终编辑代码的影响不大，但存在操作不合理（如：undo时只改变颜色而不是对用户输入内容undo）和其他预料外的问题，目前没有找到适合的解决办法。另外，使用RichEditor在很多细节功能上与传统编辑器存在差异，如：多行缩进、自动缩进、文本替换等没有实现，都是需要进行扩展开发的功能。

 

 

备注：以上RichEditor指 designMode=on及contentEditable=true的div、iframe。