How to use regular expressions to highlight JavaScript code

这次给大家带来用正则表达式让JavaScript的代码高亮，怎样用正则表达式让JavaScript的代码高亮？用正则表达式让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

给大家看一下完整的代码

<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]+?\*\/)|((["&#39;])(?:\\.|[^\\\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,"&#39;":/&#39;/g,    "<":/</g,">":/>/g,"<br/>":/\n/g,    " ":/ /g,"  ":/\t/g  })e=e.replace(s[i],i);  return e;};</script>

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读：

jQuery如何实现前端搜索功能

怎么实现springmvc接收jquery提交的数组后提取数据

vue.js的语法及常用指令的详解

The above is the detailed content of How to use regular expressions to highlight JavaScript code. For more information, please follow other related articles on the PHP Chinese website!