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

网络编程 2024/12/28 佚名

3 1 2

学了几天正则，差不多该总结整理写成果了，之前就想写语法高亮匹配来着，不过水平不够，看着例子都不理解。

那么我们来分析下两位大神次碳酸钴和 Barret Lee 语法高亮实现。

先说 Barret Lee 的这篇《几个小例子教你如何实现正则表达式highlight高亮》

之前看的时候只觉的神奇，特别是下面那个一步一步分开匹配的例子，更是霸气测漏，不过作者也说了，分开只是为了演示方便，可以很直观的看到这一步匹配了什么，不然一步到位匹配完成，你都不知道发生了什么就处理完毕了。
来看下他的正则

小胡子哥可能是不想重复造轮子，只是想弄清楚如何造这样的轮子而已，所以他写这个东西点到即止，没有深入详细的处理，做的比较粗糙。
当然我也不是说他什么，只是简单评论一下而已，毕竟优秀的语法高亮插件多的是，没必要自己重复造，学习下原理即可。

我们再来分析下次碳酸钴这篇《如何实现正则表达式的JavaScript的代码高亮》
其实这篇已经分析的非常详细了，我只能简单补充说明下。
次碳酸钴思维一向比较严谨，这篇文章之前我看了一个多小时，只能看个大概，这次重新分析了一遍，然后自己实现了一遍，竟然也花去我半天时间，
不过非常值得，真心学到了很多。

先来看一下大体的逻辑吧。

复制代码代码如下:
(\/\/.*|\/\*[\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] 的描述：我们必须匹配到每一个字符。因为它们都需要做一次HTML转义。
然后下面有详细的代码。

这是一篇非常不错的文章，我前前后后至少看了不下10次了，前两天才差不多完全明白。

不过这个代码还有一些小小的瑕疵，比如字符串不能匹配折行那种，字符串匹配优化。

还有数字匹配不够全面只能匹配 0xff, 12.34, 1e3 这几类，如 .123 12.3e+3 等格式都无法匹配到。
还有关键词顺序我觉得可以稍微优化下。
因为传统型NFA 引擎的只是从左往右匹配，匹配到了就停止下一个分支的操作。
所以把最常出现的关键词放前面，可以提升一部分性能。
最后，最好是 new RegExp 这样对于代码量大的代码性能上会有所提升。

下面就给出我的正则和简单的demo吧。(其实只是对次碳酸钴源码的优化而已。。)
先来看正则部分：

复制代码代码如下:
(\/\/.*|\/\*[\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";

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

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

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

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

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

差不多结合了小胡子哥和次碳酸钴两个思路的结果，现在比较完善了。
兼容性什么的还没测试，也没必要测试了，我也没打算自己写各种语法的高亮，太TM累了。。

正则表达式,语法高亮

华山资源网 Design By www.eoogi.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

华山资源网 Design By www.eoogi.com

评论“js 玩转正则表达式之语法高亮”

暂无评论...

www.eoogi.com 华山资源网

120,135影音资源

344,641技术资源

22,817软件资源

435,032站长资源

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

PHP中过滤常用标签的正则表达式

如何实现正则表达式的JavaScript的代码高亮

评论“js 玩转正则表达式之语法高亮”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

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

PHP中过滤常用标签的正则表达式

如何实现正则表达式的JavaScript的代码高亮

评论“js 玩转正则表达式之语法高亮”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存