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需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序分享功能之按钮button 边框隐藏和点击隐藏
这篇文章主要介绍了微信小程序分享功能之按钮button 边框隐藏和点击隐藏,需要的朋友可以参考下
2018-06-06
跨域浏览器设置解决前端跨域问题
这篇文章主要为大家介绍了前端跨域浏览器设置解决前端跨域问题的方法，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
JavaScript实现网站访问次数统计代码
每个网站管理者，都必须知道每天有多少人访问了本站，需要一个网站访问次数功能来满足需求，本篇文章主要介绍了JavsScript实现网站访问次数统计代码，需要的朋友可以参考下
2015-08-08
Electron中实现大文件上传和断点续传功能
Electron是开源的框架，可以使用h5来开发跨平台pc桌面应用，这样前端开发这可以开发桌面应用了。这篇文章主要介绍了Electron中实现大文件上传和断点续传功能,需要的朋友可以参考下
2018-10-10
JavaScript数组的5种迭代方法
这篇文章主要为大家详细介绍了JavaScript数组的5种迭代方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-09-09
javascript 添加和移除函数的通用方法
javascript 添加和移除函数的通用方法, 需要的朋友可以参考下。
2009-10-10
js实现漂浮回顶部按钮实例
这篇文章主要介绍了js实现漂浮回顶部按钮的方法,实例分析了javascript实现返回顶部功能的样式与动态实现技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05
JavaScript中常用数据处理函数groupBy的用法详解
数据处理与分析中,对数据进行分组是非常常见的功能,不论是实际工作中,还是在面试的场景中应用十分广泛,尤其在函数式编程中 groupBy 十分常见,下面我们就来学习一下groupBy的用法吧
2023-12-12
js拖拽效果的原理及实现
这篇文章主要为大家详细介绍了js拖拽效果的原理及实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
纯JS实现图片验证码功能并兼容IE6-8(推荐)
这篇文章主要介绍了纯JS实现图片验证码功能并兼容IE6-8浏览器,需要的朋友可以参考下
2017-04-04

Javascript实现的CSS代码高亮显示

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具