js 玩转正则表达式之语法高亮

(/^/s+|/s+$/) // 匹配首尾空格
(/(["'])(?://.|[^///n])*?/1/) // 匹配字符串
(///(?!/*|span).+//(?!span)[gim]*/) // 匹配正则 span 是他上次处理加上的，我觉得这里不应该出现
(/(////.*|///*[/S/s]+?/*//)/) // 匹配注释
(/(/*/s*)(@/w+)(?=/s*)/) // 匹配注释中的标记
(//b(break|continue|do|for|in|function|if|else|return|switch|throw|try|catch|finally|var|while|with|case|new|typeof|instance|delete|void|Object|Array|String|Number|Boolean|Function|RegExp|Date|Math|window|document|navigator|location|true|false|null|undefined|NaN)/b/) // 匹配关键词

(////.*|///*[/S/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/s] // 其他不能匹配的任意值

(////.*|///*[/s/S]*?/*//) // 匹配注释没改
("(?:[^"//]|//[/s/S])*"|'(?:[^'//]|//[/s/S])*') // 匹配注释优化过
/b(true|false|null|undefined|NaN)/b // 匹配布尔和空值，这几个比较常用，分组提前
/b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)/b // 匹配关键词，关键词顺序改了下
/b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)/b //内置对象，单词顺序改了下
(?:[^/W/d]|/$)[/$/w]* // 匹配普通的变量名没改
(0[xX][0-9a-fA-F]+|/d+(?:/./d+)?(?:[eE][+-]?/d+)?|/./d+(?:[eE][+-]?/d+)?) // 匹配数字，修复了匹配
(?:^|[^/)/]/}])(//(?!/*)(?://.|[^/////n])+?//[gim]*) // 匹配正则，这个最复杂，情况很多，我暂时没实力修改
[/s/S] // 匹配其他

// 单行注释
/**
* 多行注释
* @date 2014-05-12 22:24:37
* @name 测试一下
*/
var str1 = "123/"456";
var str2 = '123/'456';
var str3 = "123/
456";

var num = 123;
var arr = [12, 12.34, .12, 1e3, 1e+3, 1e-3, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12//34"/];

for (var i=0; i<1e3; i++) {
var node = document.getElementById("a"+i);
arr.push(node);
}

function test () {
return true;
}
test();

(function(window, undefined) {
var _re_js = new RegExp('(//////.*|/////*[//s//S]*?//*///)|("(?:[^"////]|////[//s//S])*"|/'(?:[^/'////]|////[//s//S])*/')|//b(true|false|null|undefined|NaN)//b|//b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)//b|//b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)//b|(?:[^//W//d]|//$)[//$//w]*|(0[xX][0-9a-fA-F]+|//d+(?://.//d+)?(?:[eE][+-]?//d+)?|//.//d+(?:[eE][+-]?//d+)?)|(?:^|[^//)//]//}])(///(?!//*)(?:////.|[^/////////n])+?///[gim]*)|[//s//S]', 'g');

function htmlEncode(str) {
 var i, s = {
 //"&": /&/g,
 """: /"/g,
 "'": /'/g,
 "<": //g,
 " ": //n/g,
 " ": / /g,
 " ": //t/g
 };
 for (i in s) {
 str = str.replace(s[i], i);
 }
 return str;
 }

window.prettify = prettify;
})(window);

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>test</title>
 <style>
 /* 高亮样式 */
 *{font-size:12px;}
 code{word-break:break-all;}

.com {color:#008000;} /* 注释 */
 .comkey {color:#FFA500;} /* 注释标记 */
 .str {color:#808080;} /* 字符串 */
 .val {color:#000080;} /* true|false|null|undefined|NaN */
 .kwd {color:#000080;font:bold 12px 'comic sans ms', sans-serif;} /* 关键词 */
 .obj {color:#000080;} /* 内置对象 */
 .num {color:#FF0000;} /* 数字 */
 .reg {color:#8000FF;} /* 正则 */
 .func {color:#A355B9;} /* 函数 */
 </style>
</head>
<body>

<code id="regdemon">
// 单行注释
/**
* 多行注释
* @date 2014-05-12 22:24:37
* @name 测试一下
*/
var str1 = "123/"456";
var str2 = '123/'456';
var str3 = "123/
456";

var num = 123;
var arr = [12, 12.34, .12, 1e3, 1e+3, 1e-3, 12.34e3, 12.34e+3, 12.34e-3, .1234e3];
var arr = ["12", "12.34", '.12, 1e3', '1e+3, 1e-3', '12.34e3, 12.34e+3, 12.34e-3', ".1234e3"];
var arr = [/12", "12.34/, /"12//34"/];

for (var i=0; i<1e3; i++) {
var node = document.getElementById("a"+i);
arr.push(node);
}

function test () {
return true;
}
test();

(function(window, undefined) {
var _re_js = new RegExp('(//////.*|/////*[//s//S]*?//*///)|("(?:[^"////]|////[//s//S])*"|/'(?:[^/'////]|////[//s//S])*/')|//b(true|false|null|undefined|NaN)//b|//b(var|for|if|else|return|this|while|new|function|switch|case|typeof|do|in|throw|try|catch|finally|with|instance|delete|void|break|continue)//b|//b(document|Date|Math|window|Object|location|navigator|Array|String|Number|Boolean|Function|RegExp)//b|(?:[^//W//d]|//$)[//$//w]*|(0[xX][0-9a-fA-F]+|//d+(?://.//d+)?(?:[eE][+-]?//d+)?|//.//d+(?:[eE][+-]?//d+)?)|(?:^|[^//)//]//}])(///(?!//*)(?:////.|[^/////////n])+?///[gim]*)|[//s//S]', 'g');

window.prettify = prettify;
})(window);
</code>

window.prettify = prettify;
})(window);

var code = document.getElementById("regdemon");
code.innerHTML = prettify(code);
</script>
</body>
</html>