army8735

区分正则
想要高亮正则表达式的前提是区分它。由于正则表达式以/开头，因此这和除法、单行注释、多行注释会产生混淆。那么究竟该如何辨别呢？

注释的区别最为简单，因为注释拥有最高优先级。除非注释符出现在字符串内，否则一旦开始，编译器便立刻识别//和/*。
如图所示，当向前看字符为斜线时，根据规则由初始状态0进入状态1。如果接下来读入的字符是*，则进入状态2，并成为多行注释；倘若是/，则进入状态3，变成单行注释；而其它的情况么，则是正则除法皆有可能。
我们不妨设想一下：正则和除法有哪些区别？从语境上说，原则性的区别就是除法的前面是被除数，正则的前面不是。而成为被除数的可能无非是以下3种：数字、变量、括号内的运算结果。我不知道js解析引擎是如何做的，它可能相当得严谨（也简单，因为它会忽略空白和注释）。但是在web端语法高亮的需求中，由于假设输入的代码一定是正确的，所以可以“投机取巧”般地识别二者：
//检查当前除号是否是perl风格正则表达式开头
protected function isPerlReg():Boolean {
for (var j:int = index – 3; j > -1; j–) {
//先要忽略之前的单行注释
if (j == singleCommentEnd) {
j =…

有穷自动机（状态图）
处理词法分析的关键在于建立正确的DFA（确定的有穷自动机），而DFA是如何由NFA（不确定的有穷自动机）构造而来，NFA又是如何从正则表达式演变，不在本文讨论范围之内。我们只需要关心如何去画好这个状态图就行了。
先从最简单的开始。现在来了一串源码，我们的解析器想要识别出关键字if，那么该怎么办呢？下面是它的状态图：

我们把每个圈称作一个状态，圈内的数字用以标识不同的状态，而双边的圈则是终结状态。这个状态图没画完，因为状态4和状态5不是终结状态，却没有转换规则。这不是主要讨论。
一般情况下，状态0被称之为初始状态。解析器会设置一个向前看的哨兵，从左到右遍历源码。假设当前字符是i，很显然，它就是状态0可接受的唯一字符。于是开始执行转换规则，状态0根据规则转换到状态1，继续读入下一个字符。
状态1可接受的字符有2种：f和other。这里other不是说字符串，而是指除f以外的所有字符。假如是other的情况，显然它不是我们想要的关键字if，所以转而进入状态4，进行其它处理——至于处理什么、如何处理，暂时不需要关心，后面会说到；而如果是字符f，这就符合我们的预期，状态1通过规则转换到状态2。
可能你认为已经结束了，但事实并非这么简单。if两个字母是读出了，但却未必是关键字，后面如果跟着一个字母s呢？ifs，它可能是定义的一个变量名，又可能是个方法名。然而不管是什么，总归不是关键字。所以状态2接受2种字符：数字、字母、下划线（js应该还有美元符号$，因为它也可作为变量名组成），这条路通往状态5，我们不管；其它的情况就好办了，空白也好回车也好括号也好，它一定是if关键字，由此进入状态3。
上面说了两个圈儿的是终结状态，识别出if关键字后，状态3就结束了。此时解析器会进行回退，把if后面读入的向前看字符放回源码流中，继续下一次循环。经过这一轮番的解释，相信你能对词法分析有了大概的印象吧。同理，其它的关键字、数字、字符串、注释……也是如此识别的。
或许有人要问：一种语言的关键字那么多，为每个关键字写处理程序岂不是要累死？没错，事实上编译器也不会这样做。上面那个例子只是为了简单起见所举，真正可行的办法是只建立标识符的DFA，将所有标识符识别出来，然后一一对比，看此标识符是否是个关键字。
识别标识符

这是识别js语言标识符的状态图。不难看出，状态3和4都是可能的终结状态（实际上基于最小化DFA数量的原则，它们应该被合并为一个）。在初始状态0时，接受字母、下划线和美元符号，如果读入的向前看字符是的话，那么进入状态1。
状态1接受2种情况：字母、数字、下划线和美元符号，很明显这是js标识符的组成规定。这种情况下会进入状态2，并且状态2也接受同样的情况返回本身状态（标识符的长度是不定的，因此状态2会循环本身），它上面的弧线即表达了这个意思。只有当状态2时读入的向前看字符不是字母、数字、下划线或美元符号任一种的时候，才会进入终结状态3。此时这个标识符也识别出来了，和前面一样，回退继续处理。
状态1还有个接受other的情况，这是当标识符仅由一个字符组成时才会发生的。
以下是jssc中处理ecmascript语言中标识符的源代码：
protected function dealWord():void {
var start:int = index – 1;
var cc:int;
//直到不是字母数字下划线美元符号为止
while (index <= code.length) {
readch();
cc = peek.charCodeAt(0);
if (Character.isLetterOrDigit(cc) || Character.isUnderline(cc) ||…

高亮环境
说到为网页添加代码高亮功能，使用服务器端语言处理无疑是更高效、更兼容的做法（比如基于PHP的GeSHi）。然而这一方式主要面对的问题有三个：

加重了服务器负担，每次读/写都要将代码解析成正确显示的结果，而且代码过多时传输解析结果也会浪费一定的带宽。
增加语言种类或者维护升级时更新高亮程序相当费事，倘若支持热部署并且没有集群时还轻松些。
服务器存储的结果是原始的代码还是高亮后的结果？前者会使得每次读操作都要解析一下浪费资源；后者在修改原始代码的时候则会造成一定困难。引入缓存机制或许是个解决办法，但缓存本身就会增加技术维护量。

抛开服务器端，倘若这一切采用web端来做会是怎样的结果？

每次读时都要将代码解析成正确显示的结果，然而这一切是在客户端做的，与服务器无关，也不会浪费带宽。
维护高亮程序就是维护前端程序（js或者as等），成本要低得多。
服务器存储的是原始代码，不影响代码本身的修改，只需做简单的过滤即可，完全脱离了高亮逻辑。

也正是如此，web端语法高亮成为了主要的潮流。目前web端流行的编程语言无非js和as，silverlight尚需时日。其中js虽然有点兼容性问题，但在前端开发工程师手中早已有无数破解之道；as拥有跨平台、高性能以及良好的OOP支持（这里as主要指as3，下同），却未必如js那般近100%的支持。由此，现在能见到的web端高亮器几乎都是js写的，除了jssc（jssc前3版也是js写的，名称前缀即因此而来）。
对比参数
既然目标锁定了web端语法高亮器（废话，要不然文章标题不是白起了），那么衡量一款语法高亮程序就有了针对性。无非从以下几个方面进行对比：平台支持和兼容性、支持语法种类、程序体积大小、解析速度（性能）、解析结果正确性、功能体验、可扩展性。

平台支持和兼容性
无疑只有js和as的对比。
兼容性不说，as生成abc字节码跨平台支持，只需有avm虚拟机（Flash Player的虚拟机）支持即可；js虽然在各个核心中表现不同，但对前端开发工程师来说并不构成问题。
可到了平台支持上as就不完美了，毕竟它要依靠avm才能运行——这可能是用as来编写高亮程序唯一的弱点了，尽管Adobe吹嘘fp的普及率有97%；而js却在现代浏览器中得到普遍支持，除非客户端手动关闭它。

支持语法种类
这个要看作者原意提供多少种语法支持了。提供的语法当然是越多越好，但同时出现的问题就是写程序的人必须通晓所有语法特性才行。不可能幻想一个高亮解析器能够自动对所有编程语言进行正确解析，除非掌握这门语言的基本语法知识。
这对作者来说是个相当大的挑战，因为不可能一个人能够知晓所有编程语言的特点。良好的做法是设计好接口，让其它有兴趣的人参与进来，编写未实现的语法高亮程序。

程序体积大小
这点其实和上面一条互斥，支持的语法越多自然体积会更大。可行的办法无非一方面尽可能减少程序本身大小，提升代码复用读；另一方面用按需装载或按需组合只加载用到的那一部分（JSI？）。

解析速度（性能）
as在这方面有着先天性的优势。js则不一样了，依赖于引擎的不同，各浏览器的表现也不一致。而且，为了优化算法提高性能，js编写的高亮引擎往往需要牺牲一定的准确性来达到目的。

解析结果正确性
这个上面提到了，最正确的做法无非是针对某种语言的词法分析。然而这样做势必对实现语言有着很大的性能要求，js目前还是远远不能够胜任的，它只能采取某些方法进行折中，使得结果尽量正确。当然那些难以高亮的代码很少有人去写。

功能体验
行数、复制和折叠功能是最基本的。行数统计无需任何干预，html本身的ol节点就是顺序列表，自动支持行数；复制在各个浏览器下表现不一，最终还是需要通过flash player来实现（从这一点上说，无论任何前端高亮器其实都用到了js和as，只是侧重点不同）；而折叠功能只能通过词法分析来准确实现，as的优势再次体现出来。

可扩展性
和第2点一样，要增加语法种类同时就考验了程序的可扩展性。目前所有高亮器都有着不错的支持，js高亮器需要注意的是提取所有语言的逻辑共性，词法分析则要针对每一种语言编写lexer，提取同类语言的通用部分。

高亮解析方式
这可能是初心者最关注的问题之一了。我们最终的目的是正确将一段代码解析成能够在网页上显示的结果，因此如何实现这个解析器（我更习惯这样叫它，因为jssc就是基于词法分析的，倘若是其它方式，称呼为高亮器可能更准确一点）的逻辑，便成了核心。从2007年的jssc 1开始，我大抵尝试过3种基本模式，这也是目前前端高亮器中被广泛采用的。以下将一一叙述它们的优缺点：

正则模式
说到高亮一段未知代码，可能你第一反应就是使用正则。没错，基于模式匹配来高亮程序代码，这个方法至今都被大部分人所采用，只是在它基础上进行了许多加工。考虑到如下js代码（以后例子都将以javascript举例）：
典型的编程语言主要需要高亮以下几个部分：关键字（保留字）、数字（整数和浮点数）、字符（字符串）、注释。
其中关键字无法精确匹配，但每种语言对关键字的结构都有明确规定，如：以美元符号、下划线或者字母开头，后跟美元符号、下划线或者数字字母，如此用正则找出所有这种组合，再比较是否预留关键字即可；然而数字、字符、注释都具有一定的格式，采用正则很容易做到：
/^[$_a-z][$_a-z0-9]+/i、/^\d*?(\.\d+?)?$/、/^(“|’).*?\1$/、/\/\/.*?\n/。
这里面其实有很多问题，等到以后我们就会知道。
/*这个例子很简单，只需用正则匹配出多行注释、单行注释、关键字、字符串和数字即可。*/
for(var i = 0; i < 10; i++) {
var s = “NO. ” + i;
…

web端语法高亮器到底是什么时候开始流行的？
SyntaxHighlighter发表于2007年；SHJS的网站上写着copyright © 2007的字样；google-code-prettify的开源项目主页，最早的反馈亦是Mar 2007；就连jssc的雏形也是出生在2007年初的一堂《编译原理》实验课上。这一年，似乎成为高亮web代码的热潮期。
然而，一切仅仅是开始。随着Yahoo官方采用sh（SyntaxHighlighter），用js编写的它一夜成名。sh的确是目前所有已知web端语法高亮中最出色的一个，许多网站都在使用这家伙，它的地位可以称得上是霸主。不过，开源世界的代码永远是竞争激烈的，其它高亮器如雨后春笋般诞生，互相之间无不在攀比性能、功用、大小等等。记得在jssc 2发表的时候，还是个学生的我就把矛头直指sh，意欲一较高下。当然，结果就是另外一回事了。
时至今日，jssc历经5个版本，各方面都已发展至成熟。然而技术推动却一直只有我一个人，各种因素都有，技术门槛肯定是最重要的一个。于是，我决定开写一个系列文章来介绍web端语法高亮原理——不仅仅是帮助jssc的发展，更是为了共享经验、推动web端高亮技术的进步。本篇文章就是作为序言而写的。
以上即是简单的概念介绍，下面是系列文章的目录，链接不定时更新：

web端语法高亮原理：走进jssc的世界（一）
web端语法高亮原理：走进jssc的世界（二）
web端语法高亮原理：走进jssc的世界（三）
web端语法高亮原理：走进jssc的世界（四）
web端语法高亮原理：走进jssc的世界（五）

本着想写系列文章《web端语法高亮原理：走进jssc的世界》，介绍jssc的历史和核心算法的，结果无意间发现两个bug，真是丢脸啊。
一是数字高亮的bug，最终处理上居然一小步布尔逻辑写错了，造成长串数字的误认；二是ie下的复制按钮，定位的复制对象居然是“关于”，而不是源代码（少了个parentNode）。
这么明显的失误啊，真想跳楼谢罪了……
话归正题，系列文章会逐步出炉的，将jssc的一切毫无保留地叙述出来。这次失误的收获倒是知晓了其它几个web端的语法高亮器（以前只知道syntax highlighter，貌似也是最知名的），其中最吸引我的是prettify，貌似是google官方的东东。不愧是大佬啊！拿我常用的一段js代码测试了下，prettify是目前我所知js解析器中最为准确的！当然还有一点点小瑕疵，那就是正则的flag（i、m、g）没有跟随正则一起被高亮。不过最让我搞不懂的是，相对简单的flag没有解析正确，反而更难的跨行除法却做到了。
以下是我常用的测试代码，如果web端语法高亮器能解析到jssc的程度，才能够说明是正确了。
//javascript
function none(){
}
/** javascript
jscript
*/
var reg = /[\/][*]([\S\s]*?)(?:[*][/;\[\]]|$)|[\/][/g;](.*)|”((?:\\\\|\\”|[^"])*)”|’((?:\\\\|\\’|[^'])*)’/gm; ”; /\d/.test(1);
reg = 12;
a / b
/reg/;
var num1 = 0.541f;
function f(test) {
…