个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 25 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章如何实现正则表达式的JavaScript的代码高亮由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

今天想改一下JS的高亮的配色，憋了一下午憋出了这个这个正则表达式。 　　下面这老长老长了的玩意儿是个正则表达式，看到了别吓坏了.

  。

复制代码 代码如下:

/(\/\/.*|\/\*[\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]/g

  。

　　现在，我们可以来慢慢分析它。仔细看这个正则表达式你会发现，它们是很多个正则表达式用|连接起来的。现在，我们把它用|分割，逐个分析.

  。

复制代码 代码如下:

(\/\/.*|\/\*[\S\s]+?\*\/)

  。

　　这是第二个，这个正则表达式是用来匹配字符串的。字符串可以在单引号和双引号中，所以我们匹配这两个的任意一个。这里需要用一个括号把它括起来表示它是一个获取匹配（“获取匹配”的“获取”是名词），因为在结束的地方还需要匹配这个字符。在匹配字符串结束的地方可以用后向引用\3来匹配字符串开始的字符，也就是开始时的引号种类。如果你从这整个正则表达式的开头开始数，你就会发现["']外面的括号是整个正则表达式中的第三个获取匹配。这就是字符串的头尾部分，中间的部分由于字符串是可以包含转义的，所以我们一旦遇到反斜杠就直接跳过它后面那个字符，因为反斜杠后面包含的是转义。但是这仅仅是匹配转义，所以我们要用或运算|连接一个匹配非转义的表达式，那就是[^\\]。可是这个是匹配非反斜杠的任何字符，它可以包含换行，而JS中的字符串是不允许写成换行的。所以我们需要加个\n让它不匹配换行。由于我们使用了或来连接，而或的优先级非常低，所以需要在旁边加上括号来修正优先级。如果使用普通的括号就会占用一个获取匹配，所以我们要使用(?:)来完成一个非获取匹配.

  。

复制代码 代码如下:

\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

  。

　　这是第3、4、5、6个，这些只是匹配一些关键字，由于需要的颜色不同所以被分组了。这没什么好说的，跳过.

  。

复制代码 代码如下:

(?:[^\W\d]|\$)[\$\w]*

  。

　　这是第七个，它的作用是匹配普通的变量名。如果变量名的字符不消耗掉，后面匹配数字的就有可能会把变量名中的数字匹配输出来。所以这一步是必须的。你会发现这一步没有任何获取匹配，因为变量名的颜色是默认颜色，我们不获取它。根据JS的命名规则，变量名是不能以数字开头的，所以我们用[^\W\d]|\$匹配一个变量的开头。后面则可以匹配数字、字母、下划线、美元符号，任意次。这样变量名就被消耗掉了.

  。

复制代码 代码如下:

(0[xX][0-9a-fA-F]+|\d+(?:\.\d+)?(?:[eE]\d+)?)

  。

　　这是第八个，匹配数字的。由于数字的表达方式有两种，所以我们要分开写。|的左边是16进制的数字写法。右边是普通的数字写法，这个可以包含小数和科学计数法。由于小数和科学计数法都是可选存在的，所以我们把它括号起来，后面加上问号作为可选匹配.

  。

复制代码 代码如下:

(?:[^\)\]\}]|^)(\/(?!\*)(?:\\.|[^\\\/\n])+?\/[gim]*)

  。

　　这是第九个，匹配正则表达式的。前面有个非获取匹配，匹配非括号的结束。因为如果存在括号，那么斜杆就有可能表示的是除号而不是正则表达式了。后面就是正则表达式的匹配，和字符串的匹配类似，只不过最后多了一个[gim]*。这是正则表达式的三种匹配模式，也是属于正则表达式的范畴，所以我们要匹配并获取它.

  。

复制代码 代码如下:

[\S\s]

  。

　　最后一个是匹配所有上面没有匹配到的字符，我们必须匹配到每一个字符。因为它们都需要做一次HTML转义。 　　这样，这个长长的正则就分析完了。下面是实现的例子.

  。

复制代码 代码如下:

<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={     "&amp;":/&/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> 。

  。

　　由于今天在赶这篇文章，没时间做这个代码的优化了。应该还有很多小漏洞，不过整体思路就是这样。这样无论是JS还是其它什么语言，代码高亮都可以直接正则匹配出来.

最后此篇关于如何实现正则表达式的JavaScript的代码高亮的文章就讲到这里了,如果你想了解更多关于如何实现正则表达式的JavaScript的代码高亮的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

25 4 0
文章推荐： js 玩转正则表达式之语法高亮
文章推荐： JsRender for index循环索引用法详解
文章推荐： 几个小例子教你如何实现正则表达式highlight高亮
文章推荐： javascript常用函数归纳整理
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com