当前位置:  编程技术>其它

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

    来源: 互联网  发布时间:2014-10-18

    本文导语:  今天想改一下JS的高亮的配色,憋了一下午憋出了这个这个正则表达式。  下面这老长老长了的玩意儿是个正则表达式,看到了别吓坏了。 代码如下:/(//.*|/*[Ss]+?*/)|((["'])(?:\.|[^\n])*?3)|b(break|continue|do|for|in|function|if|else|return|swit...

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

代码如下:

/(//.*|/*[Ss]+?*/)|((["'])(?:\.|[^\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|(?:[^Wd]|$)[$w]*|(0[xX][0-9a-fA-F]+|d+(?:.d+)?(?:[eE]d+)?)|(?:[^)]}]|^)(/(?!*)(?:\.|[^\/n])+?/[gim]*)|[Ss]/g

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

代码如下:

(//.*|/*[Ss]+?*/)

  这是第二个,这个正则表达式是用来匹配字符串的。字符串可以在单引号和双引号中,所以我们匹配这两个的任意一个。这里需要用一个括号把它括起来表示它是一个获取匹配(“获取匹配”的“获取”是名词),因为在结束的地方还需要匹配这个字符。在匹配字符串结束的地方可以用后向引用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个,这些只是匹配一些关键字,由于需要的颜色不同所以被分组了。这没什么好说的,跳过。

代码如下:

(?:[^Wd]|$)[$w]*

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

代码如下:

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

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

代码如下:

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

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

代码如下:

[Ss]

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

代码如下:

body {font:14px/18px Consolas;}

//读入当前代码
var code=document.getElementById("code").innerHTML;
//修正换行的浏览器差异,去掉头尾的换行和空格
code=code.replace(/rn|[rn]/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|(?:[^Wd]|$)[$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

    
 
 

您可能感兴趣的文章:

  • jQuery 表格隔行换色 鼠标高亮行变色的实现代码
  • Jquery点击高亮显示的实现代码
  • Jquery如何实现点击时高亮显示代码
  • vim中如何实现c++代码编写的自动格式化和语法高亮的功能?
  • vim 函数高亮和自动补全怎么实现的?
  • Jquery 点击按钮自动高亮实现原理及代码
  • Jquery实现的一种常用高亮效果示例代码
  • asp下正则实现URL自动链接的一个函数 iis7站长之家
  • listview 选中高亮显示实现方法
  • 几个小例子教你如何实现正则表达式highlight高亮
  • js用正则表达式控制价格输入实现代码
  • 用js实现过滤script的正则
  • 简单的用js实现过滤多余字符的正则表达式
  • PHP下ereg实现匹配ip的正则
  • 用正则实现提取代码内容的代码
  • asp.net 正则表达式匹配图片路径的实现代码
  • asp去掉html,保留img br p div的正则实现代码
  • 用Javascript正则实现url链接的解析类
  • 一个替换目录结构的正则表达式 实现目录的增加
  • asp下正则实现URL自动链接的一个函数
  • 正则用(?>…)实现固化分组提高效率
  • JavaScript 实现基础 正则表达式
  • python实现统计汉字/英文单词数的正则表达式
  • coolcode转SyntaxHighlighter与Mysql正则表达式实现分析
  • 正则表达式中的反向预搜索实现
  • 正则表达式提取网址、标题、图片等一例(.Net Asp Javascript/Js)的实现
  • c# 正则html标签剔除方法的实现代码
  • javascript中使用正则表达式实现删除字符串中的前后空格
  • asp常用的正则表达式实现字符串的替换
  • C#正则实现Ubb解析类的代码
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • CASE表达式实现基于条件逻辑来返回一个值
  • python实现问号表达式(?)的方法
  • 数据结构课程设计-用栈实现表达式求值的方法详解
  • 通过javascript实现DIV居中,兼容各浏览器版本
  • socket实现多文件并发传输,求助多线程实现问题?
  • Python GUI编程:tkinter实现一个窗口并居中代码
  • interface 到底有什么用???实现接口,怎么实现??
  • 通过javascript库JQuery实现页面跳转功能代码
  • 怎么用Jsp实现在页面实现树型结构?
  • sharepoint 2010 使用STSNavigate函数实现文件下载举例
  • windows 下的PortTunnel 在linux下怎么实现?或者相应的已经实现的软件?端口映射
  • php实现socket实现客户端和服务端数据通信源代码
  • 网站重定向用C语言实现iptables,ACL实现
  • flash AS3反射实现(describeType和getDefinitionByName)
  • 在linux下如何编程实现nslookup命令实现的IP地址和域名互相转换的功能?
  • boost unordered_map和std::list相结合的实现LRU算法
  • 求在freebsd+Squid下实现pc上网的透明代理的实现方法!给出具体配置方法的高分谢!
  • c#通过委托delegate与Dictionary实现action选择器代码举例
  • linux下如实现与window下的驱动器实现文件共享??
  • 使用java jdk中的LinkedHashMap实现简单的LRU算法
  • qt如何实现:操作键盘实现数据的滚动?
  • iphone cocos2d 精灵的动画效果(图片,纹理,帧)CCAnimation实现
  • 我想用APPLET实现读取客户端的图片文件,该如何实现?
  • c语言判断某一年是否为闰年的各种实现程序代码
  • PING是用TCP,还是用UDP来实现的?或是采用其它协议实现的?




  • 特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3