js页面代码高亮显示插件

为了给本站在页面显示代码加些效果,于是写了个非常简单的代码高亮插件
主要用正则进行匹配分析,把代码内容分为三大类,特殊类,关键词,和通用类
当然,每一类为了具体分析也分了多种,为了分成不同的颜色。
最先进行字符串查找,记录查找到的信息开始位置,长度,和要加上的样式名
创了个对象用来保存这些信息,再存入一个数组 Phrases 等候使用

cb.CodeBrusher.Phrase = function(index, length, classname){
	this.index = index;
	this.length = length;
	this.class = classname;
}
//this.Phrases[this.Phrases.length] = new cb.CodeBrusher.Phrase(index, length, Class);

之后再根据开始位置排好序
然后就是循环这个数组,根据开始位置和长度截取原始代码的内容,加上span,再组合拼接成新的有带颜色的代码内容
最后输出回页面

this.code = this.originalCode;
	
for(i=0;i<this.Phrases.length;i++){
    var Phrase = this.Phrases[i];
    if(Phrase.index >= pos && Phrase.length > 0){
        colorCode += this.code.substr(pos, Phrase.index-pos);
        var value = this.code.substr(Phrase.index, Phrase.length);
        colorCode += prvePhrase = "<span class='"+Phrase.class+"'>" + value + "</span>";
        pos = Phrase.index + Phrase.length;
    }
}
colorCode += this.code.substr(pos);

思路比较简单,也没有过多测试,先凑合用,以后使用中发现bug再改吧