这是第二个,这个正则表达式是用来匹配字符串的。字符串可以在单引号和双引号中,所以我们匹配这两个的任意一个。这里需要用一个括号把它括起来表示它是一个获取匹配(“获取匹配”的“获取”是名词),因为在结束的地方还需要匹配这个字符。在匹配字符串结束的地方可以用后向引用\3来匹配字符串开始的字符,也就是开始时的引号种类。如果你从这整个正则表达式的开头开始数,你就会发现["']外面的括号是整个正则表达式中的第三个获取匹配。这就是字符串的头尾部分,中间的部分由于字符串是可以包含转义的,所以我们一旦遇到反斜杠就直接跳过它后面那个字符,因为反斜杠后面包含的是转义。但是这仅仅是匹配转义,所以我们要用或运算|连接一个匹配非转义的表达式,那就是[^\\]。可是这个是匹配非反斜杠的任何字符,它可以包含换行,而JS中的字符串是不允许写成换行的。所以我们需要加个\n让它不匹配换行。由于我们使用了或来连接,而或的优先级非常低,所以需要在旁边加上括号来修正优先级。如果使用普通的括号就会占用一个获取匹配,所以我们要使用(?:)来完成一个非获取匹配。
这是第七个,它的作用是匹配普通的变量名。如果变量名的字符不消耗掉,后面匹配数字的就有可能会把变量名中的数字匹配输出来。所以这一步是必须的。你会发现这一步没有任何获取匹配,因为变量名的颜色是默认颜色,我们不获取它。根据JS的命名规则,变量名是不能以数字开头的,所以我们用[^\W\d]|\$匹配一个变量的开头。后面则可以匹配数字、字母、下划线、美元符号,任意次。这样变量名就被消耗掉了。
这是第八个,匹配数字的。由于数字的表达方式有两种,所以我们要分开写。|的左边是16进制的数字写法。右边是普通的数字写法,这个可以包含小数和科学计数法。由于小数和科学计数法都是可选存在的,所以我们把它括号起来,后面加上问号作为可选匹配。
这是第九个,匹配正则表达式的。前面有个非获取匹配,匹配非括号的结束。因为如果存在括号,那么斜杆就有可能表示的是除号而不是正则表达式了。后面就是正则表达式的匹配,和字符串的匹配类似,只不过最后多了一个[gim]*。这是正则表达式的三种匹配模式,也是属于正则表达式的范畴,所以我们要匹配并获取它。
style>body {font:14px/18px Consolas;}/style>
script id="code">
//读入当前代码
var code=document.getElementById("code").innerHTML;
//修正换行的浏览器差异,去掉头尾的换行和空格
code=code.replace(/\r\n|[\r\n]/g,"\n").replace(/^\s+|\s+$/g,"");
//开始主匹配
code=code.replace(/(\/\/.*|\/\*[.\s]+?\*\/)|((["'])(?:\\.|[^\\\n])*?\3)|\b(break|continue|do|for|in|function|if|else|return|switch|this|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void)\b|\b(Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location)\b|\b(true|false)\b|\b(null|undefined|NaN)\b|(?:[^\W\d]|\$)[\$\w]*|(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)|(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)|[.\s]/g,function(){
var a,l,i,s;
a=arguments;
//循环匹配到的位置
for(i=1;i=9;i++)if(s=a[i]){
s=htmlEncode(s);
//每个获取匹配的位置都着上不同的颜色
switch(i){
case 1://注释
return s.fontcolor("#998877").italics();
case 2:case 3://字符串
return s.fontcolor("#AA5544");
case 4://关键词
return s.fontcolor("#333388");
case 5://内置对象
return s.fontcolor("#5555AA");
case 6://布尔值
return s.fontcolor("#DD6600");
case 7://空值
return s.fontcolor("#BB4433");
case 8://数字
return s.fontcolor("#CC3322");
case 9://正则表达式
//这个比较特殊,匹配到的和获取的有些不同
//匹配的时候,前面有个非获取匹配,所以我们要保留非获取匹配的部分
return htmlEncode(a[0]).replace(s,s.fontcolor("#33AA33"));
};
};
//没有获取匹配就直接转义输出
return htmlEncode(a[0]);
});
//输出结果
document.write(code);
//HTML的转义函数
function htmlEncode(e){
var i,s;
for(i in s={
""://g,"quot;":/"/g,"#039;":/'/g,
"lt;"://g,"gt;":/>/g,"br/>":/\n/g,
"nbsp;":/ /g,"nbsp;nbsp;":/\t/g
})e=e.replace(s[i],i);
return e;
};
/script>