Javascript实现的CSS代码高亮显示

更新时间：2009年11月10日 11:49:03 作者：

到网上一位别出心裁的高手使用字符串而不是正则表达式实现了Javascript代码高亮显示，自己受益匪浅，于是就构思了CSS代码的高亮显示。

相比JavaScript，CSS的语法就简单多了，主要是处理注释、字符串、CSS样式名称、CSS样式值、缩进和换行，具体详情请看代码。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Javascript实现CSS代码高亮显示 </title> <style type="text/css"> body{     font-size:12px;     line-height:1.8;     font-family:'Courier New', Courier, monospace; } #area{     width:320px;     height:120px; } </style> </head> <body> <textarea id="area"> body{     font-size:12px;     line-height:1.8; } #area{     width:320px;     line-height:1.5;     font-family:"Courier New", Courier, monospace; } /* ul{ margin:0; padding:0; } */ </textarea> <button id="btn">This'S Testing……</button> <div id="pre" style="color:#F0F;"></div> <script type="text/javascript"> function $(id) {     return document.getElementById(id); }; $("btn").onclick=function(){     var code=$("area").value;     //处理注释：注释替换成 _数字_     var startIdx=endIndex=-1;     var at=0;     var commentList=[];     while(true){         startIndex=code.indexOf("/*",at);         if(startIndex==-1)break;         endIndex=code.indexOf("*/",startIndex);         if(endIndex==-1)break;                  at=endIndex+2;         commentList.push(code.substring(startIndex,at));         code=code.replace(commentList[commentList.length-1],"_"+(commentList.length-1)+"_");     }          //字符串     code=code.replace(/(['"]).*\1/g,function(m){return "<span style=\"color:#060;\">"+m+"</span>"});     //CSS样式值     code=code.replace(/:(.+);/g,function(m,n){return ":<span style=\"color:#00F;\">"+n+"</span>;"});     //CSS样式名称     code=code.replace(/[{}]/g,function(m){         if(m=="{"){             return "{<span style=\"color:#006;\">";         }else{             return "</span>}";         }     });          //注释     code=code.replace(/_(\d+)_/g,function(m,n){return "<span style=\"color:#999;\">"+commentList[n]+"</span>"});     //处理\t     code=code.replace(/^(\t+)/gm,function(m){         return (new Array(m.length+1)).join("&nbsp;&nbsp;&nbsp;&nbsp;");                                         });     //处理空格     code=code.replace(/^( +)/gm, function(m) {         return (new Array(m.length + 1)).join("&nbsp;");     });     //处理换行     code=code.replace(/\r?\n/g,"<br>");     $("pre").innerHTML=code; } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

ES6基础之解构赋值(destructuring assignment)
这篇文章主要介绍了ES6基础之解构赋值(destructuring assignment)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-02-02
javascript的indexOf忽略大小写的方法
javascript 中 indexOf 是严格区分大小写的如何才能忽略大小写呢?
2008-08-08
JS面向对象编程基础篇（二）封装操作实例详解
这篇文章主要介绍了JS面向对象编程封装操作,结合实例形式详细分析了JS面向对象封装操作的相关概念、原理、使用方法与操作注意事项,需要的朋友可以参考下
2020-03-03
three.js绘制地球、飞机与轨迹的效果示例
Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。下面这篇文章主要给大家介绍了利用three.js如何绘制地球、飞机与轨迹的效果，文中给出了详细的示例代码，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-02-02
ES6 Promise对象的含义和基本用法分析
这篇文章主要介绍了ES6 Promise对象的含义和基本用法,结合实例形式分析了Promise的含义、功能、基本用法及相关操作注意事项,需要的朋友可以参考下
2019-06-06
js中的值类型和引用类型小结文字说明与实例
下面就举例讲一下这两种类型在JavaScript中的体现、用法及注意事项。
2010-12-12
Ajax高级笔记 JavaScript高级程序设计笔记
这篇文章主要介绍了Ajax高级笔记 JavaScript高级程序设计笔记,需要的朋友可以参考下
2017-06-06
如何手动实现一个 JavaScript 模块执行器
这篇文章主要介绍了如何手动实现一个 JavaScript 模块执行器，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-10-10
jJavaScript中toFixed()和正则表达式的坑
这篇文章主要介绍了jJavaScript中toFixed()和正则表达式的坑，toFixed方法可以把Number四舍五入为指定小数位数的数字，具体详细内容需要的小伙伴可以参考一下
2022-04-04
Bootstrap 折叠（Collapse）插件用法实例详解
这篇文章主要介绍了Bootstrap 折叠（Collapse）插件用法实例详解的相关资料,需要的朋友可以参考下
2016-06-06