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

2024-10-05 08:15:01

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

那么我们来分析下两位大神次碳酸钴和 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');

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累了。。

javascript高亮效果的二种实现方法

js高亮方法一: 复制代码代码如下: <script> function HighLight(nWord){ if(nWord!=''){ var keyword = document.body.createTextRange(); while(keyword.findText(nWord)){ keyword.pasteHTML("<span style='color:red;'>" + keyword.text + "</span>&
javascript 关键字高亮显示实现代码

关键字高亮显示我们是一个专业的收集各类脚本学习资料的网站,尽量修正错误打造精品脚本类学习网站,我们为大家游戏脚本资源,源码,软件,asp,php,javascript等编程资料,是网页制作,网络编程,网站建设人士的聚集场所. 提供最新的网络编程.脚本编程.网页制作.网页设计.网页特效,为站长与网络编程从业者提供学习资料. 脚本,vbscript,正则表达式,jquery,dos,bat,批处理,javascript,Photoshop,HTML,div+css,ASP,PHP,ASP.NET
JavaScript实现的搜索及高亮显示功能示例

本文实例讲述了JavaScript实现的搜索及高亮显示功能.分享给大家供大家参考,具体如下: 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉效果图: html: <div class="contracts-header">名称: <input type="text" value="" id="sea
jsp网页搜索结果中实现选中一行使其高亮

我在做搜索结果时,为了好看需要将选中的行变的高亮些,我使用了一个onclick 事件: 复制代码代码如下: var assno=""; function check(obj,che,rwid){ if(obj.checked==true){ document.getElementById(rwid).style.background ="blue"; assno=document.getElementById(che).value; alert(assno); }
Javascript实现的CSS代码高亮显示

相比JavaScript,CSS的语法就简单多了,主要是处理注释.字符串.CSS样式名称.CSS样式值.缩进和换行,具体详情请看代码. Javascript实现CSS代码高亮显示 body{ font-size:12px; line-height:1.8; font-family:'Courier New', Courier, monospace; } #area{ width:320px; height:120px; } body{ font-size:12px; line-height:1.
用js查找法实现当前栏目的高亮显示的代码

当前栏目高亮显示 JS判断当前URL对当前栏目高亮显示,重点是用到了indexOf来判断两个字符串中第一次出现的位置,如果没有出现就返回-1,出现就返回其它,并与返回其它结果的那个字符串所在元素定义一个class. HTML 复制代码代码如下: <div id="nav"> <ul> <li><a href="http://www.jb51.net/html/list/index_127.htm"
angularjs实现搜索的关键字在正文中高亮出来

1.定义高亮 filter 我们希望搜索的关键字在正文中高亮出来,正文内容就是过滤器的第一个参数,第二个参数就是搜索关键字,这样,我们的过滤器将会有两个参数了. 高亮的原理很简单,将需要高亮的内容使用 span 标记隔离出来,再加上一个高亮的 class样式进行描述就可以了. app.filter("highlight", function($sce, $log){ var fn = function(text, search){ $log.info("text: &quo
Angularjs实现搜索关键字高亮显示效果

需求分析: 根据关键字搜索网页内容,并且高亮显示内容中的关键字细节分析: 1.每次执行搜索操作,需清空上一次结果 2.需区分html标签和正常文本内容,否则为关键字添加样式以后会出现标签内容被显示的情况代码思路: 利用正则表达式匹配关键字使用javascript字符串替换的方式,将关键字替换成<span class='red'>关键字</span> 为了避免出现当关键字为 'p' 时候,将标签<p>替换成<<span>p</span>
用JS将搜索的关键字高亮显示实现代码

用JS让文章内容指定的关键字加亮是这样的.. 现在有这些关键字:美容,生活,购物当在文章里头出现这些关键字,就把它加亮显示.. 文章是生成静态页面的,而这些关键字是能随时更新的,所以我想用JS来实现...不知道怎样来实现这样的功能啊?特此求助复制代码代码如下: <script language="JavaScript">function highlight(key) { var key = key.split('|'); for (var i=0; i<key.
两种简单实现菜单高亮显示的JS类代码

记得当年写静态页时,为了实现高亮都是在每个页面加不同的样式,呵.高亮显示我觉得对于web前端来说,是比较常用到的效果,正好此次又要用到,特地整理出我所写的两种高亮类. 其实思路很简单,第一种方法是通过遍历链接组的href值,通过indexOf判断href值是否被包含在浏览器当前url值中.此方法有一定局限,比如对于iframe内的菜单是不能这样判断的; 第二种方法适用范围更广一样,实现思路也比较简单,即通过判断点击,给点击项加载高亮样式. 第一种判断当前URL值高亮类代码: 复制代码代码如下:

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

相关推荐

随机推荐