Heim > Web-Frontend > js-Tutorial > So verwenden Sie reguläre Ausdrücke, um JavaScript-Code hervorzuheben

So verwenden Sie reguläre Ausdrücke, um JavaScript-Code hervorzuheben

php中世界最好的语言
Freigeben: 2018-01-08 10:45:20
Original
2159 Leute haben es durchsucht

这次给大家带来用正则表达式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
Nach dem Login kopieren

给大家看一下完整的代码

<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>
Nach dem Login kopieren


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

相关阅读:

jQuery如何实现前端搜索功能

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

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

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reguläre Ausdrücke, um JavaScript-Code hervorzuheben. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage