Home > Web Front-end > JS Tutorial > How to use regular expressions to highlight JavaScript code

How to use regular expressions to highlight JavaScript code

php中世界最好的语言
Release: 2018-01-08 10:45:20
Original
2177 people have browsed it

这次给大家带来用正则表达式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
Copy after login

给大家看一下完整的代码

<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>
Copy after login


相信看了这些案例你已经掌握了方法,更多精彩请关注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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template