如何实现正则表达式的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={
    "&":/&/g,""":/"/g,"'":/'/g,
    "<":/</g,">":/>/g,"<br/>":/\n/g,
    " ":/ /g,"  ":/\t/g
  })e=e.replace(s[i],i);
  return e;
};
</script>

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

(0)

相关推荐

  • javascript中正则表达式反向引用示例介绍

    最近遇到一个需求,传入一个字符串,每三个字符插入一个空格 例: 传入abcd1234 输出 abc d12 34 思考了一下,准备写一个函数如下 复制代码 代码如下: function appendSpace(s) { var length = s.length; var result = ""; var last = 0; for(var i = 3;i<=length;i=i+3,last = last+3) { result = result+s.substring(i-3

  • php使用curl和正则表达式抓取网页数据示例

    利用curl和正则表达式做的一个针对磨铁中文网非vip章节的小说抓取器,支持输入小说ID下载小说. 依赖项:curl 可以简单的看下,里面用到了curl ,正则表达式,ajax等技术,适合新手看看.在本地测试,必须保证联网并且确保php开启curl的mode SpiderTools.class.php 复制代码 代码如下: <?php   session_start();  //封装成类 开启这些自动抓取文章   #header("Refresh:30;http://www.test.co

  • JavaScript表单通过正则表达式验证电话号码

    JavaScript表单验证电话号码,判断一个输入量是否为电话号码,通过正则表达式实现. 复制代码 代码如下: //检查电话号码 function isTel(str){ var reg=/^([0-9]|[\-])+$/g ; if(str.length<7 || str.length>18){ return false; } else{ return reg.exec(str); }

  • 如何用javascript正则表达式验证身份证号码是否合法

    在用户注册页面有些需求要求的比较严格,需要对身份证验证是否合法,通过此功能严格此系统软件,从而过滤到很多水客.下面就此实现方法给大家讲解下. 很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法,那在用正则表达式判断之前,你对身份证号的组成有多少了解呢?下面来说说一个身份证号里面包含了多少的信息: 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码. 2.地址码(前六

  • PHP正则表达式基本函数 修饰符 元字符和需转义字符说明

    我在写小偷中用了大量的正则,所以在接下来的版本中要逐步减少正则的应用 在PHP正则表达式中需要转义的字符如下: $^*()+={}[]|/:<>.?'" 注意:perl风格中表达式要求以/开始和结尾,如:/food/ 表匹配字符 food perl修饰符如下: i 完成不区分大小写的搜索 g 查找所有出现(all occurrences,完成全局搜索) m 将一个字符串视为多行(m就表示多(multiple)).默认情况下,^和$字符匹配字符串中的最开始和最末尾.使用m修饰符将使^和

  • javascript正则表达式参数/g与/i及/gi的使用指南

    regularexpression=/pattern/[switch] 这个switch就有三种值 g: 全局匹配 i: 忽略大小写 gi: 全局匹配 + 忽略大小写 JScript 语言参考 -------------------------------------------------------------------------------- 后向引用 正则表达式一个最重要的特性就是将匹配成功的模式的某部分进行存储供以后使用这一能力.请回想一下,对一个正则表达式模式或部分模式两边添加圆

  • C#正则表达式转义字符介绍

    正则表达式(regular expression)描述了一种字符串匹配的模式,可以用来检查一个串是否含有某种子串.将匹配的子串做替换或者从某个串中取出符合某个条件的子串等. 转义匹配语法: "\"+实际字符 \ . * + ? | ( ) { }^ $ [ ] 例如:\\匹配字符"\" \n 匹配换行 \r 匹配回车 \t 匹配水平制表符 \v 匹配垂直制表符 \f 匹配换页 \nnn 匹配一个8进制ASCII \xnn 匹配一个16进制ASCII \unnnn 匹

  • 正则表达式提取img的src

    要匹配的字符串:<img src=image/ad1.gif width="128" height="36"/><img src='image/ad2.gif' width="128" height="36" /> 正则表达式:<img[\s]+src[\s]*=[\s]*((['"](?<src>[^'"]*)[\'"])|(?<src>[^

  • JavaScript正则表达式验证身份证号码是否合法(两种方法)

    第一种方法: 在用户注册页面有些需求要求的比较严格,需要对身份证js验证是否合法,通过此功能严格此系统软件,从而过滤到很多水客.下面就此实现方法给大家讲解下. 很多时候我们都是通过一组正则表达式来判断用户输入的身份证是否合法,那在用正则表达式判断之前,你对身份证号的组成有多少了解呢?下面来说说一个身份证号里面包含了多少的信息: 1.号码的结构 公民身份号码是特征组合码,由十七位数字本体码和一位校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.

  • JS使用replace()方法和正则表达式进行字符串的搜索与替换实例

    1.JS字符串的替换及replace()方法的使用 replace(regexp,replacement)方法有两个参数,第一参数可以是一个纯文本字符串或是一个RegExp对象,具体请看RegExp对象的使用:第二个参数可是一个字符串也可以是一个函数. 以下是JS字符串替换的举例: 例1: 复制代码 代码如下: var str="Hello world!";document.write(str.replace(/world/, "phper")); 例2: 复制代码

随机推荐